延遲解析 WordPress 中的 Javascript [使用延遲和異步]

快速加載的 WordPress 網站在增強訪問者的用戶體驗、提高網站在搜索引擎上的可見度以及增加網站的自然流量方面具有重大優勢。

網頁包含 HTML、CSS、Javascript 和圖像，為了減少頁面加載時間，每一個都必須進行優化。 圖像對頁面大小的影響最大，因此使用 WordPress 圖像優化插件減小圖像文件大小非常重要。

為了進一步提高頁面性能，您可以在 WordPress 中延遲解析 javascript ，這意味著您可以建議瀏覽器在加載 Javascript 之前加載頁面內容和圖像。 採取這種措施意味著 Javascript 元素（如表單和滑塊）可能需要額外幾秒鐘才能加載，但這是一個很小的代價，因為頁面加載時間已顯著縮短。

稍後可以使用稱為Defer和Async 的兩種技術來執行 Javascript 代碼。 流行的 WordPress 緩存插件支持這兩種方法，儘管專用解決方案可以讓您更好地控制稍後加載哪些 Javascript 文件。

在本文中，我將解釋延遲加載 Javascript 文件的好處，並向您展示五個有用的 WordPress 插件 將為您簡化流程。

我鼓勵您閱讀整篇文章以全面了解該主題，但如果您是初學者，您應該從本文中學到的一件事是Defer和Async可以顯著改善您網站的頁面加載時間。

在 WordPress 中延遲 Javascript 解析的不同方法（使用延遲和異步）

Javascript 已成為 WordPress 網站的重要組成部分，用於顯示按鈕、表單、媒體庫、音頻、視頻、倒數計時器、社交媒體時間線等。

不幸的是，Javascript 也是網頁加載緩慢的主要原因之一，因為瀏覽器必須停止、下載和執行每個腳本，然後才能繼續解析頁面的 HTML 標記。

解析是瀏覽器分析頁面代碼並將其轉換為它可以執行的格式的過程。 任何停止此過程的代碼都稱為“渲染阻塞”，因為它會延遲為訪問者呈現頁面的過程。

呈現阻塞資源是 WordPress 網站加載緩慢的常見原因。 可以內聯顯示關鍵 CSS 以防止渲染阻塞，但最好稍後使用Defer或Async延遲 Javascript 加載以防止 Javascript 代碼阻塞頁面渲染。

刪除未使用的 Javascript 代碼並減少 Javascript 執行時間也是一種很好的做法。 一種方法是通過稱為Minification的過程減小大型 Javascript 文件的大小，該過程從每個 Javascript 文件中刪除空格和不必要的代碼。

Google PageSpeed Insights 和 GTmetrix 等網站基準測試服務考慮的最重要指標之一是 First Contentful Paint，這是向訪問者顯示第一個內容所花費的時間。 谷歌聲明 0 到 1.8 秒的 FCP 時間是好的，1.8 到 3 秒是中等的。 任何超過 3 秒的時間都被認為是慢的。

您所要做的就是將頁面的 URL 輸入網站基準測試服務，以查看阻止頁面呈現的 Javascript 和 CSS 文件。 正如您從下面的屏幕截圖中看到的那樣，阻止呈現的 CSS 和 Javascript 文件可能需要幾秒鐘才能下載，因此如果您可以消除這些資源，您的頁面加載速度將大大加快。

消除渲染阻塞 Javascript 文件的最有效方法是使用defer和async屬性。 當使用 SRC 屬性調用外部文件時，這些布爾屬性只能與腳本 HTML 元素一起使用。

 <script src="javascript.js"></script>

<script defer src="javascript.js"></script>

<script async src="javascript.js"></script>

當您將 defer 或 async 屬性添加到 HTML 腳本元素時，您是在建議瀏覽器在解析頁面的同時下載文件。 使用延遲，一旦頁面被完全解析，文件就會被執行。

相比之下，async 屬性是一種異步操作，它會在文件下載後立即執行。 因此，使用異步解析頁面的總時間會稍微長一些，因為瀏覽器會暫時停止解析 HTML 以執行文件。

如果您同時指定 defer 和 async，瀏覽器將使用 async。

一個需要理解的重要標準是文檔對像模型，它通常被稱為 DOM。 DOM 將整個文檔（例如 XML 文件或 HTML 頁面）表示為單個對象。 head、body 和 headers 等重要元素可以被視為 DOM 的分支。

如果一個 Javascript 文件不需要來自另一個文件或 DOM 本身的信息，那麼使用異步方法可能是值得的，因為頁面的重要元素將顯示得更快。 請注意，如果文件正在請求尚未加載的信息，異步可能會導致您的網站出錯。

如果 Javascript 文件確實需要信息，則延遲是首選選項，因為它確保在執行文件之前正確檢索所有內容。

defer 和 async 的目標是減少頁面渲染的阻塞，無論您使用哪種方法，您都會看到頁面加載時間的重大改進。

我推薦閱讀 Zell Liew 的文章“How and when to use Async and Defer attributes”以獲得關於何時使用 defer 和 async 的更全面的解釋。

如何使用 WordPress 插件延遲解析 Javascript

您網站上的大部分 Javascript 調用將來自您的 WordPress 主題和激活的 WordPress 插件，因此手動將 defer 和 async 屬性添加到腳本元素是不切實際的。

最好使用性能 WordPress 插件來延遲 WordPress 中 javascript 的解析，並簡化在整個網站上應用延遲或異步的過程。

請注意，錯誤的配置設置會導致您的網站設計出現問題。 例如，聯繫表格可能無法正確顯示，除非您選擇正確的配置設置或從優化中排除聯繫表格的文件。

因此，必須反複試驗才能為您的網站找到正確的配置設置和最佳性能。

• 網站備份– 在激活優化 WordPress 插件之前備份您的網站
• 測試性能– 測試網站關鍵頁面的性能以及每次更改優化配置設置時的性能
• 檢查您的網站– 檢查您的網站在更改配置後沒有任何部分損壞

如果您在延遲解析 javascript 時遇到任何重大問題，請恢復為插件的默認設置。 如果插件與您的網站不兼容，也可以將其卸載。

1.自動優化

Autoptimize 是一種多功能的 WordPress 優化解決方案，可讓您聚合和縮小 Javascript、CSS 和 HTML。 緩存優化的內容以提高性能。 此緩存很快就會變得太大，因此我鼓勵您使用 Autoclear Autoptimize Cache 來自動清除緩存。

儘管 Autoptimize 以文件聚合而聞名，但它也可用於延遲 Javascript 文件的解析，這樣它們就不會渲染阻塞。 Javascript 和 CSS 代碼也可以內聯顯示，並且還有針對圖像、Google 字體、表情符號等的其他優化選項。

2.異步JavaScript插件

由 Autoptimize 的創建者開發，異步 JavaScript 允許您在整個網站上應用異步和延遲到 Javascript 文件。 它使您可以完全控制每個 Javascript 文件，允許您排除 jQuery、特定的 Javascript 文件、WordPress 插件和 WordPress 主題。 如果願意，您可以準確指定要異步和延遲的 Javascript 文件。

Async Javascript 最酷的功能之一是設置嚮導，它在 GTmetrix 上運行性能測試，用於您網站的所有可能配置設置。 這是一個很好的節省時間的方法，因為結果會準確顯示您的網站在每種配置下的運行速度，但請務必每次都檢查您的網站，以確保您的網站沒有任何問題。

3.性能問題

Perfmatters 是一個高級 WordPress 性能工具箱，擁有許多獨特的性能功能。 該插件每年零售價為 24.95 美元，可讓您推遲解析網站上的 Javascript 文件（所有 JS 文件）。 jQuery 文件可以包含在延遲中，您也可以排除特定的 Javascript 文件。 它為您提供的另一個很酷的選項是 Javascript Delay，它只會在有用戶交互時加載 Javascript 文件。

Perfmatters 可用於禁用核心 WordPress 功能以提高安全性和性能。 它還允許您定義自定義登錄 URL、預加載內容、延遲加載圖像、集成 Google Analytics、優化 Google 字體等。

我最喜歡的功能是腳本管理器，因為它允許您為網站上的每個頁面啟用和禁用 Javascript 和 CSS 文件。 這將大大減少頁面的大小，因為 WordPress 開發人員有在整個網站加載 Javascript 和 CSS 文件的壞習慣，即使它們只在幾個頁面上是必需的。

4.資產清理

Asset CleanUp 是一個功能豐富的優化 WordPress 插件，可讓您縮小、合併和延遲解析 Javascript 和 CSS 文件。 它的 CSS 和 JS 管理器的工作方式與 Perfmatter 的腳本管理器類似，允許您指定文件是否加載到特定頁面。 您還可以禁用核心 WordPress 設置、清理 HTML 代碼、優化 Google 字體等。

Asset CleanUp Pro 的單個許可證零售價為每年 42.36 歐元。 升級允許您將代碼置於內聯中，並在逐頁的基礎上為 Javascript 文件指定異步和延遲。 它還可以解鎖插件管理器，讓您更好地控制資產在您的網站上的加載方式。

5. HTTP/2 推送預加載

HTTP/2 推送預加載允許您使用排隊加載功能在支持 HTTP2 的服務器上推送和預加載 Javascript 和 CSS 文件。 這可以應用於所有文件，或者您可以選擇單獨配置每個資源。 資源類型包括腳本、樣式、音頻、嵌入、提取、字體、圖像、對象和視頻。

當您輸入 Javascript 文件的 URL 時，您可以選擇異步、延遲或刪除。 HTTP/2 推送預加載允許您定義有關何時應用此設置的規則。 您可以為所有頁面、移動設備或台式機、特定帖子和頁面、類別、搜索頁面、WooCommerce 頁面等的資源定義 Javascript 規則。

最後的想法

Javascript 仍然是向網站添加動態內容和交互元素的首選方法。 由於許多 WordPress 主題和插件使用 Javascript，因此在 WordPress 中延遲解析 javascript並使用 defer 和 async 來確保頁面快速呈現並減少頁面呈現的阻塞是很重要的。

您會在許多 WordPress 插件中找到應用延遲和異步的功能，儘管我在本文中引用的解決方案可以讓您更好地控制 Javascript 文件。

在我自己的網站上，我使用 Autoptimize 進行文件聚合，使用 Async JavaScript 進行 Javascript 延遲。 我對 Async Javascript 很滿意，儘管 HTTP/2 推送預加載對於許多網站所有者來說可能是更好的選擇，因為它可以讓您更好地控制應用優化設置的位置。

Asset CleanUp 和 Perfmatters 提供相似的特性和功能，因此我不建議同時使用它們。 Asset CleanUp Pro 無疑提供了更好的控制和更高級的功能，儘管我繼續在我自己的網站上使用 Perfmatters 來清理 WordPress，因為它更容易使用。 這兩種解決方案都將增強任何 WordPress 優化設置，即使您使用不同的 WordPress 插件來延遲解析 javascript 以減少頁面呈現的阻塞。

我鼓勵您測試所有這些 WordPress 插件以延遲 javascript 解析並執行多項測試以確保您擁有最佳配置。

祝你好運。

凱文