您是否通過效能測試工具執行您的WordPress網站，卻遇到了延遲在WordPress中解析JavaScript的指令？
實施此更改可以對您網站的頁面載入時間產生積極影響，尤其是對於移動訪問者。但是警告可能有點難以理解，這就是為什麼我們要準確解釋延遲解析JavaScript的含義以及如何在WordPress網站上實現此更改。
以下是您將在本文中學到的內容：
- 在WordPress中延遲解析JavaScript意味著什麼？
- 如何判斷是否需要延遲解析JavaScript
- 延遲解析JavaScript的不同方法
- 如何在WordPress中延遲JavaScript解析（4種方法）
如果您只想直接跳到教程，可以單擊上面列表中的最後一個連結。
在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的解析。首先，您可以將兩個屬性新增到指令碼中：
- Async
- Defer
這兩個屬性都允許訪問者的瀏覽器在不暫停HTML解析的情況下下載JavaScript。但是，不同之處在於，雖然async不會暫停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安裝並啟用免費外掛。然後，轉到設定 → Async JavaScript以配置外掛。
在頂部，您可以啟用外掛的功能並在非同步和延遲之間進行選擇。記住：
- Async下載JavaScript，同時仍解析HTML ，但隨後暫停HTML解析以執行 JavaScript。
- Defer在仍然解析HTML的同時下載JavaScript並等待執行它，直到HTML解析完成。
如何使用非同步JavaScript外掛
再往下，你還可以選擇如何處理jQuery。許多主題和外掛嚴重依賴jQuery，因此如果您嘗試推遲解析jQuery指令碼，您可能會破壞您網站的一些核心功能。最安全的方法是排除jQuery，但您可以嘗試推遲它。只要確保徹底測試您的網站。
再往下，您還可以手動包含或排除特定的指令碼被延遲，包括一個很好的使用者友好功能，讓您可以定位在您的網站上活躍的特定主題或外掛：
非同步JavaScript包含/排除規則
2.使用WP Rocket外掛
除了一堆其他效能優化技術外，WP Rocket還可以幫助您在WP Rocket儀表盤的“File Optimization”選項卡中延遲JavaScript的解析。在JavaScript Files部分中查詢Load JavaScript deferred選項。
與Async JavaScript外掛一樣，WP Rocket還允許您排除jQuery以避免網站內容出現問題：
如何使用WP Rocket延遲解析JavaScript
3. 使用Varvy推薦的方法（程式碼）
早些時候，我們提到Varvy的Patrick Sexton建議使用一個程式碼片段，該程式碼片段會等待下載和執行JavaScript，直到您的網站完成初始頁面載入。
您可以通過調整Varvy提供的程式碼片段，然後將指令碼新增到您的主題中，緊接在結束</body>標記之前來實現此方法。
這是來自Varvy的程式碼：
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
確保將“defer.js”替換為您要延遲的JavaScript檔案的實際檔名/路徑。然後，您可以使用wp_footer鉤子通過子主題的functions.php檔案注入程式碼。
使用這種方法，您可以將Varvy的程式碼包裝成這樣：
/**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}
4.通過functions.php檔案延遲JavaScript
最後，您還可以通過將以下程式碼片段新增到您的functions.php檔案中，將defer屬性新增到您的JavaScript檔案中，而無需外掛：
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );
本質上，這個片段告訴WordPress將defer屬性新增到除jQuery之外的所有JavaScript檔案。
它既快速又簡單，但它並沒有像Async JavaScript外掛提供的那樣為您提供細粒度的控制。
小結
推遲WordPress網站上的JavaScript解析是一個重要的效能考慮因素。
一旦您使用上述方法之一來延遲WordPress中的JavaScript解析，我們建議您做兩件事：
- 測試您的網站以確保推遲某些指令碼不會破壞首屏內容的關鍵。同樣，這通常發生在jQuery中，這就是為什麼很多工具允許您排除jQuery.js。但是，它也可能發生在其他指令碼中。
- 再次通過GTmetrix執行您的站點，以確保您的站點延遲了儘可能多的指令碼（如果排除jQuery，您可能無法獲得完美的分數——但您的分數應該會更好）。
評論留言