通過Google PageSpeed Insights執行WordPress網站檢測，Google將會告訴您需要移除WordPress網站上阻塞渲染的資源。那麼：
- 什麼是阻塞渲染資源？
- 如何移除WordPress上的阻塞渲染資源？
在這篇文章中，我們將為您回答上述兩個問題。文章將會分四個部分進行說明：
如何理解“移除阻塞渲染資源”？
瞭解什麼是阻塞渲染的資源以及為什麼它們會影響網站的載入時間，我們需要從基本的角度來了解網路瀏覽器如何呈現網頁。
當訪問者登陸您的站點時，他們的Web瀏覽器從站點程式碼的頂部開始並進行閱讀，記住，是從上到下。
如果在此過程中遇到CSS或JavaScript檔案，則在等待下載和處理該檔案時需要停止 “讀取”。那麼花費在“暫停”上的時間來下載和解析這些資源可能影響到更重要的程序，例如載入遊客訪客應立即可見的網站內容。
讓我們看一個極端的例子來說明為什麼這可能是一個問題。
假設您一個網站的頁尾設計了很酷的JavaScript效果。它由“ coolfooter.js”提供支援，但該指令碼在您網站程式碼頂部引用（實際上訪問者只有滾動到頁尾才能看到它）。
那麼這個網站程式碼的佈局就顯得不合理了。
我們知道，當訪問者登陸您的網站時，他們的瀏覽器開始從上到下閱讀。因此，在它可以解析和呈現網站上首屏內容的HTML之前，它需要等待下載並解析coolfooter.js檔案。
這就會導致，顯示首屏內容的HTML需要更長的時間，這意味著您的訪問者會覺得網站速度較慢。
當Google告訴您移除阻塞渲染資源時，它實際上是在說：“嘿，不要在網站程式碼的頂部載入不必要的資源，因為這將使訪問者的瀏覽器下載優先可見部分內容所需的時間更長”。
有了本文中的提示，您就可以延遲載入某些CSS和JavaScript資源，直到頁面的可見部分已經載入為止。
什麼是阻塞渲染資源？
當提到阻塞渲染資源時，我們通常指的是：
- CSS
- JavaScript
重要的是要了解並非所有CSS和JavaScript檔案都是阻塞渲染的。
例如，在頁面頂部載入重要的CSS至關重要，否則訪問者可能會遇到所謂的未樣式化內容閃爍（FOUC）現象。
影象是否屬於阻塞渲染資源？
不，影象不會造成渲染阻塞。優化WordPress影象以減小其檔案大小仍然很重要，但不必擔心優化影象的傳送路徑。
如何發現網站是否存在阻塞渲染的資源
要評估您的WordPress網站當前是否具有阻塞渲染的資源，可以使用Google PageSpeed Insights。
您要做的就是輸入要測試的URL。然後，PageSpeed Insights將在“ 優化建議”下的“ 移除阻塞渲染的資源”部分列出每個資源的地址：
PageSpeed Insights阻塞渲染資源提示
如何移除阻塞渲染資源？
不用擔心，您不必手動執行此操作。在下一節中，我們將討論可幫助您移除阻塞渲染資源的WordPress外掛。但是，我們應該瞭解這些外掛工作的原理。
如何移除阻塞渲染的JavaScript
有幾種不同的策略可以移除阻塞渲染的JavaScript。我們在有關如何推遲解析JavaScript的文章中詳細介紹這些方法，但以下是主要方法：
- 非同步載入 –讓HTML解析器（例如訪客的瀏覽器）下載JavaScript，同時仍然解析HTML的其餘部分。也就是說，檔案下載時並不會完全停止解析。但是，一旦下載，它將暫停HTML解析器以執行指令碼。
- 延遲載入 –讓HTML解析器在解析其餘HTML的同時下載JavaScript，並等待執行指令碼，直到HTML解析完成。
這Growing with the Web網站製作的插圖可以幫助你更好地理解正常指令碼載入、指令碼非同步載入和指令碼延遲載入三者之間的區別：
JavaScript 正常/非同步/延遲載入對比
使用延遲載入的好處是可以確保指令碼按照它們在程式碼中出現的順序執行。
非同步載入不使用這種方法，如果將非同步載入應用於所有JavaScript資源，有時會導致問題。因為非同步載入通常會破壞頁面文件前面呈現所依賴的資源。非同步載入產生的最常見問題是損壞的jQuery資源，這些資源會在將jquery.js新增到文件之前嘗試載入。
如何移除阻塞渲染的CSS
移除阻塞渲染的CSS可能會有些棘手，因為您必須注意不要延遲渲染首屏內容所需的CSS。理想的安排是：
- 確定呈現首屏內容所需的樣式，並與HTML內聯傳送這些樣式。
- 在拉入CSS檔案的連結元素上使用media屬性，以識別有條件的CSS資源，即僅特定裝置或情況所需的CSS資源。
- 剩下的CSS資源應該採用非同步載入，通常是通過新增延遲或非同步JavaScript來完成的。
如何使用WordPress外掛移除阻塞渲染資源
為了演示如何在WordPress上移除阻塞渲染的資源，我們建立了一個簡單的測試站點，其中包括阻塞渲染的CSS和JavaScript，然後進一步說明如何使用兩種不同的外掛解決方案來移除阻塞渲染的CSS和JavaScript：
- Autoptimize + Async JavaScript （免費）
- WP Rocket（收費）
作為參考，以下是測試站點在未優化CSS和JavaScript前的檢測：
PageSpeed Insights之“移除阻塞渲染的資源”
如果您要使用Google PageSpeed Insights測試更改的效果，需注意Google會將其結果快取了幾分鐘（連續快速測試，可能結果不會有變化）。
- 測試未優化的網站
- 啟用本節中的一個外掛
- 重新測試您的網站
…然後，您仍會看到未優化網站的結果，直到Google重置其快取為止。
如何使用Autoptimize + Async JavaScript移除阻塞渲染資源
Autoptimize和Async JavaScript是來自同一開發人員的兩個獨立的免費外掛。它們可以幫助您優化CSS和JavaScript傳送。
安裝並啟用外掛，去設定 → Async JavaScript ：
- 選中頂部的Enable Async JavaScript覈取方塊。
- 在“ Quick Settings”框中，在“ Apply Async”和“ Apply Defer ”之間選擇。
如何設定Async JavaScript 外掛
如果Async選項在您的網站上造成問題，我們建議您嘗試Defer或排除jQuery選項。
完成Async JavaScript外掛設定後，轉到設定→Autoptimize，然後：
- 勾選Optimize JavaScript Code
- 勾選Optimize CSS Code
如何設定Autoptimize外掛
如果您是專業使用者，則可以嘗試更多其他JavaScript和CSS優化設定，但是大多數站點使用預設設定即可。
在設定Autoptimize和Async JavaScript之後，我們的測試站點通過了PageSpeed Insights的“移除阻塞渲染資源”檢測：
啟用Autoptimize和Async JavaScript後PageSpeed Insights評測結果
如果您想移除更多阻塞渲染的資源，則可以進一步使用Autoptimize手動內聯關鍵CSS。但是，這需要一些開發知識，因此不建議非開發人員嘗試。
您也可以選擇兩者中的一個。但是，鑑於這兩個外掛都來自同一個開發人員，並且相互相容，因此大多數網站的最佳方法是兩者兼用。
如何使用WP Rocket移除阻塞渲染資源
WP Rocket是一個非常受歡迎的專業的WordPress效能和快取外掛。
WP Rocket對於WordPress的效能所做的不僅僅是快取，還包括幫助您移除WordPress網站上阻塞渲染的CSS和JavaScript資源。
安裝並啟用WP Rocket後，轉到“ File Optimization（檔案優化）”選項卡。然後，啟用以下兩個選項：
- 在“ CSS Files”部分下Optimize CSS delivery
- 在“ JavaScript files”部分下Load JavaScript deferred。您可以嘗試關閉Safe Mode for jQuery。但是，如果您注意到站點前端存在問題，則可能需要重新啟用jQuery的安全模式，因為這可能是罪魁禍首。
如何設定WP Rocket
啟用這兩個功能後，我們的測試站點也就輕鬆通過了PageSpeed Insights中的“移除阻塞渲染資源”稽覈。與Autoptimize/Async JavaScript設定相比，WP Rocket還設法移除了更多的阻塞渲染資源：
啟用WP Rocket後PageSpeed Insights評測結果
小結
阻塞渲染資源通過迫使訪問者的瀏覽器延遲渲染首屏內容，而瀏覽器立即下載不需要的檔案，從而減慢了WordPress網站的頁面載入時間。
阻塞渲染資源會增加WordPress網站感知頁面載入時間，強制瀏覽器延遲呈現首屏內容，立即下載不需要的檔案。
為了幫助訪問者更快地載入頁面的可見部分，您應該延遲載入不立即需要的資源。
要移除WordPress上的阻塞渲染資源，您可以使用現成的外掛。
對於免費解決方案，您可以結合使用Autoptimize和Async JavaScript（來自同一開發人員的兩個外掛）的組合；如果您“錢多人傻”，可以使用WP Rocket。
評論留言