6種簡便的方法來減少WordPress中的JavaScript執行時間

沒有什麼比緩慢加載頁面更沮喪的網站訪問者了。這樣做的原因很多，其中一個是JavaScript執行時間過多。

當JavaScript花費太長時間來處理時，它會延遲所有內容 - 導致頁面負載緩慢，用戶體驗差，甚至傷害您的SEO排名。

但是不用擔心。優化JavaScript並不一定要復雜。

在本指南中，我們將為您提供簡單，有效的方法，以減少WordPress中的JavaScript執行時間。

無論您是初學者還是高級WordPress用戶，這些簡單的方法都將有助於加快您的網站，改善核心網絡生命力並提高您的SEO性能。

讓我們潛入！

什麼是JavaScript執行時間？

JavaScript執行時間是指Web瀏覽器在網頁上處理和執行JavaScript代碼所需的時間。

每次用戶加載站點時，瀏覽器都必須解析，編譯和執行JavaScript腳本。如果這些腳本過於復雜，不優化或渲染障礙，它們可能會減慢頁面性能，從而導致更高的負載時間和差的用戶體驗。

JavaScript執行時間對性能有什麼影響？

這是JavaScript執行時間如何影響性能的細分：

1。阻止主線程

想想一條狹窄的隧道，一次只能一輛汽車可以通過。只要車輛內部徘徊太長，交通就會順利移動。

瀏覽器以相同的方式工作 - 它們依靠一個主線程來管理加載內容，渲染頁面和處理用戶交互之類的任務。

當JavaScript運行時，它在此線程上需要優先。如果執行時間太長，那就像是一輛卡車在隧道中停滯不前，舉起所有其他汽車。此延遲阻止瀏覽器處理其他任務，從而導致頁面負載緩慢和無反應性交互。

2。延遲渲染

當您訪問網站時，您希望內容會迅速出現在屏幕上。此過程被稱為“繪畫”內容，可確保使用平穩的用戶體驗。

但是，當JavaScript執行時間太長時，它會延遲此初始渲染，使用戶盯著空白屏幕，這會導致用戶體驗差。

3。第一個輸入延遲（FID）

它跟踪網站響應用戶的第一個交互所需的時間，例如單擊按鈕。延遲的FID會給用戶帶來緩慢的體驗，這令人沮喪。

增加的JavaScript執行時間對第一個輸入延遲（FID）有直接影響。當JavaScript被超載時，網站無法立即響應用戶輸入，使其顯得無反應並提供差的用戶體驗。

4。記憶消耗

與任何其他程序一樣，JavaScript代碼需要內存運行。複雜或優化的代碼可以吃大量記憶。

結果，這可能會減慢瀏覽器並可能導致崩潰，尤其是在存儲器很少的移動設備上。

5。對SEO產生負面影響

排名搜索結果時，諸如Google之類的搜索引擎使用頁面速度。

緩慢的JavaScript執行可以降低頁面性能，並影響搜索結果中網站的排名。

簡而言之，延遲的JavaScript執行減慢了渲染，增加了FID，甚至可能超載瀏覽器。這一切都加入了可怕的用戶體驗，這可能會導致訪問者放棄您的網站。

如何測量JavaScript執行時間？

要優化JavaScript執行時間，您首先需要準確地測量它。幸運的是，有幾種可以監視JavaScript性能的工具和技術，並確定影響WordPress網站速度的問題。

用PagesSpeed Insights測量JS執行時間

Google PagesPeed Insights是Google的免費工具，可衡量網頁速度並提供優化的想法。

這是使用它來測量JavaScript執行時間的方法：

訪問PagesPeed Insights網站或使用PagesPeed Insights Chrome擴展。

在這裡，輸入您要分析的網站URL，然後單擊“分析”按鈕。

PagesPeed Insights將提供包含許多性能指標的報告，包括JavaScript執行時間。

如果您對減少JavaScript執行時間的警告，請遵循建議。

用GTMetrix測量JS執行時間

GTMetrix是測量網頁性能的另一種常見工具，其中包括JavaScript執行時間。

訪問GTMetrix網站，輸入網頁的URL，然後單擊“立即測試”選項。

加載一段時間後，GTMETRIX將生成具有性能指標的完整報告，包括JavaScript執行時間。

您可以使用GTMetrix中的這些見解來優化JavaScript代碼並提高整體網頁性能。

如何減少JavaScript執行時間

這是減少JavaScript執行時間，使您的網站更快並改善用戶體驗的一些簡單方法。

1。避免腫的主題/插件

在WordPress中慢速JavaScript執行的最常見原因之一是主題和插件過多。

儘管功能豐富的主題和插件似乎很吸引人，但它們通常以性能為代價。

每個其他腳本，動畫或功能都會增加您的網站的加載時間，從而導致執行速度較慢，CPU使用率較高以及用戶體驗差。

為什麼腫的主題和插件是一個問題？

• 過多的代碼執行：重型主題和編碼不佳的插件需要更多資源，從而增加JavaScript執行時間。
• 額外的HTTP請求：某些主題和插件加載其他CSS，JavaScript和字體，即使您不使用它們。
• 增加的服務器負載：太多的活動插件會減慢您的服務器響應時間，從而影響SEO和用戶體驗。

如何選擇輕巧的替代品？

• 使用性能優化的主題：堅持快速，最小的主題，例如GeneratePress，Astra或Kadence，將速度優先考慮。
• 審核您的插件：定期查看插件，並停用不再需要的任何內容。如果插件具有很多JavaScript，請嘗試使用輕量級替代方案。
• 僅使用您需要的內容：避免為類似功能安裝多個插件。而是選擇最小化腳本過載的多合一解決方案。
• 限制外部腳本：避免使用包含不需要的第三方腳本，字體或跟踪代碼的主題和插件。

通過保持WordPress設置優化，您將減少JavaScript執行時間，加快WordPress網站並增強SEO排名和用戶體驗。

2。延遲JS並刪除未使用的JS

您應該延遲JS文件，以便在用戶交互之前將它們加載。這意味著除非用戶單擊按鈕或瀏覽頁面內容，否則瀏覽器將不會運行任何JS腳本。

大多數優化插件，例如FlyingPress，WP Rocket，Perfmatters，Flying腳本等，都可以執行此操作。但是，每個人都這樣做不同，因此請閱讀有關如何添加文件（按文件名，關鍵字或自動添加的插件文檔，就像WP Rocket一樣）。

例如，如果您使用的是WP Rocket插件，則可以利用其延遲JavaScript執行功能。

只需導航到文件優化選項卡，然後檢查延遲JavaScript執行選項。該插件將自動延遲加載JS文件直至用戶交互。

或者，如果您使用的是Perfmatters，只需轉到Perfmatters插件設置即可。單擊JavaScript菜單，然後在延遲部分下的延遲JavaScript上切換。

此外，您應該刪除所有未使用的JS文件。換句話說，只有在顯示頁面顯示後，應加載所有不必要或不出現在上頁內容中的JS腳本。

它允許瀏覽器僅渲染必要的材料，而不是被不必要的JS文件陷入困境。

3。DEFERJS

減少JS執行時間的另一種有效方法是延遲JS文件。

通過在您的WordPress網站上推遲JavaScript，瀏覽器僅在渲染頁面時加載它。

您可以手動和借助插件的幫助。

如果您想手動使用延期屬性，則應首先在添加延期屬性之前識別JS腳本。

這是延期屬性的示例：

如果您喜歡使用插件，則可以從WP Rocket中進行自動化，飛行壓力，資產清理等。

例如，像延遲JS一樣，WP Rocket還提供負載JavaScript延期功能。

在“文件優化”選項卡中，您可以加載JavaScript延期延期並限制任何特定的JS文件被延期。只需單擊幾下，您就可以實現重要的Web性能優化技術！

4。縮小JS

減少JavaScript執行時間的最簡單但最有效的方法之一是縮小。

縮小JavaScript意味著刪除不必影響其功能的不必要的字符（例如空格，線路斷裂和評論）。結果？較小的文件大小，更快的下載速度和提高的頁面速度。

有幾種可用的JavaScript Minification工具可以幫助您完成工作。

對於無麻煩的方法，請使用諸如AutoPtimize，WP火箭，快速速度縮小，飛行壓力等的插件。

只需安裝您喜歡的插件，啟用JavaScript縮小，然後讓工具完成工作。

5。在特定頁面上卸載JavaScript

並非每個腳本都需要在WordPress網站的每個頁面上運行。如果是這樣，它可以增加執行時間，減慢性能並對用戶體驗產生負面影響。

例如：

• 在每個頁面上接觸表單腳本加載 - 即使沒有表格。
• WooCommerce腳本在不需要的博客文章上運行。
• 滑塊腳本出現在沒有滑塊的文本頁面上。

每個不需要的腳本都會增加JavaScript執行工作負載，從而減慢頁面渲染。

解決此問題的最簡單解決方案之一是在不需要的頁面上禁用不需要的腳本。

諸如資產清理或完善之類的插件允許您每頁，發布類型或類別禁用JavaScript，而無需修改代碼。

或者，如果您對代碼感到滿意，請在functions.php文件中使用wp_deque_script（）來防止不必要的腳本加載。

function remove_unnecessary_js() { if (!is_page('contact')) { wp_dequeue_script('contact-form-script'); } } add_action('wp_enqueue_scripts', 'remove_unnecessary_js');

6。主持人本地第三方JavaScript

字體，分析腳本和跟踪代碼是通常從外部來源加載的第三方JavaScript文件。儘管這些腳本提供了有用的功能，但由於延遲的外部請求，網絡延遲和服務器響應時間，它們可以大大增加JavaScript執行時間。

通過本地託管第三方JavaScript文件，您可以提高負載時間，減少對外部服務器的依賴並提高整體站點性能。

要在本地託管第三方JavaScript，請訪問第三方提供商的網站，然後下載所需的JavaScript文件（例如Google字體，Recaptcha或Analytics Scripts）。

現在，使用FTP將文件存儲在您的/wp-content/uploads/ or /wp-includes/js/ Directory中。

接下來，修改主題的function.php或在wp_enqueue_script（）中加入腳本以指向本地版本，而不是外部URL。

function load_local_script() { wp_enqueue_script('local-js', get_template_directory_uri() . '/js/script-name.js', array(), null, true); } add_action('wp_enqueue_scripts', 'load_local_script');

使用諸如WP Rocket之類的插件或自動達到限制來縮小並緩存本地託管的JavaScript文件，以更快地執行。

立即開始減少JS執行時間

緩慢的WordPress網站會挫敗訪客並損害您的SEO排名。罪魁禍首之一？ JavaScript執行時間過多。當JavaScript花費太長時間進行處理時，它會阻止主線程，延遲渲染，增加第一個輸入延遲（FID）並對性能產生負面影響。

本指南將向您展示減少JavaScript執行時間在WordPress中的簡便方法，從而可以提高站點速度和用戶體驗。關鍵策略包括：

• 避免使用腫的主題和插件，以防止不必要的代碼執行。
• 延遲並刪除不需要的JavaScript，以防止非必需的腳本減慢您的頁面。
• 延遲JavaScript執行，以允許瀏覽器首先優先考慮關鍵內容。
• 縮小JavaScript文件以減少文件大小並加快執行速度。
• 從特定頁面卸載未使用的JavaScript，以消除不必要的腳本。
• 主機在本地第三方JavaScript，以消除由外部服務器請求引起的延遲。

通過實施這些JavaScript優化技術，您將為訪問者提供改進的核心Web Vitals，高頁面速度和無縫的用戶體驗。

有關更多信息，請查看這些其他有用的資源：

• 10個最佳WordPress緩存插件（免費和優質選項）
• 如何輕鬆修復WordPress中的利用瀏覽器緩存
• WP Rocket評論：真的值得付款嗎？
• Perfmatters值得嗎？深入評論
• 氮氣評論：最佳速度工具還是黑色帽子SEO？

最後，在Facebook和X（以前是Twitter）上關注我們，以了解最新的WordPress和與博客有關的文章。