如何在WordPress(CSS + JavaScript)上消除渲染阻止資源

如果您曾經通過Google PageSpeed Insights運行WordPress網站,則Google可能已經告訴您您需要消除WordPress網站上的阻止渲染的資源。實際上,這也許就是為什麼您現在正在閱讀這篇文章。

您可能會想到兩個問題:

  1. 首先,什麼是渲染阻止資源?
  2. 如何消除WordPress上的渲染阻止資源?

在這篇文章中,我們將為您回答兩個問題。這是我們在這篇文章中介紹的所有內容:

只需移至Kinsta,即可將WordPress網站的速度提高200%。
        
          今天免費遷移

  • 什麼是阻止渲染的資源以及它們為什麼會成為問題
  • 一般如何修復渲染阻止資源
  • 如何使用免費或付費插件來解決WordPress上的問題

「消除渲染阻止資源」是什麼意思?

為了了解什麼是阻止渲染的資源以及為什麼它們會破壞您網站的載入時間,我們需要從基本的角度來了解網路瀏覽器如何呈現網頁。

當訪問者登陸您的網站時,他們的網路瀏覽器基本上從您網站代碼的頂部開始並進行閱讀。從上到下,懂嗎?

如果在此過程中遇到CSS或JavaScript文件,則在等待下載和處理該文件時需要停止「讀取」。它花費「暫停」時間來下載和解析這些資源的時間可能會花費在更具生產力的事情上,例如載入您網站內容的一部分,當有人登陸頁面時,該部分立即可見。

讓我們看一個極端的例子來說明為什麼這可能是一個問題。

假設您在網站的頁腳中擁有酷炫的JavaScript效果。它由「 coolfooter.js」提供支持,「 coolfooter.js」是在您網站的代碼頂部引用的腳本(即使效果位於頁腳中,因此訪問者只有滾動到頁腳才能看到它)。

因此,網站代碼的布局可能非常粗糙:

  • 標頭元
  • Coolfooter.js
  • 摺疊式內容的HTML。這就是訪問者立即看到的所有內容(在他們開始與頁面進行交互之前)

這就是為什麼這是一個問題:

當訪問者登陸到您的網站時,他們的瀏覽器開始從上到下閱讀。因此,在它可以解析和呈現網站上首屏內容的HTML之前,它需要等待下載並解析coolfooter.js文件。

最終結果?顯示首屏內容的HTML需要更長的時間,這意味著您的訪問者會認為您的網站速度較慢。

當Google告訴您消除渲染阻止資源時,它實際上是在說:「嘿,請不要在網站代碼的頂部載入不必要的資源,因為這將使訪問者的瀏覽器花更長的時間下載您可見的部分內容」。

藉助本文中的提示,您可以等待載入某些CSS和JavaScript資源,直到頁面的可見部分已經載入為止。

什麼是渲染阻止資源?

當提到渲染阻止資源時,我們通常談論的是:

  • 的CSS
  • 的JavaScript

重要的是要了解並非所有CSS和JavaScript文件都具有渲染阻止功能。

例如,將重要的CSS載入到頂部非常重要,否則訪問者可能會遇到所謂的未樣式化內容(FOUC)閃光現象。

圖像是否阻止資源?

不,圖像沒有渲染阻塞。優化圖像以減小文件大小仍然很重要,但是您不必擔心優化圖像的傳送路徑。

如何測試您的網站是否具有阻止渲染的資源

要評估您的WordPress網站當前是否具有阻止渲染的資源,可以使用Google PageSpeed Insights。

您要做的就是輸入要測試的URL。然後,如果您對渲染阻止資源有疑問,PageSpeed Insights將在「機會」下的「消除渲染阻止資源」部分列出每個單獨的資源:

PageSpeed Insights中的「消除渲染阻止資源」消息

PageSpeed Insights中的「消除渲染阻止資源」消息

您如何消除渲染阻止資源?

不用擔心,您不必手動執行此操作。在下一節中,我們將討論WordPress插件,這些插件可以幫助您消除渲染阻止資源。

但是,了解這些插件在後台執行的操作以消除渲染阻止資源很有幫助。

如何消除渲染阻止JavaScript

有幾種不同的策略可以消除阻止渲染的JavaScript。我們將在有關如何推遲解析JavaScript的文章中詳細介紹這些方法,但以下是主要方法:

  • 非同步-讓HTML解析器(例如訪問者的瀏覽器)下載JavaScript,同時仍然解析HTML的其餘部分。也就是說,文件下載過程不會完全停止解析。但是,一旦下載,它將暫停HTML解析器以執行腳本。

  • 延遲–讓HTML解析器在解析其餘HTML的同時下載JavaScript,並等待執行腳本,直到HTML解析完成。

與Web一起成長的插圖很好地展示了差異:

JavaScript非同步與延遲

JavaScript非同步與延遲

使用defer的好處是可以確保腳本按照它們在代碼中出現的順序執行。

非同步不使用這種方法,如果將非同步應用於所有JavaScript資源,有時會引起問題,因為非同步通常會破壞依賴於文檔前面出現的資源的資源。非同步產生的最常見問題是損壞的jQuery資源,這些資源會在將jquery.js添加到文檔之前嘗試載入。

如何消除渲染阻止CSS

消除渲染阻止CSS可能會有些棘手,因為您必須注意不要延遲渲染首屏內容所需的CSS。理想的安排是:

  • 標識呈現首屏內容所需的樣式,並將這些樣式與HTML內聯。
  • 在拉入CSS文件的鏈接元素上使用media屬性,以識別有條件的CSS資源,即僅特定設備或情況所需的CSS資源。
  • 剩餘的CSS資源應該非同步載入,通常是通過添加延遲或非同步JavaScript來完成此操作。說實話,我們真的很費力,不是嗎?這絕對是前端工程師的領地。如果您是前端工程師,那就太好了,但是我們大多數人都不是。好消息是,這是一篇有關WordPress的文章,您可以使用合適的插件來消除或至少顯著減少影響站點的渲染阻止JS和CSS資源的數量。

如何使用WordPress插件消除阻止渲染的CSS和JavaScript資源

為了演示如何在WordPress上消除渲染阻止資源,我們建立了一個簡單的測試站點,其中包括渲染阻止CSS和JavaScript,然後將帶您逐步了解如何使用兩種不同的插件解決方案來消除渲染阻止CSS和JavaScript:

  • 自動優化+非同步JavaScript(免費)
  • WP Rocket(收費)

作為參考,以下是我們的測試站點在優化CSS和JavaScript交付之前的外觀:

PageSpeed Insights中的「消除渲染阻止資源」消息

PageSpeed Insights中的「消除渲染阻止資源」消息

如果您要通過Google PageSpeed Insights測試更改的有效性,請注意Google會將其結果緩存了幾分鐘。本質上,這意味著如果您快速…

  1. 測試未優化的網站
  2. 激活本節中的一個插件
  3. 重新測試您的網站

…然後,您仍會看到未優化網站的結果,直到Google重置其緩存為止。因此,請確保您等了幾分鐘,讓Google清除其緩存,然後再認為該插件無法正常工作。

如何使用自動優化+非同步JavaScript插件消除渲染阻止資源

Autoptimize和Async JavaScript是來自同一開發人員的兩個獨立的免費插件。它們共同幫助您優化CSS和JavaScript的交付。

安裝完兩個插件後,轉到設置→非同步JavaScript,然後:

  • 選中頂部的啟用非同步JavaScript複選框。
  • 在「快速設置」框中,在「應用非同步」和「應用延遲」之間選擇。

如何配置非同步JavaScript插件

如何配置非同步JavaScript插件

如果Async選項導致您的網站出現問題,我們建議您嘗試Defer或排除jQuery,插件可以為您提供此選項。

設置非同步JavaScript插件後,轉到設置→自動優化,然後:

  • 選中複選框以優化JavaScript代碼
  • 選中複選框以優化CSS代碼

如何配置Autoptimize插件

如何配置Autoptimize插件

如果您是高級用戶,則可以使用其他JavaScript和CSS優化設置,但是大多數網站都可以使用默認設置。

在配置了Autoptimize和Async JavaScript之後,我們的測試站點通過了PageSpeed Insights的「消除渲染阻止資源」審核:

具有自動優化和非同步JavaScript的PageSpeed Insights結果

具有自動優化和非同步JavaScript的PageSpeed Insights結果

如果您想消除更多的這些文件,則可以進一步使用Autoptimize手動內聯關鍵CSS。不過,這需要一些開發知識,因此非開發人員不應嘗試。

如果需要,您也可以單獨使用插件。但是,鑒於這兩個插件都來自同一個開發人員,並且相互兼容,因此大多數網站的最佳方法是將它們組合在一起。

如何使用WP Rocket消除渲染阻止資源

WP Rocket是流行的高級WordPress性能和緩存插件。

通常,我們不允許在Kinsta託管的WordPress網站上緩存插件,因為我們已經通過快速的Nginx FastCGI緩存在伺服器級別為您處理了緩存。

但是,WP Rocket與Kinsta有特殊的集成,這使WP Rocket可以很好地與Kinsta緩存配合使用。之所以如此,是因為WP Rocket對於WordPress的性能所做的不僅僅是緩存,還包括幫助您消除WordPress網站上阻止渲染的CSS和JavaScript資源。

安裝並激活WP Rocket後,轉到「文件優化」選項卡。然後,啟用以下兩個選項:

  • 在「 CSS文件」部分下優化CSS交付

  • 載入「 JavaScript文件」部分下延遲的JavaScript。您可以嘗試關閉jQuery的安全模式。但是,如果您在網站的前端發現問題,則可能希望重新啟用jQuery的安全模式,因為這可能是罪魁禍首。

如何配置WP Rocket

如何配置WP Rocket

激活這兩個功能後,我們的測試站點還通過了PageSpeed Insights中的「消除渲染阻止資源」審核。 WP Rocket還設法消除了比Autoptimize / Async JavaScript設置更多的渲染阻止資源:

具有WP Rocket的PageSpeed Insights結果

具有WP Rocket的PageSpeed Insights結果

這就是消除WordPress網站上阻止渲染的資源的方法!

想要擺脫#WordPress中的渲染阻止資源嗎?有了合適的插件,這非常容易…了解如何調整設置,使您的網站更快! ⚙️?‍♀️

點擊鳴叫

摘要

阻止渲染的資源通過迫使訪問者的瀏覽器延遲渲染首屏內容,而瀏覽器立即下載不需要的文件,從而減慢了您的WordPress網站的頁面載入時間。

為了幫助訪問者更快地載入頁面的可見部分,您應該延遲載入不是立即需要的資源。

要消除WordPress上的渲染阻止資源,您可以使用現成的插件。

對於免費解決方案,您可以結合使用Autoptimize和Async JavaScript(來自同一開發人員的兩個插件)的組合。

如果您願意付費,可以使用WP Rocket,它與Kinsta進行了特殊的集成,可以幫助您進行許多其他WordPress性能調整。

您還有其他疑問,如何消除WordPress上的渲染阻止資源?讓我們在評論中知道!

12股

相關文章