如何在WordPress中修復阻止渲染的JavaScript和CSS


您是否要消除WordPress中的阻止渲染的JavaScript和CSS?

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

在本文中,我們將向您展示如何輕鬆地在WordPress中修復阻止渲染的JavaScript和CSS,以提高您的Google PageSpeed得分。

如何修復WordPress中的渲染阻止JavaScript和CSS

什麼是阻止渲染的JavaScript和CSS?

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

每個WordPress網站都有一個主題和插件,這些插件將JavaScript和CSS文件添加到您的網站的前端。 這些腳本可以增加您網站的頁面加載時間,並且它們也可以阻止頁面的呈現。

Google Pagespeed Insights中突出顯示的渲染阻止問題

用戶的瀏覽器必須先加載這些腳本和CSS,然後才能加載頁面上的其餘HTML。 這意味著連接速度較慢的用戶將不得不再等待幾毫秒才能看到該頁面。

這些腳本和样式表稱為渲染阻止JavaScript和CSS。

試圖達到Google PageSpeed得分100的網站所有者需要解決此問題才能獲得完美的得分。

什麼是Google PageSpeed得分?

Google PageSpeed Insights是由Google創建的網站速度測試工具,可幫助網站所有者優化和測試其網站。 此工具會根據Google的速度準則對您的網站進行測試,並提供建議以縮短您的網站頁面加載時間。

它根據您的站點通過的規則數量向您顯示得分。 大多數網站的訪問量在50-70之間。 但是,有些網站所有者感到被迫達到100(頁面可以得分最高)。

您真的需要完美的“ 100” Google PageSpeed得分嗎?

Google PageSpeed洞察力的目的是為您提供指導,以提高網站的速度和性能。 您無需嚴格遵守這些規則。

請記住,速度只是幫助Google確定如何對網站排名的眾多網站SEO指標之一。 速度之所以如此重要,是因為它可以改善您網站上的用戶體驗。

更好的用戶體驗需要的不僅僅是速度。 您還需要提供有用的信息,更好的用戶界面,以及包含文本,圖像和視頻的內容。

您的目標應該是創建一個提供出色用戶體驗的快速網站。

在上一次WPBeginner重新設計期間,我們一直專注於速度以及改善用戶體驗。

我們建議您使用Google Pagespeed規則作為建議,如果可以在不破壞用戶體驗的情況下輕鬆實現它們,那就太好了。 否則,您應該盡力而為,然後不要擔心其餘的事情。

話雖如此,讓我們看一下如何在WordPress中修復渲染阻止JavaScript和CSS。

我們將介紹兩種方法來修復WordPress中阻止渲染的JavaScript和CSS。 您可以選擇最適合您的網站的一種。

1.使用WP Rocket修復渲染阻止腳本和CSS

對於這種方法,我們將使用WP Rocket插件。 它是市場上最好的WordPress緩存插件,可讓您快速提高網站性能,而無需任何技術技能或複雜的設置。

首先,您需要安裝並激活WP Rocket插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

WP Rocket開箱即用,它將為您的網站打開具有最佳設置的緩存。 您可以在有關如何在WordPress中正確安裝和設置WP Rocket的完整指南中了解更多信息。

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

為此,您需要訪問 設置»WP火箭 頁,然後切換到“文件優化”標籤。 從此處,滾動到CSS文件部分,然後選中縮小CSS,合併CSS文件和優化CSS傳遞選項旁邊的框。

WP Rocket中的CSS優化設置

注意: WP Rocket將嘗試縮小所有CSS文件,將它們合併,並僅加載網站可見部分所需的CSS。 這可能會影響您網站的外觀,因此您需要在多種設備和屏幕尺寸上徹底測試您的網站。

接下來,您需要滾動到“ JavaScript文件”部分。 從這裡,您可以檢查所有選項以最大程度地提高性能。

JavaScript優化

您可以像合併CSS一樣縮小和合併JavaScript文件。

您也可以阻止WordPress加載jQuery Migrate文件。 它是WordPress加載的腳本,以使用舊版本的jQuery為插件和主題提供兼容性。

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

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

優化JavaScript交付

這些選項會延遲加載不必要的JavaScript,並且jQuery安全模式允許您為可能內聯使用jQuery的主題加載jQuery。 如果確定您的主題在任何地方都沒有使用內聯jQuery,則可以取消選中此選項。

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

之後,您可能還想清除WP Rocket中的緩存,然後再使用Google Page Speed Insights測試您的網站。

在我們的測試站點上,我們能夠在台式機上獲得100%的分數,並且在移動和台式機上的分數都解決了渲染阻止問題。

修復了渲染阻止問題,以實現完美的頁面速度得分

2.使用自動優化功能修復渲染阻止腳本和CSS

對於這種方法,我們將使用一個單獨的插件,專門用於改善您網站的CSS和JS文件的傳遞。 儘管此插件可以完成工作,但它沒有WP Rocket擁有的其他強大功能。

您需要做的第一件事是安裝並激活Autoptimize插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,您需要訪問 設置»自動優化 頁面以配置插件設置。

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

在自動優化中優化JS文件

接下來,向下滾動到“ CSS選項”框,然後選中“優化CSS代碼”選項。 確保未選中“聚合CSS文件”選項。

在自動優化中優化CSS

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

繼續並使用Page Speed Insights工具測試您的網站。 在我們的演示站點上,我們能夠使用這些基本設置解決渲染阻止問題。

使用Autoptimize插件修復了WordPress中的渲染阻止問題

如果仍然存在渲染阻止腳本,則需要返回到插件的設置頁面,並查看JavaScript和CSS選項下的選項。

例如,您可以允許插件包含內聯JS並刪除默認情況下不包含的腳本,例如seal.js或jquery.js。

單擊“保存更改並清空緩存”按鈕以保存您的更改並清空插件緩存。

完成後,請繼續使用Page Speed工具再次檢查您的網站。

它是如何工作的?

Autoptimize會匯總所有排隊的JavaScript和CSS。 之後,它會創建縮小的CSS和JavaScript文件,並以異步或遞延方式將緩存的副本提供給您的網站。

這使您可以修復渲染阻止腳本和样式問題。 但是,請記住,它也會影響網站的性能或外觀。

故障排除

根據插件和WordPress主題使用JavaScript和CSS的方式而定,完全解決所有阻止渲染的JavaScript和CSS問題可能會非常困難。

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

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

但是,要找出需要顯示在折疊內容上方的CSS代碼可能非常困難。

我們希望本文能幫助您學習如何在WordPress中修復渲染阻止JavaScript和CSS。 您可能還需要查看我們的入門指南,了解如何為初學者提高WordPress性能,以及我們與最佳託管WordPress託管公司的比較。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。