如何刪除 WordPress 中未使用的 CSS（2 個簡單方法）

您安裝的每個主題和插件都會向您的 WordPress 站點添加不必要的 CSS。 這可能會導致加載時間變慢。 通常，在頁面上呈現內容不需要這些樣式表，但它們仍然存在於代碼中。 因此，您可能正在尋找一種簡單的方法來刪除 WordPress 中未使用的 CSS。

幸運的是，這個過程比您想像的要簡單。 一旦識別出網站上不必要的代碼，就可以使用插件將其刪除並提高網站速度。

為什麼你應該刪除未使用的 CSS

未使用的 CSS 是加載頁面實際上不需要的代碼。 對於 WordPress，通常可以在您安裝在網站上的主題和插件中找到它。

然後，當用戶訪問您的網站時，瀏覽器仍然需要下載並呈現這些未使用的 CSS。 這會導致加載時間變長，從而對網站的整體性能產生負面影響。

事實上，未使用的 CSS 會導致 Core Web Vitals 中的 Largest Contentful Paint (LCP) 得分不佳：

Largest Contentful Paint 是衡量頁面完全加載屏幕上最大項目所需時間的指標。 這通常是視覺元素，例如英雄形象。

簡而言之，未使用的 CSS 代碼會使您的頁面膨脹。 因此，加載圖像等內容需要更長的時間。

如果您的網站運行緩慢，您可能會錯失潛在的轉化次數。 另外，它可能會導致搜索結果中的排名較低。 因此，採取適當的措施刪除未使用的 CSS 並加快網站速度非常重要。

如何識別您網站上未使用的 CSS

好消息是識別站點上未使用的 CSS 是一項簡單的任務。 您可以先在 PageSpeed Insights 上運行性能測試。 您所要做的就是輸入您的 URL 並單擊Analyze ：

測試準備就緒後，導航到“機會”部分並查找“減少未使用的 CSS”選項卡。 如果單擊它，您將看到有關此代碼的更多信息：

它還將向您顯示哪些 CSS 文件和插件正在影響您的加載時間：

刪除未使用的 CSS的橙色方塊表示“需要改進”，而紅色三角形表示分數非常低。 如果您在測試結果中看不到此部分，則意味著您的站點上沒有任何嚴重的 CSS 問題（或者至少在您測試的特定頁面上——您可能需要測試其他頁面以確保).

如何刪除 WordPress 中未使用的 CSS

如果 PageSpeed Insights 標記了您網站上未使用的 CSS，您需要將其刪除以優化網站性能。

您可以使用 WordPress 插件為您完成所有繁重的工作。 或者，您可以使用不同的插件，這將需要您進行一些體力勞動，但作為回報，您將更好地控制該過程。 在本節中，我們將引導您完成這兩種方法，從更簡單的開始。

方法 1：使用 Debloat 刪除未使用的 CSS

正如我們所討論的，“未使用的”CSS 並不是必需的。 因此，刪除這些文件不會對您的網頁設計產生任何影響。

但是，如果您不小心刪除了錯誤的代碼，則可能會破壞您的網站。 因此，如果您不熟悉編碼，您可能希望使用插件來刪除未使用的 CSS。

考慮到這一點，我們建議使用 Debloat 來刪除未使用的 CSS 代碼。 它是一個免費的優化插件，還可以通過延遲呈現阻塞資源、縮小代碼等方式幫助您改善核心網絡生命力。

要開始使用，您需要在您的網站上安裝並激活該插件。 然後，轉到Settings > Debloat: Optimize並選擇Optimize CSS 選項卡：

如果您打算刪除未使用的 CSS，您會在頂部看到一條消息，建議您使用緩存插件。 如果您對此感興趣，您可以考慮試用免費工具，例如 W3 Total Cache 或 WP-Optimize。

接下來，向下滾動到頁面底部並選中Remove Unused CSS複選框：

這將顯示其他幾個選項。 但是，如果您不習慣處理代碼，請不要擔心，您只需要選擇幾個設置。

您需要選中Enable for Plugins CSS和Enable for Theme CSS複選框：

然後，向下滾動到Remove CSS On並選擇All Pages的框：

準備就緒後，單擊保存更改。 然後插件將刪除插件和主題文件中未使用的 CSS。

請注意，此方法並非 100% 準確，一些未使用的代碼可能會漏掉。 不過，如果您在啟用這些設置後運行另一次速度測試，您應該會看到網站性能有一些顯著改善。

如果您想使用更強大的插件，您可能需要查看 WP Rocket。 這個高級工具包含優化功能，包括頁面和瀏覽器緩存、GZIP 壓縮、代碼縮小和延遲加載。 它還可以從您的站點中刪除未使用的 CSS。

方法 2：使用 Asset CleanUp 刪除未使用的 CSS

在第一種方法中，我們使用了一個插件，可以自動從您的站點中刪除不必要的代碼。 這種方法非常方便，因為您需要做的就是啟用一些設置。

但是，您可能正在尋找一種方法來更好地控制要刪除的文件和保留的文件。 如果是這樣的話，Asset CleanUp 可能是您更好的選擇。 此插件使您能夠逐頁選擇和刪除不需要的 CSS 文件。

請注意，此方法可能有點耗時，並且可能需要一些技術知識。 此外，您需要不斷測試和刷新每個頁面，以確保您的更改不會影響網站的設計和功能。

第 1 步：安裝 Asset CleanUp 插件並啟用測試模式

如果您仍想嘗試此方法，請繼續並在您的站點上安裝 Asset CleanUp。 然後，轉到Asset CleanUp > Settings 。 之後，從側面菜單中選擇測試模式並使用切換開關啟用此功能：

這樣，您對站點所做的任何更改都不會影響前端的用戶體驗。 您可以在安全的環境中刪除未使用的 CSS 文件，並在確保一切正常後禁用測試模式。

第 2 步：卸載每個頁面上未使用的 CSS 文件

現在，單擊CSS & JS 管理器選項卡。 在這裡，您可以從您的網站中刪除任何不需要的文件，從主頁開始：

如果向下滾動，您將在此頁面上看到所有已加載文件的列表：

要刪除 CSS 文件，您只需要使用此頁面上的卸載切換開關：

Asset CleanUp 將讓您知道是否有任何“子”文件依賴於此文件，並且可能會受到其刪除的影響。 您可以選中忽略依賴性規則框並保持加載“子項”以維護這些文件。

請記住，如果您不確定要刪除哪些 CSS 文件，可以參考 PageSpeed Insights 中的結果。 您將在減少未使用的 CSS部分下看到這些文件的 URL：

然後您可以在 Asset CleanUp 中查找它們。 如果您導航到“頁面”選項卡，您可以在您的網站上查找特定頁面並查看加載到該頁面上的 CSS 文件：

選擇要卸載的文件後，您需要單擊“更新”以保存這些更改。

第 3 步：測試您的網站

最後，我們建議您在每次刪除文件後測試您的網站，以確保其正常運行。 請記住，您需要登錄到 WordPress 管理儀表板才能看到這些更改。 如果您以訪問者身份（即註銷用戶）訪問該站點，您將無法在您的頁面上發現任何問題，因為您啟用了測試模式。

同樣重要的是要注意，只要您啟用了測試模式，您就不會在 PageSpeed Insights 中看到任何改進。 結果仍會顯示未使用的 CSS 文件。

一旦您確信刪除的文件沒有影響您的站點，您就可以繼續並禁用測試模式。 然後，在 PageSpeed Insights 上運行速度測試。 此時，刪除的 CSS 文件不應出現在結果中。

用於刪除未使用的 CSS 的高級 WordPress 插件

雖然上面的兩個工具都是免費的，但如果您願意付費，您還可以找到一些非常簡單的 WordPress 插件來刪除未使用的 CSS。

兩個最好的選擇是 WP Rocket（59 美元起）和 FlyingPress（60 美元起）。

使用 WP Rocket，您可以獲得一鍵刪除未使用的 CSS 功能，該功能可以掃描您的整個站點並逐頁刪除未使用的 CSS。

FlyingPress 還提供了類似的一鍵式未使用 CSS 刪除功能，可以選擇以更優化的方式加載未使用的 CSS 或將其完全刪除。

這兩種工具都依賴於在它們自己的服務器上處理您網站的代碼，這就是它們能夠提供這種簡單的逐頁刪除方法的原因。

一些幫助減少未使用 CSS 的技巧

一旦您刪除了網站上未使用的 CSS（或至少其中的大部分），您將希望避免在將來添加更多不必要的代碼。 在這方面，您可以採取多種措施來保持網站平穩運行。

首先，您需要確保使用的是輕量級主題。 一般來說，輕量級的 WordPress 主題是快速的 WordPress 主題。 簡而言之，您的主題應包含最少的代碼並針對 Core Web Vitals 進行優化。

例如，我們的 Neve 主題優先考慮速度和性能。 事實上，在默認的 WordPress 安裝中，這個主題的加載時間不到 1 秒，文件大小為 28KB：

同樣，您需要為您的站點選擇輕量級插件。 您可以在瀏覽插件時尋找輕量級標籤：

我們建議您在安裝新插件後運行速度測試。 這樣，您就可以檢查它是否包含未使用的 CSS。

此外，您可以嘗試限制您網站上的插件數量。 這可以幫助您提高整體性能，同時最大限度地減少頁面上未使用 CSS 的可能性。

因此，如果您不再需要任何插件，請考慮刪除它們。 請注意，停用它們可能還不夠——它們仍可能加載不必要的代碼並佔用數據庫中的空間。 因此，將它們從您的站點中完全刪除很重要。

立即從您的網站中刪除未使用的 CSS

通過將其從您的站點中刪除，您可以提高 Core Web Vitals 性能並提供更好的用戶體驗。

回顧一下，以下是刪除 WordPress 中未使用的 CSS 的方法：

對於其他一些提高網站核心網絡活力指標的方法，您還可以閱讀我們的指南，了解如何加速 Largest Contentful Paint 以及如何減少 Cumulative Layout Shift。

您對如何刪除 WordPress 中未使用的 CSS 有任何疑問嗎？ 在下面的評論部分讓我們知道！