日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在GTmetrix中延遲解析JavaScript測試

延遲解析JavaScript的不同方法

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

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

使用defer，訪問者的瀏覽器在解析HTML時仍然會下載腳本，但他們會等待解析腳本，直到HTML解析完成。

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

圖形解釋異步與延遲

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

最后，您將看到的另一種方法是將JavaScript移動到頁面底部。但是，這種方法并不是一個很好的解決方案，因為即使您的頁面將很快可見，訪問者的瀏覽器仍會將頁面顯示為正在加載，直到所有腳本完成。這可能會阻止一些訪問者與您的頁面進(jìn)行交互，因為他們認(rèn)為內(nèi)容沒有完全加載。

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

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

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

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

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

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

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

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

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

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

如何使用異步JavaScript插件

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

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

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

2.使用WP Rocket插件

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

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

如何使用WP Rocket延遲解析JavaScript

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

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

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

這是來自Varvy的代碼：

確保將“defer.js”替換為您要延遲的JavaScript文件的實際文件名/路徑。然后，您可以使用wp_footer鉤子通過子主題的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.通過functions.php文件延遲JavaScript
最后，您還可以通過將以下代碼片段添加到您的functions.php文件中，將defer屬性添加到您的JavaScript文件中，而無需插件：
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ì)上，這個片段告訴WordPress將defer屬性添加到除jQuery之外的所有JavaScript文件。
它既快速又簡單，但它并沒有像Async JavaScript插件提供的那樣為您提供細(xì)粒度的控制。
小結(jié)
推遲WordPress網(wǎng)站上的JavaScript解析是一個重要的性能考慮因素。
一旦您使用上述方法之一來延遲WordPress中的JavaScript解析，我們建議您做兩件事：
                                                

                                                網(wǎng)頁標(biāo)題：如何在WordPress中延遲JavaScript解析（4種方法）                                                

                                                轉(zhuǎn)載注明：http://www.dlmjj.cn/article/dpejsho.html