您是否通過性能測試工具運行WordPress網站，而只是遇到了推遲WordPress中JavaScript解析的指令？
實施此更改可能會對您網站的頁面載入時間產生積極影響，尤其是對於移動訪問者而言。但是警告可能有點難以理解，這就是為什麼我們要確切解釋推遲JavaScript解析的含義以及如何在WordPress網站上實施此更改的原因。
這是您將從本文中學到的內容：
厭倦了緩慢的WordPress託管和低於標準的支持？我們在Kinsta做不同的事情。查看我們的託管計劃
- JavaScript的延遲解析意味著什麼
- 如何判斷您的站點是否需要推遲JavaScript的解析
- 延遲JavaScript解析的不同方法
- 如何推遲WordPress中JavaScript的解析
如果您只想直接跳到本教程，則可以單擊上面列表中的最後一個鏈接。
推遲WordPress中的JavaScript解析是什麼意思？
如果您曾經通過Google PageSpeed Insights，GTmetrix或其他頁面速度測試工具來運行WordPress網站，則可能會想到建議推遲JavaScript的解析。
但是……這實際上意味著什麼？為什麼它是重要的性能考慮因素？
基本上，當有人訪問您的WordPress網站時，您網站的伺服器會將您網站的HTML內容傳遞給該訪問者的瀏覽器。
然後，訪問者的瀏覽器從頂部開始，然後遍歷代碼以呈現您的網站。如果從上到下找到任何JavaScript，它將停止呈現頁面的其餘部分，直到可以獲取和解析JavaScript文件為止。
它將針對找到的每個腳本執行此操作，這可能會對您網站的頁面載入時間產生負面影響，因為訪問者需要在瀏覽器下載並解析所有JavaScript時凝視空白屏幕。
如果某個腳本對於網站的核心功能不是必需的（至少在初始頁面載入時），則您不希望它妨礙載入網站更重要的部分，這就是為什麼這些頁面速度測試工具總是告訴您推遲JavaScript的解析。
那麼推遲JavaScript解析意味著什麼？
本質上，您的網站將告訴訪問者的瀏覽器等待下載和/或解析JavaScript，直到網站的主要內容載入完成。到那時，訪問者已經可以看到您的頁面並與您的頁面進行交互，因此下載和解析JavaScript的等待時間不再具有負面影響。
通過加快內容的非常規載入時間，您可以使Google滿意，並為訪問者創造更好，更快的體驗。
如何判斷是否需要推遲JavaScript解析
要測試您的WordPress網站是否需要推遲JavaScript的解析，可以通過GTmetrix運行您的網站。
GTmetrix將給您一個評分，並列出需要延遲的特定腳本：
推遲GTmetrix中JavaScript測試的解析
延遲解析JavaScript的不同方法
有幾種不同的方法可以推遲JavaScript的解析。首先，您可以將兩個屬性添加到腳本中：
- 非同步
- 推遲
通過這兩個屬性，訪問者的瀏覽器無需暫停HTML解析即可下載JavaScript。但是，不同之處在於，儘管非同步不會暫停HTML解析以獲取腳本（默認行為），但它確實會暫停HTML解析器以在腳本被獲取後執行。
使用defer，訪問者的瀏覽器在解析HTML時仍會下載腳本，但是它們將等待解析腳本，直到HTML解析完成為止。
與Web一起成長的這張圖很好地解釋了差異：
該圖說明了非同步與延遲
Varvy的Patrick Sexton推薦的另一種選擇是，僅在初始頁面載入完成後，才使用腳本來調用外部JavaScript文件。這意味著在初始頁面載入完成之前，訪問者的瀏覽器將不會下載或執行任何JavaScript。
最後，您將看到的另一種方法是將JavaScript移至頁面底部。但是，這種方法不是一個很好的解決方案，因為即使您的頁面很快就會顯示出來，訪問者的瀏覽器仍會在載入過程中將頁面顯示為載入狀態，直到所有腳本完成為止。這可能會阻止某些訪問者與您的頁面進行互動，因為他們認為內容未完全載入。
如何推遲WordPress中JavaScript的解析（4種方法）
要推遲WordPress中JavaScript的解析，您可以採取以下三種主要方法：
- 插件–有一些很棒的免費和高級WordPress插件可以推遲JavaScript解析。我們將向您展示如何使用兩個流行的插件。
- Varvy方法–如果您精通技術，則可以直接編輯網站的代碼，並使用Varvy中的代碼段。
- Functions.php文件–您可以在子主題的functions.php文件中添加代碼段，以自動延遲腳本。
您可以單擊上方直接跳至首選方法，或通讀所有技術以找到最適合您的方法。
1.免費的非同步JavaScript插件
Async JavaScript是Frank Goossens提供的免費WordPress插件，也是流行的Autoptimize插件背後的同一個傢伙。
它為您提供了一種使用非同步或延遲來延遲解析JavaScript的簡單方法。
首先，您可以從WordPress.org安裝並激活免費插件。然後，轉到設置→非同步JavaScript來配置插件。
在頂部，您可以啟用插件的功能，並在非同步和延遲之間進行選擇。記得：
- Async在仍然解析HTML的同時下載JavaScript，然後暫停HTML解析以執行JavaScript。
- Defer在仍然解析HTML的同時下載JavaScript，並等待執行直到HTML解析完成。
如何使用非同步JavaScript插件
再往下，您還可以選擇如何處理jQuery。許多主題和插件嚴重依賴jQuery，因此，如果您嘗試推遲解析jQuery腳本，則可能會破壞網站的某些核心功能。最安全的方法是排除jQuery，但您可以嘗試將其推遲。只要確保徹底測試您的網站即可。
藉助WordPress，我們的流量增長了1,187％。我們將向您展示方法。加入20,000多個其他人，他們每周都會收到有關WordPress內部技巧的新聞！立即訂閱成功！感謝您的訂閱
您將在一周內收到下一期的Kinsta新聞通訊。
訂閱Kinsta新聞通訊訂閱我同意條款和條件以及隱私政策
再往下看，您還可以手動推遲推遲添加或排除特定腳本，其中包括一個很好的用戶友好功能，可讓您定位網站上活動的特定主題或插件：
非同步JavaScript包含/排除規則
2.使用WP Rocket插件
雖然我們在Kinsta上不允許大多數緩存插件，但在WP Rocket插件中卻允許使用，因為它包含一個內置集成，可以與Kinsta的伺服器級緩存很好地配合使用。
除了一系列其他性能優化技術之外，WP Rocket還可以幫助您推遲WP Rocket儀錶板的「文件優化」選項卡中的JavaScript解析。在「 JavaScript文件」部分中查找「載入JavaScript延遲」選項。
像Async JavaScript插件一樣，WP Rocket還可讓您排除jQuery以避免網站內容出現問題：
如何使用WP Rocket推遲JavaScript的解析
3.使用Varvy的推薦方法（代碼）
之前，我們提到過Varvy的Patrick Sexton建議使用代碼段，等待您的網站完成其初始頁面載入後，再下載並執行JavaScript。
您可以通過調整Varvy提供的代碼片段，然後在結束之前立即將腳本添加到主題中來實現此方法。