如何在 WordPress 中延遲 JavaScript 的解析

已發表: 2021-07-22

在 WordPress 中延遲 JavaScript 的解析

您的網站加載時間是否過長？ 無論您使用的是 WordPress 網站還是其他網站，高加載時間都是一個需要盡快解決的關鍵問題。

那麼，你是不是也一樣流浪呢？ 好吧，如果您親自檢查您的網站，那麼您可能會收到消息“延遲在 WordPress 中解析 JavaScript”。 這似乎很複雜，有時無法理解，因為您不精通技術。

如果您遵循該消息，您將看到頁面加載速度的提升，並在提高網站的轉化率和收入方面發揮重要作用。

現在的問題是 WordPress 中延遲解析 JavaScript 是什麼意思？

因此，這是一個快速而簡短的答案。 WordPress 中 JavaScript 的延遲解析允許瀏覽器先加載網站內容而無需閱讀腳本以完成下載並提高加載時間。

這個簡單的過程很重要，因為瀏覽器會在加載網站內容之前從服務器渲染和下載 JavaScript。 這自然會妨礙網站的速度併中斷加載時間。

但是在 WordPress 中延遲解析 JavaScript 是解決問題的關鍵，您無需等待幾分鐘即可享受網站性能。

這篇文章將分享五種經過驗證的延遲 JavaScript 的技術。 但在著手解決方案之前，必須了解此彈出消息的實際含義。

所以，事不宜遲，讓我們開始吧！

在 WordPress 中延遲解析 JavaScript 是什麼意思？

你知道瀏覽器是如何渲染網頁的嗎？ 如果不是，則必須首先了解這一點。

當您的瀏覽器收到用戶的請求時，它會將請求發送到網絡服務器，然後頁面開始以 HTML 格式下載。 此 HTML 文檔包含呈現 DOM 元素和不同資源（如圖像、腳本和样式表）的文本和代碼。

但是，瀏覽器會按順序下載資源。 但是頁面的渲染會再次恢復所有進程，並對加載時間產生不利影響。 即使這有時會阻礙進程並顯示消息-無法下載頁面或顯示服務器錯誤。

每當瀏覽器通過代碼渲染網站或頁面時，如果在那裡找到 JavaScript，它就會停止渲染。 這個過程會停止，直到它無法獲取和解析腳本。 此外，它會對您網站的速度產生負面影響。

但是在 WordPress 中延遲解析 JavaScript 的幫助下，有助於通知瀏覽器下載您網站的頁面或主要內容並提供快速加載。 此時，用戶可以找到該網站。

為什麼需要在 WordPress 中延遲解析 JavaScript？

如果您的網站加載時間過長，則應不擇手段地提高其性能。 如果您不了解網站性能，請使用 GT Metrix、Google Pagespeed 洞察力或 WPEngine 等最佳工具在現場運行測試。

這些是速度工具測試，通常會在您分析網站時建議並為您提供延遲解析 JavaScript。 例如，讓我們嘗試使用 GT Metrix。

在 GTMetrix 中，您會在每個頁面上找到您網站的等級以及需要盡快改進的特定腳本。 要使用這個工具，可以輸入網站的 URL 並等待幾分鐘，這樣它就可以獲取整個數據。

一旦完成提前到頁面速度選項卡並提高加載速度並擴展 JavaScript 的延遲解析部分。

在這裡，您將找到在渲染過程中加載的加載腳本列表。 所以仔細閱讀所有內容。

異步 VS 延遲屬性

這對於確保下載腳本不會與網頁呈現交互非常重要。 因此，執行此操作的兩種方法是異步和延遲。

如果要從 Async 開始，則必須添加以下腳本標記。

有了這個，您的瀏覽器會收到一個更新，即瀏覽器應該異步加載腳本。 準確地說，瀏覽器在遇到代碼時會立即下載其資源，但它會在資源仍在下載時解析 HTML。
而另一方面，您可以選擇第二種方法 Defer 屬性。 因此，添加給定的腳本。

使用此標籤，您將告訴您的瀏覽器在完成網頁解析之前不要下載資源。 該過程完成後，它會下載之前偶然發現的延遲腳本。

當兩個資源都被下載時，您將要檢查的主要區別。 為了更好地使用兩者，應檢查 Web 應用程序。

如果您的 Web 應用程序很緊湊，則應該選擇延遲，而如果您的腳本很少，則異步是最好的。 好吧，您不會發現兩者有任何區別，但事實是 defer 適用於大文件，而 Async 適用於小文件。

為了更好地了解 Async 和 defer 之間的區別，我們分享了一個示例。 繼續閱讀。

假設您有兩個 java 腳本 JS1 和 JS2。 並且有一個條件是JS2出現在JS1之後的代碼中，也就是說JS2依賴於JS1，但是又比JS2大。

如果您使用的是 Async，則 JS2 有可能在 JS1 之前完成下載。 這可能會導致錯誤，因為 JS2 在沒有 JS1 的情況下執行

如果您使用 defer JS1 和 JS2 腳本下載成功並且不會導致錯誤。

因此 defer 最好是加載腳本並提高網站速度或加載時間。

需要延遲解析 JavaScript 的原因

正如我們之前所說，如果你想在谷歌的第一頁上排名，那麼網頁加載速度應該很快。 大約，一個頁面應該在 2-3 秒內加載。 不幸的是，JavaScript 會渲染頁面的質量，並且會損失大量流量。

延遲頁面加載會以多種方式影響您的網站。 幸運的是，延遲解析 JavaScript 可以幫助您解決這個問題。 查看並檢查它可以幫助您的原因。

  • 提高搜索排名

每當 Google 評估您網站的搜索排名表現時，Google 檢查的最重要因素是網站的加載時間。 如果您的網站加載速度更快，它自然會出現在搜索結果的第一頁。

根據研究，我們發現當 2 人中有 1 人等待網站加載時，他們會轉到第二個來源。 此外，Google 只會偏愛那些不會給讀者帶來麻煩並為他們提供最佳用戶體驗的網站。

如果您的網站加載時間超過 4 秒，則會對您的網站性能產生負面影響。 因此，使用 JavaScript 很重要。 而延遲只是將網站速度從正常提升到超級的明智方法。

為了獲得最佳結果，應該遵循 SEO 技術來提升您的內容並優化頁面速度。

  • 提升轉化率

如果您想提高轉化率，您的網站需要推遲的另一個最大原因。 如果網站加載緩慢，您的客戶可能會反彈到其他來源，您將失去流量和銷售量。

用戶很著急，他們經常喜歡關注向他們顯示快速信息的網站。 如果網站運行緩慢，這會讓他們感到沮喪，他們可能不會再次訪問您的頁面。 您正在處理哪個網站或博客並不重要。

您的工作是為您的用戶提供最好的服務。 Hubspot 的研究表明，網站加載時間通常會降低 7% 的轉化率。 借助 WordPress 中的延遲解析 JavaScript 技術，可以更快地提高您網站的速度，從而進一步提高轉化率。

  • 贈品最佳用戶體驗

我們認為您不需要解釋這個原因。 如果您的網站速度很好並且用戶喜歡您網站上的內容，這是很自然的，您可以期望您的訪問者對該網站感到滿意。

如果您的網站加載時間比平時多，用戶就會放棄您的網站，從而提高跳出率。

借助 WordPress 中 JavaScript 的延遲解析，您可以更新 Java 文件，從而輕鬆幫助您快速加載主要網站內容。 這種快速加載方案可幫助您加快網站速度，從而增強用戶體驗。

在 WordPress 中延遲解析 JavaScript 的五種不同方法

現在我們來到了本文的主要部分。 在這裡，您將學習五種出色的技術，幫助您加快網站速度，提供最佳用戶體驗，並為您提供排名第一的途徑。

所以，讓我們知道方法。

為了推遲 JavaScript 的解析，你可以選擇的三個重要的路由是 plugin、varvy 方法和 functions.php 文件。 通過這些路線，您可以應用五種給定的方法。

方法 1- 使用免費的異步 JavaScript 插件

在 WordPress 中，Async JavaScript 是一個免費插件，有助於消除加載內容時的渲染阻塞 JavaScript。

使用此插件，您可以享受對 java 腳本的完全控制，異步或延遲可以輕鬆地提高站點速度並增強其在搜索頁面中的性能。 但是，在選擇 Async 和 defer 時，您需要遵循一些建議。

  • Async 可以在解析 HTML 文件時下載 JavaScript，然後暫停 HTML 解析以執行 JavaScript 文件。
  • Defer 可以在解析 HTML 文件的同時下載 JavaScript 文件，但在 HTML 解析完成後等待執行文件。

現在讓我們轉到使用異步插件在 WordPress 中延遲解析 JavaScript 的分步指南。

  1. 打開 WordPress 儀表板並跳轉到插件選項卡。
  2. 在插件選項卡中單擊添加新按鈕並蒐索 Async JavaScript 插件。
  3. 當你找到插件點擊安裝按鈕並激活它。
  4. 因此，安裝完成後，請轉到設置並進行所需的更改。
  5. 勾選啟用 Async JavaScript 選項並選擇 defer as Async JavaScript。
  6. 對於高級功能，勾選並從您要應用的腳本中選擇 - 異步和延遲標籤。
  7. 您可以在此處選擇要包含和排除的腳本。 此外，您還可以選擇要從 Async JavaScript Plugin 所做的任何更改中排除的插件和主題。
  8. 更改完成後，保存更改

方法二：使用 WP Rocket 插件

如果您之前沒有聽說過 WP 火箭插件，那麼現在就來了解一下。 WP Rocket 是最流行的插件之一，可以幫助您的網站在幾秒鐘內快速加載。

此外，使用此插件，您可以接收頁面緩存、緩存預加載、壓縮和許多其他很酷的功能。

另一方面，該插件還可以幫助您在文件優化選項卡中延遲 JavaScript 的解析。

這是安裝和使用插件的方法。

  1. 打開 WordPress 儀表板並重定向到插件選項卡
  2. 現在單擊添加新按鈕並蒐索 WP Rocket 插件。
  3. 點擊安裝並激活插件。
  4. 然後轉到設置並從菜單中打開文件優化以開始使用。
  5. 現在向下滾動 JavaScript 文件並勾選加載 JavaScript 延遲選項並為 Query 啟用安全模式。
  6. 整個過程完成後，轉到頁面末尾並單擊保存更改選項。

方法3：使用W3 Total Cache Plugin

W3 Total Cache 是另一個可用於延遲 WordPress 中 JavaScript 解析的最佳插件。 這個 WordPress 插件對於增強您網站的用戶體驗和 SEO 非常有用。 此外，它通過利用 CDN（內容交付集成）提高了網站的性能並減少了加載時間。

W3 總緩存非常有效且使用安全。 另外，您可以使用此插件來延遲 WordPress 中的 JavaScript 解析。 這是使用此插件的方法。

  • 首先訪問 WordPress 儀表板並跳轉到插件頁面。
  • 然後在前面添加一個新按鈕並蒐索插件 W3 總緩存插件。
  • 找到插件後，單擊安裝並激活按鈕。
  • 現在插件已安裝。 從 WordPress 轉到性能和常規設置。
  • 然後向下滾動儀表板並跳轉到縮小部分並勾選啟用選項。
  • 此外，您可以從縮小模式檢查手動選項，然後單擊保存選項繼續。

縮小代碼
前往性能選項卡並從左側邊欄中選擇縮小選項卡並向下滾動到 JS 標題，在那裡您可以使用兩個 HTML 標籤搜​​索操作和區域部分。

縮小設置選項
使用 defer 選項選擇非阻塞並嵌入之前的代碼類型標籤。

JS 縮小設置

  • 在設置中，您可以看到 JS 文件管理，您必須在其中選擇 WordPress 主題。
  • 然後單擊添加腳本選項以包含要解析的 JavaScript 的 URL。
  • 您可以通過點擊添加腳本按鈕添加任意數量的 URL。
  • 更改完成後單擊保存設置按鈕和純緩存按鈕繼續。
  • 完成後，向下滾動 CSS 部分。
  • 現在單擊添加樣式表按鈕。
  • 然後在 CSS 文件管理中插入樣式表 URL。
  • 您可以根據監控工具提供給您的建議添加多個。
  • 現在，您已經完成了更改，所以保存設置和純緩存按鈕。

方法 4：使用 Vary 推薦的方法

您可以在 WordPress 中選擇延遲解析 JavaScript 的另一種最佳方法是選擇 Vary，它使用腳本在初始頁面加載後調用外部 JavaScript 文件。

這意味著瀏覽器在未加載網頁之前不會下載或執行 JavaScript。 然而，這種方法是由 Patrick Sexton 提出的。

要使用此方法，您可以調整 varvy 提供的代碼片段，然後將其添加到主體部分下的主題編輯器中。

因此，您可以在主題的主體部分中添加以下代碼，以延遲 WordPress 中的 JavaScript 解析。

<腳本類型=“文本/javascript”>
函數下載SAtOnload() {
var element = document.createElement (“腳本”);
element.src = “延遲 .js” ; document.body.appendChild（元素）；
}
如果
(window.addEventListener) window.addEventListener (“load”,
下載JSAtOnload，假）；
否則如果
(window.attachEvent)
Window.attachEvent(“onload”, 下載JSAtonlaod;
</腳本>

執行此操作時，請確保您已將 defer.Js 更改為外部 JavaScript 文件的名稱。 然後使用 Wp_footer 通過子主題的 functions.php 文件注入代碼。

這是您必須使用的代碼。

/**
使用 Varvy 的代碼片段延遲解析 JavaScript
*/
Add_action ('wp_footer' , 'my_footer_scripts');
功能
我的_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}

現在，我們正在繼續我們的分步指南，以獲得清晰的感覺。

  1. 轉到您的 WordPress 儀表板，然後顯示主題編輯器。
  2. 導航 header.php 文件，然後在正文部分之前和之前粘貼上述代碼。
  3. 然後單擊更新文件選項。

方法 5- 使用 functions.php 文件

如果您忘記了，那麼讓我們提醒您，您不能通過 HTML 將腳本直接添加到 WordPress。 相反，您必須使用內置的 WordPress 功能來請求資源並備份您的網站。

您應該通過將代碼片段添加到您的 functions.php 文件來使用 JavaScript 文件的 defer 屬性。

要完成該過程，請打開主題編輯器並轉到 functions.php 文件以添加給定的代碼。

功能
Defer_parsing_of_js ( $url ) {
如果 （
用戶_is_logged_in())
返回 $url; //不要破壞 WP 管理員
如果（假===
Strops( $url, '.js' ) )
返回 $url;
if ( strops ($url, 'jquery.js' ) ) return $url;
return str_replace('src', 'defer src', $url);
}

添加過濾器（
'script_loader_tag',
'defer_parsing_of_js' , 10
);

此代碼幫助 WordPress 將 defer 屬性添加到除 JQuery 之外的 JavaScript 文件。

這是您可以用來通過 functions.php 文件將延遲屬性與 JavaScript 文件同步的代碼。

add_filter('腳本_loader_tag',
'add_defer_tags_to_scripts'）；
 
功能
add_defer_tags_to_scripts ($tyag) {
#list 腳本添加到 $scripts_to_defer = array ('script_a', script_b');
$scripts_to_async = array ('script_c', 'script_d');
#將延遲標籤添加到scripts_to_defer數組
Foreach ( $scripts_to_defer 作為 $current_script) {
如果 (true == strops ($tag,
$current_script) )
回屯
str_replace('src,'defer="defer" src','$tag);
}
#將異步標籤添加到scripts_to_async數組
Foreach ( $scripts_to_async 作為 $current_script) {
如果 (true == strops ($tag,
$current_script) )
返回
str_replace('src,'defer="
異步=”異步”src', $tag);

}
返回$標籤；
)

不要忘記您必須將每個代碼排入隊列，因此必須添加以下代碼。

add_action ('wp_enqueue_scripts',
'enqueue_custom_js');
功能
enqueue_custom_js(){
wp_enqueue_script('script_a',
Get_stylesheet_directory_uri (), '/script_a.js') ;
wp_enqueue_script('script_b',
Get_stylesheet_directory_uri (), '/script_b.js') ;
wp_enqueue_script('script_c',
Get_stylesheet_directory_uri (), '/script_\c.js') ;
wp_enqueue_script('script_ds',
Get_stylesheet_directory_uri (), '/script_d.js') ;
}

當您更新了 functions.php 文件中的所有代碼後，請更新該文件並查看更改。 這是更新文件的分步指南。

  1. 打開 WordPress 儀表板，然後出現主題編輯器。
  2. 導航 functions.php 文件，然後粘貼上述代碼。
  3. 然後單擊更新文件選項。

在 WordPress 中延遲解析 JavaScript 的替代插件

除了 Async 和 defer，您還有兩個插件選項 Defer Parsing of JavaScript in WordPress。

  1. 加速器包

    2. 這是另一個最好的 WordPress 插件，您可以使用它來輕鬆提高網站的速度並為用戶進行優化。 讓我們知道它的優點和缺點。

    優點：

    • 由於交互式用戶界面，任何人都可以輕鬆使用它。
    • 這有助於 JavaScript 優化、加載不良和 CDN 集成。
    • 這將定期更新並消除錯誤威脅

    缺點：

    • 這可能會給使用其他插件帶來麻煩。

  2. 異步 JavaScript

    3. 該插件允許使用 LABJS 輕鬆加載作為 wp_enqueue_script() 添加的所有 java 腳本。 讓我們知道它的優點和缺點。

    優點：

    • 這是非常容易使用的插件
    • 它在插件市場上最受歡迎
    • 專為在 WordPress 中延遲解析 JavaScript 而設計

    缺點：

    • 不定期更新
    • 可能與較新版本的 WordPress 不兼容
    • 可能會給其他插件帶來麻煩

    經常問的問題

    延遲解析是什麼意思？

    延遲解析是您的 JavaScript 文件在瀏覽器中的網站內容加載之後的狀態。 這意味著 defer 不會參與加載和渲染。

    因此，當用戶在瀏覽器中請求您的網站時，延遲 JavaScript 解析不會等待在瀏覽器中加載 JavaScript，而是立即顯示內容。 簡而言之，您的內容首先顯示然後被加載。

    如何從 WordPress 網站移除渲染阻塞？

    從網站中移除渲染阻塞的成功方法之一是在其他網站元素之前延遲解析。 另一種最小化渲染的方法是將 JS 和 CSS 連接在一起。

    我可以使用哪些工具來識別我網站上的非關鍵 JS？

    要確定 JavaScript 是否對您的網站至關重要，您可以訪問以下工具。

    • Google PageSpeed 洞察：這將幫助您確定網站速度和性能的核心不足點。 此外，此工具還提供了一些建議，以提高您的網站性能和加載時間。
    • 有了這個，您的網站將收到不同顏色的分數，例如紅色、橙色和綠色。 紅色表示性能低下，橙色表示平均，綠色表示良好。
    • Pingdom 網站速度測試：它是另一種流行的跟踪和監控性能的工具。 使用此工具，您可以在七個不同的位置測試您的網站性能。
    • 此外，此工具還提供提高頁面速度的建議，以便您享受更好的網站速度和性能

    您可以通過自動優化插件推遲 WordPress 中 JavaScript 的解析嗎？

    使用自動優化工具，您可以輕鬆推遲 JavaScript 的解析。 為確保該過程應該像往常一樣安裝和激活插件。 安裝並激活插件後，訪問設置並選擇 JS、CSS 和 HTML 選項。

    現在優化 JavaScript 代碼選項，您將解鎖這些選項。 現在勾選 Aggregate JS-files 並留下其他文件。

    此外，該插件允許您排除不想呈現的 JavaScript。 進行更改後，單擊保存按鈕。

    包起來
    為了優化您的網站並減少加載時間，在 WordPress 中延遲解析 JavaScript 非常重要。

    我們希望通過本文您了解鹿解析的含義以及它如何幫助您的網站排名在搜索頁面的頂部。 祝你好運！