您是否通過(guò)性能測(cè)試工具運(yùn)行您的wordpress網(wǎng)站，卻遇到了延遲在WordPress中解析JavaScript的指令？

堅(jiān)守“ 做人真誠(chéng) · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專(zhuān)業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都咖啡廳設(shè)計(jì)小微創(chuàng)業(yè)公司專(zhuān)業(yè)提供成都定制網(wǎng)頁(yè)設(shè)計(jì)營(yíng)銷(xiāo)網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺(jué)設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁(yè)布局、功能開(kāi)發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

實(shí)施此更改可以對(duì)您網(wǎng)站的頁(yè)面加載時(shí)間產(chǎn)生積極影響，尤其是對(duì)于移動(dòng)訪問(wèn)者。但是警告可能有點(diǎn)難以理解，這就是為什么我們要準(zhǔn)確解釋延遲解析JavaScript的含義以及如何在WordPress網(wǎng)站上實(shí)現(xiàn)此更改。

以下是您將在本文中學(xué)到的內(nèi)容：

如果您只想直接跳到教程，可以單擊上面列表中的最后一個(gè)鏈接。

在WordPress中延遲解析JavaScript意味著什么？

如果您曾經(jīng)通過(guò)Google PageSpeed Insights、GTmetrix或其他頁(yè)面速度測(cè)試工具運(yùn)行過(guò)您的WordPress網(wǎng)站，您可能會(huì)遇到過(guò)延遲解析JavaScript的建議。

但是……這實(shí)際上是什么意思？為什么它是一個(gè)重要的性能考慮因素？

基本上，當(dāng)有人訪問(wèn)您的WordPress網(wǎng)站時(shí)，您網(wǎng)站的服務(wù)器會(huì)將您網(wǎng)站的HTML內(nèi)容傳送到該訪問(wèn)者的瀏覽器。

然后訪問(wèn)者的瀏覽器從頂部開(kāi)始，并通過(guò)代碼呈現(xiàn)您的網(wǎng)站。如果在從上到下的移動(dòng)過(guò)程中找到任何JavaScript，它將停止呈現(xiàn)頁(yè)面的其余部分，直到它可以獲取并解析JavaScript文件。

它會(huì)對(duì)找到的每個(gè)腳本執(zhí)行此操作，這可能會(huì)對(duì)您網(wǎng)站的頁(yè)面加載時(shí)間產(chǎn)生負(fù)面影響，因?yàn)樵L問(wèn)者需要在瀏覽器下載和解析所有JavaScript時(shí)盯著空白屏幕。

如果您網(wǎng)站的核心功能不需要某個(gè)腳本（至少在初始頁(yè)面加載時(shí)），您不希望它妨礙加載網(wǎng)站更重要的部分，這就是為什么這些頁(yè)面速度測(cè)試工具總是告訴你推遲對(duì)JavaScript的解析。

那么延遲解析JavaScript是什么意思呢？

本質(zhì)上，您的網(wǎng)站會(huì)告訴訪問(wèn)者的瀏覽器等待下載和/或解析JavaScript，直到您網(wǎng)站的主要內(nèi)容已經(jīng)完成加載。此時(shí)，訪問(wèn)者已經(jīng)可以看到您的頁(yè)面并與之交互，因此下載和解析該JavaScript的等待時(shí)間不再具有如此負(fù)面的影響。

通過(guò)加快內(nèi)容的首屏加載時(shí)間，您可以讓Google感到高興，并為您的訪問(wèn)者創(chuàng)造更好、更快的體驗(yàn)。

如何判斷是否需要延遲解析JavaScript

要測(cè)試您的WordPress站點(diǎn)是否需要延遲解析JavaScript，您可以通過(guò)GTmetrix運(yùn)行您的站點(diǎn)。

GTmetrix會(huì)給你打分，還會(huì)列出需要推遲的特定腳本：

在GTmetrix中延遲解析JavaScript測(cè)試

延遲解析JavaScript的不同方法

有幾種不同的方法可以延遲JavaScript的解析。首先，您可以將兩個(gè)屬性添加到腳本中：

這兩個(gè)屬性都允許訪問(wèn)者的瀏覽器在不暫停HTML解析的情況下下載JavaScript。但是，不同之處在于，雖然async不會(huì)暫停HTML解析以獲取腳本（如默認(rèn)行為那樣），但它會(huì)暫停HTML解析器以在獲取腳本后執(zhí)行腳本。

使用defer，訪問(wèn)者的瀏覽器在解析HTML時(shí)仍然會(huì)下載腳本，但他們會(huì)等待解析腳本，直到HTML解析完成。

與Web一起成長(zhǎng)的這張圖表很好地解釋了這種差異：

圖形解釋異步與延遲

Varvy的Patrick Sexton推薦的另一種選擇是，僅在初始頁(yè)面加載完成后才使用腳本調(diào)用外部JavaScript文件。這意味著在初始頁(yè)面加載完成之前，訪問(wèn)者的瀏覽器不會(huì)下載或執(zhí)行任何JavaScript。

最后，您將看到的另一種方法是將JavaScript移動(dòng)到頁(yè)面底部。但是，這種方法并不是一個(gè)很好的解決方案，因?yàn)榧词鼓捻?yè)面將很快可見(jiàn)，訪問(wèn)者的瀏覽器仍會(huì)將頁(yè)面顯示為正在加載，直到所有腳本完成。這可能會(huì)阻止一些訪問(wèn)者與您的頁(yè)面進(jìn)行交互，因?yàn)樗麄冋J(rèn)為內(nèi)容沒(méi)有完全加載。

如何在WordPress中延遲JavaScript解析（4 種方法）

要在WordPress中延遲JavaScript的解析，您可以采取三種主要途徑：

• 插件——有一些很棒的免費(fèi)和高級(jí)WordPress插件可以推遲JavaScript解析。我們將向您展示如何使用兩個(gè)流行的插件來(lái)做到這一點(diǎn)。
• Varvy方法——如果您精通技術(shù)，您可以直接編輯您網(wǎng)站的代碼并使用Varvy的代碼片段。
• Functions.php文件——您可以將代碼片段添加到子主題的functions.php文件中以自動(dòng)延遲腳本。

您可以單擊上方直接跳轉(zhuǎn)到您喜歡的方法或通讀所有技術(shù)以找到最適合您的方法。

1. 免費(fèi)的異步JavaScript插件

Async JavaScript是來(lái)自Frank Goossens的免費(fèi)WordPress插件，他是流行的Autoptimize插件背后的同一個(gè)人。

它為您提供了一種使用異步或延遲延遲解析JavaScript的簡(jiǎn)單方法。

首先，您可以從WordPress.org安裝并激活免費(fèi)插件。然后，轉(zhuǎn)到設(shè)置 →  Async JavaScript以配置插件。

在頂部，您可以啟用插件的功能并在異步和延遲之間進(jìn)行選擇。記?。?/p>

• Async下載JavaScript，同時(shí)仍解析HTML ，但隨后暫停HTML解析以執(zhí)行 JavaScript。
• Defer在仍然解析HTML的同時(shí)下載JavaScript并等待執(zhí)行它，直到HTML解析完成。

如何使用異步JavaScript插件

再往下，你還可以選擇如何處理jQuery。許多主題和插件嚴(yán)重依賴(lài)jQuery，因此如果您嘗試推遲解析jQuery腳本，您可能會(huì)破壞您網(wǎng)站的一些核心功能。最安全的方法是排除jQuery，但您可以嘗試推遲它。只要確保徹底測(cè)試您的網(wǎng)站。

再往下，您還可以手動(dòng)包含或排除特定的腳本被延遲，包括一個(gè)很好的用戶(hù)友好功能，讓您可以定位在您的網(wǎng)站上活躍的特定主題或插件：

異步JavaScript包含/排除規(guī)則

2.使用WP Rocket插件

除了一堆其他性能優(yōu)化技術(shù)外，WP Rocket還可以幫助您在WP Rocket儀表盤(pán)的“File Optimization”選項(xiàng)卡中延遲JavaScript的解析。在JavaScript Files部分中查找Load JavaScript deferred選項(xiàng)。

與Async JavaScript插件一樣，WP Rocket還允許您排除jQuery以避免網(wǎng)站內(nèi)容出現(xiàn)問(wèn)題：

如何使用WP Rocket延遲解析JavaScript

3. 使用Varvy推薦的方法（代碼）

早些時(shí)候，我們提到Varvy的Patrick Sexton建議使用一個(gè)代碼片段，該代碼片段會(huì)等待下載和執(zhí)行JavaScript，直到您的網(wǎng)站完成初始頁(yè)面加載。

您可以通過(guò)調(diào)整Varvy提供的代碼片段，然后將腳本添加到您的主題中，緊接在結(jié)束標(biāo)記之前來(lái)實(shí)現(xiàn)此方法。

這是來(lái)自Varvy的代碼：

確保將“defer.js”替換為您要延遲的JavaScript文件的實(shí)際文件名/路徑。然后，您可以使用wp_footer鉤子通過(guò)子主題的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

4.通過(guò)functions.php文件延遲JavaScript
最后，您還可以通過(guò)將以下代碼片段添加到您的functions.php文件中，將defer屬性添加到您的JavaScript文件中，而無(wú)需插件：
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 );
本質(zhì)上，這個(gè)片段告訴WordPress將defer屬性添加到除jQuery之外的所有JavaScript文件。
它既快速又簡(jiǎn)單，但它并沒(méi)有像Async JavaScript插件提供的那樣為您提供細(xì)粒度的控制。
小結(jié)
推遲WordPress網(wǎng)站上的JavaScript解析是一個(gè)重要的性能考慮因素。
一旦您使用上述方法之一來(lái)延遲WordPress中的JavaScript解析，我們建議您做兩件事：
                    

                    新聞名稱(chēng)：如何在WordPress中延遲JavaScript解析（4種方法）                    

                    當(dāng)前地址：http://uogjgqi.cn/article/dpejsho.html