WordPress終極優化指南–靜態資源預加載、鏈接預取、DNS預取、網頁預渲染、鏈接預連接
減少網站加載時間的最難得就是延遲。你沒辦法去減少DNS查找時間、TCP連接切換時間。
但是我們可以預先進行預加載連接、DNS查找和其他資源。
靜態資源預加載
靜態資源預加載是一種新的WEB標準,使用Preload可以輕鬆獲取管理資源獲取呈現的順序。Preload的好處是他不會干擾窗口的onload事件,並以高優先級下載資源。
常見的是預加載圖像、Javascript、CSS、字體等,預加載圖片代碼示例:
<link rel="preload" href="image.png">
預加載資源我們可以調整他的順序,然後將關鍵資源放頂部優先加載。
預加載頁面字體代碼示例:
<link rel="preload" href="https://domain.com/fonts/currentfont.woff" as="font" crossorigin>
引用其他域中的資源時需要跨源標記。
Javascript預加載示例:
<script> var res = document.createElement("link"); res.rel = "preload"; res.as = "style"; res.href = "css/cssfile.css"; document.head.appendChild(res); </script>
CSS預加載示例
<link rel="preload" href="/css/cssfile.css" as="style">
谷歌瀏覽器Chrome、火狐瀏覽器Firefox、歐朋瀏覽器Opera等都支持預加載,微軟的Edge也宣布了支持,但是尚未確認。
預取
預取是一種低優先級指令。他會告訴瀏覽器在空閒時間在後台加載資源,並且保存在瀏覽器緩存中。預取主要包括鏈接預取、DNS預取、網頁預渲染等
鏈接預取
Link Prefetch是最簡單的Prefetch指令他會告訴瀏覽器在後台下載基於鏈接的資源,並且保存在瀏覽器緩存。如果用戶訪問了這個鏈接的資源,他將顯示為即時加載的資源。
使用鏈接預取圖片示例:
<link rel="prefetch" href="image.png">
有一些wordpress主題支持預取,一般是在主題選項–性能裡面。
除了Safari,iOS Safari和Opera Mini之外,大多數新的瀏覽器都支持鏈接預取。
DNS預取
DNS Prefetch是一個指令,他會指示瀏覽器在後台進行DNS查找,減少延時。當用戶點擊鏈接時DNS查找已經完成。
DNS預取示例:
<!-- Prefetch DNS for external assets --> <link rel="dns-prefetch" href="//fonts.googleapis.com"> <link rel="dns-prefetch" href="//www.google-analytics.com"> <link rel="dns-prefetch" href="//cdn.cheshirx.com">
這裡可以使用一款插件Perfmatters,在插件設置頁面輸入域名即可進行DNS預取。插件價格不低。
此插件不但包括DNS預取,還有其他很多性能優化的設置,有興趣的可以看一看:
DNS預取我們需要填寫的域名,可以根據自己網頁中調用的地址來決定,查看網頁源代碼,將設計的域名全部加上即可。
預渲染
網頁預渲染類似於prefetch,但是他會指示瀏覽器在後台加載整個頁面,包括頁面內的所有資源。
網頁預渲染並不常用,此功能耗費帶寬較大,並且很多瀏覽器都不支持預渲染。
預連接
預連接類似於DNS預取,但是預連接會比DNS預取節省幾次往返請求,減少連接時間。
Google字體預連接示例:
<link href="fonts.gstatic.com" rel="preconnect" crossorigin>
這個代碼需要存在於Preconnect預連接工作的標頭中,下面是js代碼:
function preconnectTo(url) { var hint = document.createElement("link"); hint.rel = "preconnect"; hint.ref = url; document.head.appendChild(hint); }
添加到主題的header.php頭部文件。
前面提到的Perfmatters插件裡也有這個設置。