日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

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

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

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

以下是您將在本文中學到的內容：

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

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

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

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

基本上，當有人訪問您的WordPress網站時，您網站的服務器會將您網站的HTML內容傳送到該訪問者的瀏覽器。

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

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

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

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

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

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

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

要測試您的WordPress站點是否需要延遲解析JavaScript，您可以通過GTmetrix運行您的站點。

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

在GTmetrix中延遲解析JavaScript測試

延遲解析JavaScript的不同方法

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

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

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

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

圖形解釋異步與延遲

Varvy的Patrick Sexton推薦的另一種選擇是，僅在初始頁面加載完成后才使用腳本調用外部JavaScript文件。這意味著在初始頁面加載完成之前，訪問者的瀏覽器不會下載或執(zhí)行任何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安裝并激活免費插件。然后，轉到設置 →  Async JavaScript以配置插件。

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

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

如何使用異步JavaScript插件

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

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

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

2.使用WP Rocket插件

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

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

如何使用WP Rocket延遲解析JavaScript

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

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

您可以通過調整Varvy提供的代碼片段，然后將腳本添加到您的主題中，緊接在結束標記之前來實現(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 );
本質上，這個片段告訴WordPress將defer屬性添加到除jQuery之外的所有JavaScript文件。
它既快速又簡單，但它并沒有像Async JavaScript插件提供的那樣為您提供細粒度的控制。
小結
推遲WordPress網站上的JavaScript解析是一個重要的性能考慮因素。
一旦您使用上述方法之一來延遲WordPress中的JavaScript解析，我們建議您做兩件事：
                                                

                                                本文題目：如何在WordPress中延遲JavaScript解析（4種方法）                                                

                                                網頁網址：http://m.5511xx.com/article/dpejsho.html