如何推遲WordPress中Javascript警告的解析(4種方法)

您是否通過性能測試工具運行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測試的解析

推遲GTmetrix中JavaScript測試的解析

延遲解析JavaScript的不同方法

有幾種不同的方法可以推遲JavaScript的解析。首先,您可以將兩個屬性添加到腳本中:

  1. 非同步
  2. 推遲

通過這兩個屬性,訪問者的瀏覽器無需暫停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插件

如何使用非同步JavaScript插件

再往下,您還可以選擇如何處理jQuery。許多主題和插件嚴重依賴jQuery,因此,如果您嘗試推遲解析jQuery腳本,則可能會破壞網站的某些核心功能。最安全的方法是排除jQuery,但您可以嘗試將其推遲。只要確保徹底測試您的網站即可。

藉助WordPress,我們的流量增長了1,187%。我們將向您展示方法。加入20,000多個其他人,他們每周都會收到有關WordPress內部技巧的新聞!立即訂閱成功!感謝您的訂閱

您將在一周內收到下一期的Kinsta新聞通訊。

訂閱Kinsta新聞通訊訂閱我同意條款和條件以及隱私政策

再往下看,您還可以手動推遲推遲添加或排除特定腳本,其中包括一個很好的用戶友好功能,可讓您定位網站上活動的特定主題或插件:

非同步JavaScript包含/排除規則

非同步JavaScript包含/排除規則

2.使用WP Rocket插件

雖然我們在Kinsta上不允許大多數緩存插件,但在WP Rocket插件中卻允許使用,因為它包含一個內置集成,可以與Kinsta的伺服器級緩存很好地配合使用。

除了一系列其他性能優化技術之外,WP Rocket還可以幫助您推遲WP Rocket儀錶板的「文件優化」選項卡中的JavaScript解析。在「 JavaScript文件」部分中查找「載入JavaScript延遲」選項。

像Async JavaScript插件一樣,WP Rocket還可讓您排除jQuery以避免網站內容出現問題:

如何使用WP Rocket推遲JavaScript的解析

如何使用WP Rocket推遲JavaScript的解析

3.使用Varvy的推薦方法(代碼)

之前,我們提到過Varvy的Patrick Sexton建議使用代碼段,等待您的網站完成其初始頁面載入後,再下載並執行JavaScript。

您可以通過調整Varvy提供的代碼片段,然後在結束之前立即將腳本添加到主題中來實現此方法。

標籤。

這是Varvy的代碼:

確保將「 defer.js」替換為您要延遲的JavaScript文件的實際文件名/路徑。然後,您可以使用wp_footer掛鉤通過子主題的functions.php文件注入代碼。

通過這種方法,您可以將Varvy的代碼包裝成如下形式:

/ **使用Varvy的代碼片段推遲對JavaScript的解析* / add_action('wp_footer','my_footer_scripts');函數my_footer_scripts(){?> REPLACE_WITH_VARVY_SCRIPT <?php}

4.通過functions.php文件延遲JavaScript

最後,您還可以通過將以下代碼段添加到您的functions.php文件中,將defer屬性添加到您的JavaScript文件中而不需要插件:

函數defer_parsing_of_js($ url){if(FALSE === strpos($ url,'.js'))返回$ url; if(strpos($ url,'jquery.js'))返回$ url;返回「 $ url'defer」; } add_filter('clean_url','defer_parsing_of_js',11,1);

本質上,此代碼片段告訴WordPress將defer屬性添加到除jQuery之外的所有JavaScript文件中。

它既快速又簡單,但是卻無法像Async JavaScript插件那樣為您提供精細的控制。

您是否收到「延遲解析Javascript警告」消息?不用擔心…現在用這4種方法修復它! ?⏳單擊以發布摘要

延遲WordPress網站上的JavaScript解析是重要的性能考慮因素。

使用上述方法之一推遲WordPress中JavaScript的解析後,我們建議您做兩件事:

  1. 對您的網站進行測試,以確保推遲使用某些腳本不會破壞首屏內容的關鍵。同樣,這通常會在jQuery中發生,這就是為什麼很多工具可以讓您排除jQuery.js的原因。但是,其他腳本也可能發生這種情況。
  2. 再次通過GTmetrix運行您的站點,以確保您的站點延遲儘可能多的腳本(如果排除jQuery,您可能不會獲得完美的成績-但您的成績應該更好)。

您對如何推遲WordPress中的JavaScript解析有任何疑問嗎?在評論中提問!

1股

.essb_links .essb_links_list li a {margin-top:0px; } @media only屏幕和(最小寬度:64em){.container–narrow.pb–60,.knowledgebase .user-content {位置:相對; } .widget-share {位置:絕對;左:-200px;頂部:0px;高度:100%;寬度:200像素;框大小:border-box; } .widget-share-aligner {width:200px; padding-right:62px;框大小:border-box; } .widget-share-inner {padding-bottom:62px; } .knowledgebase .user-content .widget-share-inner {padding-top:0; } .widget-share .amount {display:flex; align-items:居中;證明內容:flex-end;寬度:100%;保證金右:11像素; font-size:14px;字體重量:500;邊距:10px的; } .widget-share .amount svg {margin-right:8px;保證金左:10px的; } .essb_links .essb_links_list {flex-direction:column; align-items:flex-end; } .essb_links .essb_links_list li {display:block; margin-bottom:5px!important; } .widget-share__total {margin-bottom:0px!important; } .widget-share__total .heading–small {color:#999999;字體大小:14px的;字體粗細:300; } .essb-total-value {margin-right:4px; }} .essb_links {margin:0px;填充:0像素; } .essb_counter_right {display:none!important; } .essb_links.essb_template_circles-retina。 ,.essb_links.essb_template_circles-retina .essb_link_linkedin a,.essb_links.essb_template_circles-retina .essb_link_facebook a,.essb_links.essb_template_circles-retina .essb_link_twitter a {顏色:#43414e!背景:#f3f3f6!important; } .essb_links.essb_template_circles-retina li a:focus,.essb_links.essb_template_circles-retina li a:hover {border-color:#fff!important;背景:#43414e!重要; } .essb_links.essb_template_circles-retina a {border-color:#f3f3f6!important;背景:#f3f3f6; } .essb_links .essb_icon:之前{font-size:15px!important;頂:8像素;左:9px; } .essb_links .essb_icon {width:32px;高度:32PX; } .essb_links.essb_counter_modern_right .essb_counter_right {背景:#f3f3f6!important; } @media only屏幕和(最大寬度:63.999em){.widget-share-aligner {位置:相對!important; top:0!重要; } .essb_links .essb_links_list li {margin-right:8px!important; }}

原創文章,作者:WPJIAN,如若轉載,請註明出處:https://wpjian.com/zh-tw/tips/2019092510083.html

(0)
上一篇 2019年9月25日 am6:27
下一篇 2019年9月25日 pm5:50

相關推薦