如何修復WP Rocket移除未使用CSS功能無效問題

WP Rocket是最流行的WordPress網站快取外掛。僅作為高階版，它們支援超過200萬個網站，以加快和改善頁面載入時間。

在您的站點上安裝並啟用後，該外掛將自動快取內容並減少手動配置所需的大量手動工作。

但是，刪除未使用的CSS是一個beta功能，可能會給您帶來問題。如果您堅持並且無法使用刪除未使用的CSS功能，這裡有一些您可以嘗試解決問題的想法。

瞭解使用和未使用的CSS

早些時候，速度優化主要集中在延遲頁面載入的JavaScript檔案上。然而，谷歌的Core Web Vital完全改變了情況，現在的重點是改善使用者體驗，最終應該會提高速度。為此，您必須通過刪除在首屏內容下方載入所需的不必要程式碼來優化網站每個頁面的首屏內容。

例如，您可能會在頁面底部顯示一個漂亮的時事通訊小工具。但是您用於此小工具的外掛或主題將載入頁面標題部分所需的CSS檔案。傳統上這很好，因為CSS檔案總是包含在標題部分中。現在，專注於使用者體驗，Google PageSpeed Insights會在初始載入頁面時警告您有未使用的CSS。問題是您需要開發人員或後端技能來手動分析above the fold並將未使用的CSS推遲到以後載入。當您有不同的頁面佈局（如文章、頁面、WooCommerce產品和自定義文章型別）時，這將更加複雜。您必須分析站點上的每個頁面並刪除未使用的CSS，而WP Rocket只需在管理儀表盤中單擊幾下即可完成此操作。

刪除未使用的CSS的好處

它只是減少了CSS檔案，從而減少了對伺服器的HTTP請求的頁面大小。除此之外，刪除未使用的CSS將有助於修復PageSpeed Insights工具中的以下專案。

• 減少未使用的 CSS
• 移除渲染阻塞資源

由於未使用的CSS導致的渲染阻塞問題

它還可以幫助使用較小的摺疊樣式更快地載入最大的內容繪畫。

請記住，刪除未使用的CSS本質上意味著在每個頁面上僅收集和保留使用的CSS。所以，不要混淆“使用”和“未使用”這兩個術語。

如何修復WP Rocket刪除未使用的CSS功能不起作用的問題？

要刪除未使用的CSS，請轉到“設定 > WP Rocket > File Optimization”部分。本部分包含兩個子部分，用於優化您網站上的CSS和JS檔案。向下滾動並檢查“CSS File”下的“Optimize CSS delivery”部分。您將找到兩種優化CSS交付的方法，並且一次只能使用一個選項。

• 刪除未使用的CSS（測試版）——我們將專注於這個選項。
• 非同步載入CSS – 這是為您的頁面生成關鍵CSS。在我們關於如何在WordPress中生成關鍵CSS的文章中瞭解更多資訊。

您可以選擇“刪除未使用的CSS”按鈕並向下滾動到底部以儲存更改。現在，該過程將執行並顯示一個進度條，如下所示。

刪除WP Rocket中未使用的CSS程序

在3.11.x版本中，WP Rocket人員更改了刪除未使用的CSS工作的方式，並弄亂了WooCommerce的操作排程程式和日誌。這將使操作排程程式表的大小以GB為單位增長。您可以更新到他們的最新版本來解決這個問題並手動刪除不必要的表條目。現在，該外掛將首先為主頁生成使用的CSS，然後每60秒處理每100個URL。

WP Rocket處理或使用的CSS

您將在儀表盤中看到指示服務正在執行並處理您的頁面的訊息。

刪除在後臺執行的未使用的CSS

使用WP Rocket刪除未使用的CSS的問題

在WP Rocket中使用此功能時，您可能面臨或需要了解三個主要挑戰：

• 第一個問題是很多時候進度條會卡在中間，這個過程永遠不會完成。由於這是一個後臺程序，即使您離開設定頁面，它也會繼續執行。使用最新版本時，不會向使用者顯示該過程已完成。幾天後我們與Google PageSpeed進行了檢查，仍然發現警告正在顯示，而WP Rocket沒有任何訊息是否完成工作。
• 其次，在成功構建使用過的CSS樣式後，您可能會發現佈局突然被破壞。這是由於您在網站上進行的手動更改或WP Rocket本身的自動操作。
• 第三，即使使用最新版本的外掛，WP Rocket表（如下面第5點所述）仍將繼續增長。
• 最後，很少有特定的元素會損壞，而其他部分會正確載入。您可以在排除列表中為那些損壞的元素新增CSS選擇器或樣式表URL以解決問題。

讓我們解釋涵蓋上述兩個問題的所有可能情況以及可能的修復。

1、雲服務慢

WP Rocket使用他們的雲伺服器執行刪除未使用的CSS程序。這確實是一個複雜的過程，總結如下：

• 從您的每個頁面收集所有CSS/JS檔案。
• 傳送到他們的雲伺服器以處理檔案並識別CSS選擇器。
• 收集的CSS樣式將與頁面的HTML進行比較，並分類為已使用或未使用。
• 將已使用和未使用的CSS儲存在資料庫表中。
• 最後，使用的CSS將被內聯檢索以修復PageSpeed Insights問題。

因此，當您擁有數千個頁面和不同的文章型別時，可能需要很長時間。有時，他們的雲服務永遠不會響應，導致進度條長時間停留在相同的百分比。此外，您的請求將在佇列中提交，所需時間取決於佇列中已處理的請求數量。如前所述，WP Rocket支援超過200萬個站點，並且使用的CSS生成過程會在每個站點上30天后自動執行。因此，您的請求有可能在佇列中並且需要時間。

您可以在這裡做的是簡單地禁用該選項並儲存您的更改。等待一段時間，然後再試一次，看看是否有效。避免，不斷切換此功能以防止向處理佇列傳送多個請求。它只會進一步延遲該過程，並且不會幫助您快速完成。如前所述，現在他們通過每60秒自動處理100個URL來控制此計劃。但是，使用者端不會停止開啟或關閉該功能。因此，請避免開啟和關閉此功能，並等待一段時間檢查結果。

2.允許WP Rocket IP地址

WP Rocket雲伺服器IP地址為135.125.83.227。在極少數情況下，您可能會攔截此IP，這將導致CSS生成過程失敗。請記住，您可以攔截IP範圍，例如 135.*.*.* 或 135.125.*.* 或 135.125.83.*。在所有這些情況下，該過程都會失敗，您需要刪除IP攔截才能訪問他們的伺服器。

3. 啟用Cron作業

如前所述，刪除未使用的CSS程序將使用預設的WordPress cron作業 (WP-Cron) 在後臺執行。該過程將在有人訪問該頁面的60秒後執行，並且每30天自動重新構建使用的CSS樣式。所有這些都使用WP-Cron並確保您沒有在您的網站上禁用此功能。許多使用者和開發人員禁用了WordPress中的預設WP-Cron，因為它會減慢管理部分的速度。在這種情況下，您可以設定自己的cron作業以確保WP Rocket可以使用它。

如果您感到困惑，有一個WP-Cron Status Checker外掛可以幫助您通知cron在您的站點上不工作。該外掛將每24小時執行一次，以檢查您網站上執行的WP-Cron的狀態。在自己的cron作業和外掛檢查的情況下，您需要了解頻率會影響您的CSS生成過程。當您懷疑cron沒有在您的站點上執行時，首先確保它可以正常工作，然後再嘗試在WP Rocket外掛的設定頁面中啟用刪除未使用的CSS選項。

您還可以諮詢您的託管公司，以確認WP-Cron正在執行並且沒有在您的站點上被禁用。如果您使用Cloudflare，請了解有關解決使用Cloudflare導致WP-Cron不工作問題的更多資訊。

4. 更新後清理使用的CSS

當您啟動該過程時，WP Rocket將立即開始顯示一個用於清除已使用CSS的新選單項。您可以在“WP Rocket > Clear Used CSS”下的頂部管理欄中看到這一點。單擊此選單將從資料庫表中刪除所有儲存的使用過的CSS樣式。

清除使用的CSS

• 在更改主題、安裝新增樣式的附加外掛、使用主題面板或定製器手動新增CSS時，您應該刪除使用的CSS。否則，您將看到佈局損壞，表明您使用的CSS無法正常工作。在這種情況下，CSS生成將自動執行，並且沒有選項供您驗證是否成功完成。因此，在WP Rocket中使用刪除未使用的CSS選項時，請確保經常測試您的網站。否則，由於您的操作或 WP Rocket 外掛的自動 CSS 重建，佈局會突然中斷。
• 當您在生成CSS時卡在進度條（或發現錯誤出現在Google PageSpeed中）時，請先清除您使用的CSS並禁用優化CSS交付選項。驗證上述第2點和第3點並等待一段時間再重試。雖然重新構建CSS可能需要額外的時間，但它有助於確認您方面沒有問題。

5. 清空後端WP Rocket表

僅在WP Rocket中啟用刪除未使用的CSS功能並不止於此。它可以隨時通過更新產生問題，您可以使用“清除未使用的CSS”並重建已使用的CSS，如上面第4點所述。但是，由於WP Rocket建立的大型後端表，可能會發生問題。WP Rocket將建立兩個資料庫表，您可以使用 phpMyAdmin、Adminer或任何其他資料庫管理工具檢查它們。

• wp_ wpr_rucss_resources – 所有CSS和JS檔案（WP Rocket每30天檢查一次並從該表中刪除未使用的CSS）
• wp_wpr_rucss_used_css – 使用的CSS

當您的主題或外掛使用許多CSS和JS檔案時，資源表可能會很大。同樣，當您為移動裝置啟用單獨的快取時，使用的CSS表會快速增長。儘管您不會在PageSpeed中看到減少未使用的CSS警告，但較大的表格大小將直接影響您網站的效能。您可以檢視在GitHub中針對該主題開啟的問題。以下是那裡註冊的投訴之一，提到由於此問題，資料庫大小從8MB變為800MB。

GitHub中WP Rocket刪除未使用的CSS問題

這個問題可能是由於頁面構建器外掛（如Elementor）、動態廣告指令碼和為單個頁面使用自定義CSS的主題而發生的。這裡的解決方案是禁用單個頁面上的動態內容或手動清空資料庫表，以便外掛重新構建。您只需單擊MySQL資料庫表中的“清空”選項並確認彈出視窗即可刪除其內容。

空資料庫表內容

請注意，當您從設定中停用刪除未使用的CSS功能時，WP Rocket不會刪除這些表條目。如果您決定從您的網站中刪除它，請檢視我們關於如何完整刪除WP Rocket外掛的教學。

6. 檢查您的安全外掛

嘗試啟用刪除未使用的CSS功能時，您的安全外掛可能會攔截WP Rocket伺服器。通常，安全外掛應用防火牆來保護站點免受惡意攻擊。它可能會攔截WP Rocket並停止使用的CSS生成過程。因此，當您發現刪除未使用的過程不起作用時，請禁用您的防火牆設定並再次檢查。如果可行，那麼您可以在防火牆設定中將WP Rocket服務列入白名單。

像Wordfence這樣的外掛提供了一種學習模式來執行任何所需的操作，以便外掛在您以後啟用防火牆設定時學習並且不會阻止請求。但是，該過程可能會根據您使用的安全外掛而有所不同，您可能需要諮詢外掛開發人員以修復防火牆問題。

7. 使用CSS安全列表

這是一個不同的問題，因為該過程將在設定頁面中完成，但由於刪除CSS樣式，您的網站佈局將被破壞。例如，當您刪除未使用的CSS時，WP Rocket將使用搜尋和過濾功能破壞資料表。

• 在這種情況下，右鍵單擊頁面並在Developer Tools中檢查損壞的元素。
• 找到元素所需的CSS樣式表。
• 通過排除域名貼上CSS檔案的URL。
• 儲存您的更改並重新生成使用過的CSS。

假設您發現以下URL引起了問題：

https://yoursite.com/wp-content/plugins/my-plugin/css/123.css

您需要在CSS安全列表框中輸入以下 URL：

/wp-content/plugins/my-plugin/css/123.css

也可以像下面這樣使用萬用字元來排除資料夾中的所有CSS檔案來刪除樣式。

/wp-content/plugins/my-plugin/css/(.*).css

小結

WP Rocket的人大力宣傳他們的外掛，稱這將有助於提高Core Web Vitals和PageSpeed Insights得分。主要是刪除未使用的CSS、延遲載入JS和媒體檔案，您可以獲得好成績。但是，他們不會告訴你的是，當有問題時，他們不會支援你。特別是，你會遇到“刪除未使用的CSS”背後如此複雜的邏輯問題。該功能多年來也處於測試階段，但並未提醒它會構建龐大的資料庫表。如果您遇到困難，請嘗試上述修復並檢查它是否有幫助。否則，您需要登入您的WP Rocket帳戶以提出票證並等待很多天才能得到他們的回覆。簡而言之，您需要禁用該功能並嘗試“非同步載入CSS”或尋找替代選項。

即使在使用WooCommerce操作排程程式後使用最新版本的外掛，資料庫表的大小仍然很大。如果這是您想要購買WP Rocket外掛的唯一功能，我們強烈建議您不要購買並檢查其他外掛，例如Perfmatters。雖然過程與Perfmatters相同，但它不使用資料庫表。相反，它將快取儲存在易於處理的單獨資料夾中。