您是否正在嘗試消除 wordpress 中阻礙渲染的 JavaScript 和 css？

如果您在 Google PageSpeed 見解上測試您的網站，那么您可能會看到消除渲染阻塞腳本和 css 的建議。但是，它沒有提供有關如何在 wordpress 網站上執行此操作的任何詳細信息。

在本文中，我們將向您展示如何輕松修復 WordPress 中的渲染阻塞 JavaScript 和 CSS，以提高您的 Google PageSpeed 分數。

什么是渲染阻塞 JavaScript 和 CSS？

渲染阻止 JavaScript 和 CSS 是阻止網站在加載這些文件之前顯示網頁的文件。

立即學習“Java免費學習筆記（深入）”；

每個 WordPress 網站都有一個主題和插件，可將JavaScript和CSS文件添加到網站的前端。

這些腳本可以增加站點的頁面加載時間，并且還可以阻止頁面的呈現。

WP Rocket 開箱即用，它將使用適合您網站的最佳設置打開緩存。您可以在我們關于如何在 WordPress 中正確安裝和設置 WP Rocket 的完整指南中了解更多信息。

默認情況下，它不會打開 JavaScript 和CSS 優化選項。這些優化可能會影響您網站的外觀或某些功能，這就是為什么該插件允許您選擇啟用這些設置。

為此，您需要訪問“設置”? WP Rocket頁面，然后切換到“文件優化”選項卡。

從這里，滾動到 CSS 文件部分，然后選中“縮小 CSS”、“組合 CSS 文件”和“優化 CSS 交付”旁邊的框。

您可以像對 CSS 那樣縮小和組合 JavaScript 文件。

您還可以阻止 WordPress 加載jquery?Migrate 文件。這是 WordPress 加載的一個腳本，為使用舊版本 jQuery 的插件和主題提供兼容性。

大多數網站不需要此文件，但您仍然需要檢查您的網站，以確保刪除它不會影響您的主題或插件。

接下來，進一步向下滾動并選中“加載 JavaScript 延遲”和“jQuery 安全模式”選項旁邊的框。

這些選項會延遲加載非必需的 JavaScript，并且 jQuery 安全模式允許您為可能內聯使用它的主題加載 jQuery。如果您確定您的主題不在任何地方使用內聯 jQuery，則可以不選中此選項。

不要忘記單擊“保存更改”按鈕來存儲您的設置。

之后，您可能還需要清除 WP Rocket 中的緩存，然后再使用 Google PageSpeed Insights 再次測試您的網站。

在我們的測試網站上，我們能夠在桌面設備上獲得 100% 的分數，并且在移動和桌面分數上都解決了渲染阻塞問題。

方法 2：使用 Autoptimize 修復渲染阻塞腳本和 CSS

對于這種方法，我們將使用專門為改進網站 CSS 和 JS 文件的交付而制作的單獨插件。雖然這個插件可以完成工作，但它沒有 WP Rocket 所具有的其他強大功能。

您需要做的第一件事是安裝并激活Autoptimize，這是一個免費的插件，可以提高網站性能。有關更多詳細信息，請參閱我們有關如何安裝 WordPress 插件的分步指南。

激活后，您需要訪問設置?自動優化頁面來配置插件設置。

首先，您需要選中 JavaScript 選項塊下“優化 JavaScript 代碼”旁邊的框。確保未選中“聚合 JS 文件”選項。

接下來，向下滾動到“CSS 選項”框并選中“優化 CSS 代碼”選項。

確保未選中“聚合 CSS 文件”選項。

您現在可以單擊“保存更改并清空緩存”按鈕來存儲您的設置。

繼續使用 PageSpeed Insights 工具測試您的網站。在我們的演示網站上，我們能夠使用這些基本設置修復渲染阻塞問題。

如果仍然存在渲染阻塞腳本，那么您需要返回插件的設置頁面并檢查 JavaScript 和 CSS 選項下的設置。

例如，您可以允許插件包含內聯 JS 并刪除默認排除的腳本，例如 seal.js 或 jquery.js。然后，只需單擊“保存更改并清空緩存”按鈕即可保存更改并清空插件緩存。

完成后，繼續使用 PageSpeed Insights 工具再次檢查您的網站。

自動優化如何工作？

Autoptimize 聚合所有排隊的 JavaScript 和 CSS。之后，它會創建縮小的 CSS 和 JavaScript文件，并以異步或延遲方式將緩存副本提供給您的網站。

這允許您修復渲染阻塞腳本和樣式問題。但是，請記住，它也會影響您網站的性能或外觀。

渲染阻塞 JavaScript 和 CSS 故障排除

根據插件和 WordPress 主題如何使用 JavaScript 和 CSS，可能很難完全解決所有阻塞渲染的 JavaScript 和 CSS 問題。

雖然上述工具可以提供幫助，但您的插件可能需要不同優先級的某些腳本才能正常工作。在這種情況下，上述解決方案可能會破壞此類插件的功能，或者它們可能會出現意外行為。

Google 可能仍會向您顯示某些問題，例如優化首屏內容的 CSS 交付。WP Rocket允許您通過手動添加顯示主題的上述折疊區域所需的關鍵 CSS 來解決此問題。

然而，找出顯示首屏內容所需的 CSS 代碼可能相當困難。

最后，除了使用我們提到的工具之外，我們還建議刪除所有未使用的 CSS。這是在您的網站上加載的 CSS 代碼，但加載頁面實際上并不需要。這可能會因加載不必要的額外代碼而導致渲染阻塞問題。

要刪除未使用的 CSS，請參閱我們有關如何刪除 WordPress 中未使用的 CSS 的指南。

我們希望本文能幫助您了解如何修復 WordPress 中渲染阻塞的 JavaScript 和 CSS。您可能還想查看我們關于如何為初學者提高 WordPress 性能的終極指南以及我們對管理最佳的 WordPress 托管公司的比較。