如何在 WordPress 中延遲解析 JavaScript

已發表: 2022-12-02

JavaScript 是世界上最流行的編程語言之一。 大多數網站使用它來為訪問者創造更多動態體驗。 聯繫表單和站點分析等關鍵功能只是 JavaScript 日常實踐的幾種方式。 不幸的是，雖然它非常有用，但所有這些代碼都有可能減慢您的網站速度。

延遲解析 JavaScript（也稱為“延遲 JavaScript”）意味著告訴您的網站最後加載您的非必要 JavaScript 代碼。 這個簡單的調整可以改善您的頁面加載時間和整體性能，具體取決於您網站使用的腳本數量。

在本文中，我們將詳細分析什麼是解析以及延遲涉及什麼。 我們還將討論延遲 JavaScript 如何使您的網站受益，並向您展示如何去做。 最後，我們將總結一些常見問題 (FAQ) 來解決任何遺留的疑問。

“延遲解析 JavaScript”是什麼意思？

當您訪問網站時，您的瀏覽器會從服務器請求文件。 這些文件包含 HTML、CSS 和 JavaScript，供瀏覽器解析（解釋）以創建可視化和交互式網頁。

網站通常需要您的瀏覽器為單個頁面加載數十個（甚至數百個）元素和文件。 這是 Google 頁面之一的簡單示例，因此您可以看到它使用了多少文件：

Google Developer Tools 網絡選項卡中來自 Google 的文件列表

當您的瀏覽器解析 HTML 文件時，它會停止呈現它找到的任何 CSS 並停止執行 JavaScript 代碼。 在瀏覽器完成執行該代碼之前，它不會繼續加載頁面的其餘部分。

實際上，如果您的網站優化得非常好（如果加載速度非常快），您可能不會注意到這種延遲。 但是延遲是存在的，而且您的網站使用的 JavaScript 越多，延遲時間就越長。 如果您的網站未針對性能進行優化，則解析 JavaScript 會顯著減慢其加載時間。

延遲 JavaScript 的解析意味著告訴您的瀏覽器，“嘿，如果您遇到此 JavaScript 代碼，請在完成頁面的其餘部分之前不要解析它。” 從訪問者的角度來看，這意味著頁面的可見元素將加載得更快。 然後，JavaScript 將在後台完成執行，沒有人會更聰明（除了你和瀏覽器）。

延遲 JavaScript 有什麼好處？

延遲 JavaScript 的主要好處是頁面將為訪問者加載得更快。 腳本仍需要在後台加載，但推遲它們應該會提高您的 Largest Contentful Paint (LCP) 分數，這是三個 Core Web Vital 指標之一。

請務必記住，頁面加載時間是出色用戶體驗的最重要方面之一。 如果網站加載時間過長，您通常會失去一定比例的訪問者。 此外，緩慢的加載時間會給人一種網站有問題的印象。

如何在 WordPress 中延遲解析 JavaScript

WordPress 提供了不止一種優化網站的方法。 在延遲 JavaScript 時，您可以使用兩種方法。

第一種方法是最簡單的，因為它涉及使用插件。

1. 使用免費插件延遲 JavaScript 解析

如果您不習慣編輯網站文件並向其添加代碼，最好的辦法是使用插件。 Jetpack Boost 是您可以用來在 WordPress 中推遲非必要 JavaScript 的最佳工具之一。

Jetpack Boost 主頁設計

Jetpack Boost 是一款免費插件，可用於優化 WordPress 網站的性能。 它的配置非常簡單，是初學者的絕佳選擇。

激活插件後，您需要連接到 WordPress.com 帳戶（您可以使用免費帳戶）。

準備就緒後，轉到 WordPress 儀表板中的Jetpack → Boost ，您將快速了解您的網站在性能方面的表現。

Jetpack Boost 的速度測試

如果您查看下面的選項，您會看到一個顯示Defer Non-Essential JavaScript的設置。 您可以切換此設置，它會自動延遲整個網站的 JavaScript 解析。

延遲非必要 JavaScript 的選項

該插件指定了非必要的 JavaScript，因為它只影響對網站不重要的腳本。

啟用此設置後，請務必查看您的網站以確保一切正常。 如果您發現任何意外情況，只需禁用該功能即可。

請注意，Jetpack Boost 還可以啟用延遲加載並優化您網站的 CSS。 這意味著插件會將關鍵 CSS 移動到每個 HTML 文檔的開頭，以便瀏覽器首先解析它。 此設置對於提高首次輸入延遲 (FID) 分數特別重要。

2. 使用 functions.php 延遲解析 JavaScript 文件

第二種方法涉及編輯主題的functions.php文件。 這個過程並不過分複雜，但向 WordPress 添加代碼有時會導致意想不到的副作用。

此方法適用於有經驗的用戶，因為僅刪除一個文件甚至不小心在錯誤的位置添加空格都可能發生很多情況。 請記住，您只想推遲非必要的JavaScript，以避免損害用戶體驗。

為了安全起見，我們建議在編輯任何 WordPress 文件之前完全備份您的網站。 即使您有最近的備份，也請創建另一個備份，以便在進行任何更改之前有一個還原點。 如果您有 Jetpack VaultPress Backup，則您網站的最新版本已經為您保存。

有兩種方法可以編輯functions.php文件。 您可以使用 WordPress主題文件編輯器，您可以從外觀菜單訪問它。 請記住，此選項僅在您未使用支持全站點編輯 (FSE) 的塊主題時可用。

訪問編輯器後，從右側的下拉菜單中選擇活動主題，然後在列表中查找functions.php文件。

編輯 WordPress 的主題區域

您可以使用編輯器在任何主題文件中添加或刪除代碼。 不過，我們建議不要修改任何現有代碼，除非您了解其用途。

將代碼添加到functions.php應該是安全的，只要它來自受信任的源。 以下代碼片段將配置您的網站以延遲解析 JavaScript：

 function defer_js( $url ) {    if ( is_user_logged_in() ) return $url;     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_js', 11 );

此代碼將自動延遲您網站上的所有 JavaScript，但不會觸及 jQuery 腳本。 但是，如果您已登錄以避免儀表板無法正確加載的問題，它將不起作用。

將該腳本添加到functions.php文件的末尾，這樣它就不會干擾其中的任何其他代碼。 單擊頁面底部的更新文件，就是這樣！

如果您無法訪問 WordPress 主題文件編輯器，但可以在服務器上使用代碼，則可以通過文件傳輸協議 (FTP) 連接到您的網站來編輯functions.php 。 您需要使用像 FileZilla 這樣的 FTP 客戶端來執行此操作。 請記住，請確保在執行任何操作之前進行完整的站點備份。

連接到網站服務器後，您需要找到 WordPress根文件夾。 這是包含您站點的所有文件的文件夾。 它通常命名為www、public_html或您網站的名稱。

打開該文件夾並轉到wp-content/themes 。 應該有幾個文件夾，一個用於您站點上安裝的每個主題。 確定您的活動主題的文件夾並打開它。 functions.php文件應該就在裡面。

在 WordPress 中找到 functions.php 文件

右鍵單擊該文件並查找類似“編輯”的選項（這取決於您使用的 FTP 客戶端）。 該選項將使用您的默認文本編輯器打開文件。 從這裡，您可以添加我們之前共享的代碼片段，然後將更改保存到文件中。

當通過 FTP 編輯 WordPress 文件時，同樣的規則適用。 如果您不確定代碼的作用，請不要編輯任何代碼，除非您信任代碼片段的來源，否則請謹慎添加代碼片段。

如果您在編輯functions.php文件後遇到錯誤，您始終可以使用最近的備份恢復您的 WordPress 站點。 在這些情況下，Jetpack VaultPress Backup 是一個極好的選擇，因為它提供一鍵式恢復功能，即使您的站點完全關閉也是如此。

有關延遲 JavaScript 的常見問題

如果您仍然對延遲 JavaScript 的工作原理有任何疑問，本節將為您解答。 讓我們從討論延遲腳本的潛在副作用開始。

延遲 JavaScript 會破壞您的網站嗎？

是的，根據您使用的插件和主題，延遲 JavaScript 可能會破壞您網站的某些元素。 而且，如果您使用的是手動方法，則代碼中的錯誤可能會使您的網站完全崩潰。

這就是為什麼使用 Jetpack Boost 之類的工具來處理此任務最安全的原因。 雖然延遲 JavaScript 仍有可能導致問題，但您可以輕鬆地完全停用該功能或插件。

延遲解析 JavaScript 是否等同於“移除阻塞渲染的 JavaScript”？

如果您使用網站性能測量服務，如 PageSpeed Insights 或 GTMetrix，您可能會注意到他們還建議從您的網站中消除渲染阻塞 JavaScript。 由於語言原因，很容易將此優化建議與延遲解析 JavaScript 混淆。

呈現阻止 JavaScript 是指任何阻止您的網站呈現的代碼。 在許多情況下，最好的解決方案是在代碼不滿足特定目的時將其刪除。 如果它有一個功能，你可以改為推遲它。

確定需要哪些腳本和不需要哪些腳本取決於您的判斷。 但是像 GTMetrix 這樣的服務可以幫助您識別網站上未使用的 JavaScript。

站點上未使用的 JavaScript 文件列表

屬於此類別的任何腳本都應該可以安全刪除。 對於其他腳本，您可以使用插件（如 Jetpack Boost）或手動修改functions.php文件以延遲它們。

我可以安全地刪除 JavaScript 而不是延遲它嗎？

這取決於您所指的腳本。 WordPress 網站在發展過程中積累未使用的代碼的情況並不少見。 當您安裝和停用插件、試用第三方服務並停止使用它們時，就會發生這種情況。

將“孤立的”JavaScript 留在您的網站上有時會產生安全風險。 此外，它會影響您網站的性能，因為瀏覽器可能仍需要對其進行解析。

如果您查看上一個問題，我們將向您展示如何使用 GTMetrix 來識別您網站上可以安全刪除的 JavaScript。

延遲 JavaScript 會提高頁面性能嗎？

延遲 JavaScript 應該會使您網站的頁面加載速度更快。 速度有多快取決於您推遲的腳本數量以及您網站的優化程度。

如果您已經擁有一個快速的網站，並且已經採取措施對其進行優化，例如刪除未使用的腳本，那麼延遲 JavaScript 可能不會產生重大影響。 儘管如此，在頁面性能方面，每一點優化都很重要。

我還能做些什麼來提高我的頁面加載速度？

有很多方法可以提高網站的頁面加載速度。 為了獲得最大的影響，以下是我們建議實施的優化：

  1. 考慮使用託管 WordPress 託管服務提供商。
  2. 實施內容分發網絡 (CDN)。
  3. 改進 WordPress 中的 Core Web Vitals。
  4. 縮小 CSS。
  5. 在 WordPress 中啟用延遲加載。

優化您的網站以提高性能可能需要一段時間，但是 Jetpack 和 Jetpack Boost 等 WordPress 插件可以讓這個過程變得更加簡單和快捷。

請記住，隨著時間的推移，您為提高頁面加載速度所做的任何努力都會得到回報。 如果您可以讓您的網站保持最佳狀態，您的訪問者將獲得更好的體驗。

今天提高您網站的性能

您可以對網站進行很多更改以提高其性能。 如果您在網站上使用多個第三方腳本和插件，後台可能會運行大量 JavaScript 代碼。 該代碼很重要，但它可能會阻止您網站的其餘部分盡快加載。

在 WordPress 中延遲解析 JavaScript 比您想像的要容易，並且會顯著影響您網站的性能。 以下是延遲 JavaScript 解析的方法：

  1. 使用像 Jetpack Boost 這樣的插件。
  2. 使用functions.php文件延遲 JavaScript。

Jetpack 提供了多個插件來提高您的 WordPress 網站的性能。 Jetpack Boost 只是其中之一。 如果您使用 Jetpack 插件，您還可以訪問免費的 CDN，它可以顯著提高您網站的加載速度。 考慮從今天開始使用 Jetpack！