目前來說，延遲是我們在加載網站中最難解決的問題，網站如果過度緩慢的話，會影響用戶的體驗，<link> 元素的 rel 屬性的屬性值preload能夠讓你選擇哪些資源是在頁面加載完成後立即需要的，可以提示瀏覽器提前下載文字、JavaScript、CSS等資源，以達到優化效能的效果。以下就讓小K來教大家利用<link rel=”preload”>預加載CSS、JavaScript、DNS預取，大幅提升wordpress網站的速度吧！
找出網站緩慢原因
可以先利用Gtmetrix或Pagespeed等網站找出導致網站緩慢的元素，然後依照以下格式加入到佈景主題編輯器的header.php
預加載文字
<link rel="preload"href="https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2" as="font" crossorigin>
預載Google字體
<link href="fonts.gstatic.com" rel="preconnect" crossorigin>
如果需要引用其他域中的資源的話，需要跨源標記
DNS預取
透過DNS預取可以使瀏覽器主動去執行域名解析的功能，從而減少延遲的時間，域名列表請根據自己的情況填寫，可以利用Gtmetrix，幫忙找出自己網站的DNS Lookup
<link rel="dns-prefetch" href="www.googletagmanager.com">
CSS預加載示例
<link rel="preload" href="/css/cssfile.css" as="style">
Script預加載
<link rel="preload" href="main.js" as="script">
在完成每一個步驟之後，小K來到Pagespeed測試一下速度以及評分
在完成了以上預加載程序後，小K的網站評分由70左右，飆升到新高–90分
