如何從您的 WordPress 網站中消除渲染阻塞資源

您是否曾經創建過一個 WordPress 網站，喜歡它的一切，並在意識到它需要很長時間才能加載後立即開始討厭它？ 掌握渲染阻塞資源的消除將有助於診斷此問題。 但是怎麼辦？

緩慢的加載速度不僅會給您和您的訪問者帶來麻煩，而且在 SEO 方面也會讓您付出巨大的代價。 自 2010 年以來，谷歌算法在排名決策中考慮了加載速度，因此慢速頁面在結果頁面上的顯示較低。

您可能熟悉導致頁面性能不佳的常見罪魁禍首——內容過多、圖像文件未壓縮、託管不足以及緩存不足等等。 但還有另一個經常被忽視的肇事者在起作用：渲染阻塞資源。

不要誤會我的意思——CSS 和 JavaScript 很棒。 如果沒有 CSS，網站將成為純文本牆。 如果沒有 Ja=ooovaScript，我們將無法向我們的網站添加動態的、交互的、引人入勝的元素。 但是，如果在錯誤的時間執行，CSS 和 JavaScript 都會降低您網站的性能。

原因如下：當 Web 瀏覽器首次加載網頁時，它會先解析頁面的所有 HTML，然後再將其顯示在屏幕上給訪問者。 當瀏覽器遇到指向 CSS 文件、JavaScript 文件或內聯腳本（即 HTML 文檔本身中的 JavaScript 代碼）的鏈接時，它會暫停 HTML 解析以獲取並執行代碼，這會減慢一切。

如果您已經優化了 WordPress 中的頁面性能但仍然遇到問題，則渲染阻塞資源可能是罪魁禍首。 有時這段代碼對於在第一次加載時運行很重要，但大多數時候它可以被刪除或推送到隊列的最後。

在這篇文章中，我們將向您展示如何從您的 WordPress 網站中消除這些討厭的代碼並提高您的性能。

如果您更願意觀看視頻，請查看由 WP Casts 創建的演練：

1. 識別渲染阻塞資源。

在進行任何更改之前，您首先需要找到渲染阻塞資源。 最好的方法是使用免費的在線速度測試，例如 Google 的 PageSpeed Insights 工具。 粘貼您站點的 URL，然後單擊分析。

掃描完成後，Google 會為您的網站分配一個綜合速度分數，從 0（最慢）到 100（最快）。 50 到 80 之間的分數是平均分，因此您需要落在該範圍的上半部分或以上。

要識別正在減慢頁面速度的渲染阻止文件，請向下滾動到Opportunities ，然後打開Eliminate render-blocking resources手風琴。

圖片來源

您會看到一個文件列表，這些文件會減慢頁面的“首次繪製”速度——這些文件會影響初始頁面加載時出現在瀏覽器窗口中的所有內容的加載時間。 這也稱為“首屏”內容。

記下任何以擴展名 .css 和 .js 結尾的文件，因為這些是您要關注的文件。

2. 手動或使用插件消除渲染阻塞資源。

現在您已經確定了問題，有兩種方法可以在 WordPress 中修復它：手動或使用插件。 我們將首先介紹插件解決方案。

幾個 WordPress 插件可以減少渲染阻塞資源對 WordPress 網站的影響。 我將介紹兩個流行的解決方案，Autoptimize 和 W3 Total Cache。

如何使用 Autoptimize 插件消除渲染阻塞資源

Autoptimize 是一個免費插件，可以修改您的網站文件以提供更快的頁面。 自動優化通過聚合文件、縮小代碼（即通過刪除冗餘或不必要的字符來減小文件大小）以及延遲渲染阻塞資源的加載來工作。

由於您正在修改站點的後端，請記住謹慎使用此插件或任何類似插件。 要使用 Autoptimize 消除渲染阻塞資源：

1.安裝並激活 Autoptimize 插件。

2.從您的 WordPress 儀表板中，選擇設置 > 自動優化。

3.在JavaScript 選項下，選中優化 JavaScript 代碼旁邊的框？ .

4.如果旁邊的框聚合 JS 文件？ 已勾選，取消勾選。

5.在CSS 選項下，選中優化 CSS 代碼旁邊的複選框？ .

6.如果旁邊的框聚合 CSS 文件？ 已勾選，取消勾選。

7.在頁面底部，單擊保存更改並清空緩存。

8.使用 PageSpeed Insights 掃描您的網站並檢查是否有改進。

9.如果 PageSpeed Insights 仍然報告渲染阻塞 JavaScript 文件，返回到設置 > 自動優化並選中聚合 JS 文件旁邊的框？ 和聚合 CSS 文件？ . 然後，單擊保存更改並清空緩存並再次掃描。

如何使用 W3 Total Cache 插件消除渲染阻塞資源

W3 Total Cache 是一種廣泛使用的緩存插件，可幫助解決滯後代碼。 要使用 W3 Total Cache 消除渲染阻塞 JavaScript：

1.安裝並激活 W3 Total Cache 插件。

2.一個新的性能選項將添加到您的 WordPress 儀表板菜單中。 選擇性能 > 常規設置。

3.在Minify部分，選中Minify旁邊的框，然後將Minify mode設置為Manual 。

4.單擊縮小部分底部的保存所有設置。

5.在儀表板菜單中，選擇性能 > 縮小。

6.在JS 縮小設置旁邊的JS部分，確保選中啟用框。 然後，在Operations in areas下，打開第一個Embed type下拉菜單並選擇Non-blocking using “defer” 。

7.在JS 文件管理下，從主題下拉列表中選擇您的活動主題。

8.回顧您之前掃描的 PageSpeed Insights 結果。 對於Eliminate render-blocking resources ending in .js 下的每個項目，單擊Add a script 。 然後，從 PageSpeed Insights 複製 JavaScript 資源的完整 URL，並將其粘貼到文件 URI字段中。

9.粘貼 PageSpeed Insights 報告的所有渲染阻塞 JavaScript 資源後，單擊JS部分底部的保存設置和清除緩存。

10.在CSS minify settings旁邊的CSS部分，選中 CSS minify settings旁邊的框，並確保Minify method設置為Combine & Minify 。

11.在CSS 文件管理下，從主題下拉列表中選擇您的活動主題。

12.對於您的 PageSpeed Insights 掃描結果中消除以 .css 結尾的渲染阻止資源下的每個項目，單擊添加樣式表。 然後，從 PageSpeed Insights 複製 CSS 資源的完整 URL，並將其粘貼到文件 URI字段中。

13.粘貼 PageSpeed Insights 報告的所有渲染阻塞 CSS 資源後，單擊CSS部分底部的保存設置和清除緩存。

14.使用 PageSpeed Insights 掃描您的網站並檢查是否有改進。

如何手動消除渲染阻塞 JavaScript

插件可以為您處理後端工作。 話又說回來，插件本身只是添加到您的網絡服務器的更多文件。 如果你想限制這些額外的文件，或者如果你只想自己處理編程，你可以手動解決渲染阻塞的 JavaScript。

為此，請在您的網站文件中找到<script>標記，以找到在您的 PageSpeed Insights 掃描中識別的資源。 它們看起來像這樣：

 
<script src="https://blog.hubspot.com/marketing/resource.js">

<script>標籤告訴瀏覽器加載並執行由src (source) 屬性標識的腳本。 這個過程的問題是這個加載和執行會延遲瀏覽器對網頁的解析，從而影響整體加載時間：

圖片來源

要解決此問題，您可以將async （異步）或defer屬性添加到渲染阻塞資源的腳本標記中。 async和defer是這樣放置的：

 
<script src="https://blog.hubspot.com/marketing/resource.js" async>
 <script src="https://blog.hubspot.com/marketing/resource.js" defer>

雖然它們對加載時間有相似的影響，但這些屬性告訴瀏覽器做不同的事情。

async屬性向瀏覽器發出信號，讓其在解析頁面其餘部分時加載 JavaScript 資源，並在加載後立即執行此腳本。 執行腳本會暫停 HTML 解析：

圖片來源

具有defer屬性的腳本在頁面被解析時也會被加載，但是這些腳本會被延遲到第一次渲染之後或更重要的部分加載之後才加載：

圖片來源

defer和async屬性不應在同一資源上一起使用，但其中一個可能比另一個更適合特定資源。 通常，如果一個非必要的腳本依賴於在它之前運行的腳本，請使用defer 。 defer屬性確保腳本將在前面必要的腳本之後運行。 否則，使用異步。

3. 重新運行站點掃描。

進行更改後，通過 PageSpeed Insights 對您的網站進行最後一次掃描，看看您的更改對您的分數有何影響。

希望有明顯的改善，但如果沒有，請不要擔心。 許多因素會抑制頁面性能，您可能需要進行更多挖掘才能找到性能不佳的根源。

4. 檢查您的網站是否存在錯誤。

除了重新掃描之外，還要檢查您的頁面以確保您的網站正常運行。 頁面是否正確加載？ 所有元素都出現了嗎？ 如果出現問題或無法正確加載，請撤消更改並解決問題。

如果您已達到反复嘗試各種措施而速度增益微乎其微的地步，最好考慮其他方法來加速您的網頁，而不是冒險破壞您的網站。

優化您的 WordPress 網站以提高性能

許多因素都會影響用戶在您網站上的體驗，但沒有什麼比加載時間更重要的了。 每當您對 WordPress 網站的內容或外觀進行重大更改時，您應該始終考慮此類更改如何影響性能。

現在您已經消除了渲染阻塞資源，您應該通過分析已知會降低性能的其他功能來繼續優化您網站的速度。 嘗試將定期速度測試納入您的站點維護計劃 - 提前發現任何潛在問題對您的成功至關重要。