如何修復(fù) WordPress 中渲染阻塞的 JavaScript 和 CSS

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

如果您在 Google PageSpeed 見解上測試您的網(wǎng)站，那么您可能會看到消除渲染阻塞腳本和 css 的建議。但是，它沒有提供有關(guān)如何在 WordPress 網(wǎng)站上執(zhí)行此操作的任何詳細(xì)信息。

在本文中，我們將向您展示如何輕松修復(fù) WordPress 中的渲染阻塞 JavaScript 和 CSS，以提高您的 Google PageSpeed 分?jǐn)?shù)。

什么是渲染阻塞 JavaScript 和 CSS？

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

立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；

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

這些腳本可以增加站點(diǎn)的頁面加載時(shí)間，并且還可以阻止頁面的呈現(xiàn)。

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

默認(rèn)情況下，它不會打開 JavaScript 和CSS 優(yōu)化選項(xiàng)。這些優(yōu)化可能會影響您網(wǎng)站的外觀或某些功能，這就是為什么該插件允許您選擇啟用這些設(shè)置。

為此，您需要訪問“設(shè)置”? WP Rocket頁面，然后切換到“文件優(yōu)化”選項(xiàng)卡。

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

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

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

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

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

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

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

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

在我們的測試網(wǎng)站上，我們能夠在桌面設(shè)備上獲得 100% 的分?jǐn)?shù)，并且在移動和桌面分?jǐn)?shù)上都解決了渲染阻塞問題。

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

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

您需要做的第一件事是安裝并激活A(yù)utoptimize，這是一個免費(fèi)的插件，可以提高網(wǎng)站性能。有關(guān)更多詳細(xì)信息，請參閱我們有關(guān)如何安裝 WordPress 插件的分步指南。

激活后，您需要訪問設(shè)置?自動優(yōu)化頁面來配置插件設(shè)置。

首先，您需要選中 JavaScript 選項(xiàng)塊下“優(yōu)化 JavaScript 代碼”旁邊的框。確保未選中“聚合 JS 文件”選項(xiàng)。

接下來，向下滾動到“CSS 選項(xiàng)”框并選中“優(yōu)化 CSS 代碼”選項(xiàng)。

確保未選中“聚合 CSS 文件”選項(xiàng)。

您現(xiàn)在可以單擊“保存更改并清空緩存”按鈕來存儲您的設(shè)置。

繼續(xù)使用 PageSpeed Insights 工具測試您的網(wǎng)站。在我們的演示網(wǎng)站上，我們能夠使用這些基本設(shè)置修復(fù)渲染阻塞問題。

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

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

完成后，繼續(xù)使用 PageSpeed Insights 工具再次檢查您的網(wǎng)站。

自動優(yōu)化如何工作？

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

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

渲染阻塞 JavaScript 和 CSS 故障排除

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

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

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

然而，找出顯示首屏內(nèi)容所需的 CSS 代碼可能相當(dāng)困難。

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

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

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