如何刪除 WordPress 中未使用的 CSS(正確方法)


您想刪除 WordPress 中未使用的 CSS 以便您的網站加載速度更快嗎?

未使用的 CSS 是由您的 WordPress 主題或插件添加的您並不真正需要的任何 CSS 代碼。 刪除此 CSS 代碼可提高 WordPress 性能和用戶體驗。

在本文中,我們將向您展示如何在不破壞網站的情況下輕鬆刪除 WordPress 中未使用的 CSS。

刪除 WordPress 中未使用的 CSS

什麼是 WordPress 中未使用的 CSS?

WordPress 中未使用的 CSS 是加載到您網站上但實際上並不需要用於顯示頁面的 CSS 代碼。

額外的代碼會使訪問者的瀏覽器需要更長的時間來呈現頁面,從而造成糟糕的用戶體驗。 較慢的加載時間甚至會影響您的搜索排名,從而導致您網站的流量減少。

您可以使用 Google Pagespeed Insights 查看未使用的 CSS 代碼如何影響您的網站。 它將向您顯示一個標題為“刪除未使用的 CSS”的部分,其中詳細說明了哪些 CSS 文件正在影響您的加載時間。

Google Pagespeed Insights 中未使用的 CSS 代碼問題

為什麼在 WordPress 中添加了未使用的 CSS?

CSS 用於設計 WordPress 網站的外觀。 您的 WordPress 主題包含 CSS,其中大部分包含在單個 style.css 文件中。

除了主題的 CSS 之外,您的 WordPress 插件還將加載自己的 CSS。 例如,WooCommerce 將加載 CSS 以顯示產品,頁面構建器插件將添加自己的 CSS 以顯示您的自定義頁面,而表單構建器插件將包含 CSS 以設置表單樣式。

然後,您的網絡字體、圖標字體和其他元素也需要添加自己的 CSS 文件。

通常,這些文件非常小並且加載速度很快。 但是,如果您的 WordPress 網站有很多這樣的網站,那麼這些影響就會累積起來,並對您的網站速度產生顯著影響。

如何刪除 WordPress 中未使用的 CSS?

有幾種不同的方法可以減少 WordPress 網站上未使用的 CSS。

但是,要完全刪除 WordPress 中所有未使用的 CSS 將是一項艱鉅的任務。 由於 WordPress 在幕後工作的方式,一些未使用的 CSS 可能很難找到和刪除。

也就是說,我們將向您展示兩種刪除未使用 CSS 的方法,您可以選擇最適合您的一種。

方法 1. 使用 WP Rocket 刪除 WordPress 中未使用的 CSS

這種方法比較簡單,推薦給初學者。 它極大地改善了 WordPress 網站上 CSS 文件的整體交付,包括刪除大部分未使用的 CSS。

我們認為它是初學者的最佳解決方案,因為它更容易並且實現了為您的用戶提供更好體驗的主要目標。 這意味著您的網站在速度測試工具上加載速度很快,並且您的用戶感覺也很快。

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

激活後,您需要訪問 設置 » WP火箭 頁面並切換到“文件優化”選項卡。

WP Rocket 中的文件優化

接下來,您需要向下滾動到 CSS 文件部分。 從這裡,您需要選中“優化 CSS 交付”選項旁邊的框。

優化 WP Rocket 中的 CSS 交付

此選項會生成一個 CSS 文件,該文件僅包含顯示網站可見部分所需的 CSS 代碼。 它首先加載該文件,向訪問者顯示該頁面,然後使用稱為延遲加載的技術加載其他 CSS 文件。

通過刪除這種阻止渲染的 CSS,與在頁面顯示之前必須加載所有 CSS 文件相比,用戶可以更快地查看您的網站。

啟用“優化 CSS 交付”選項後,單擊“保存更改”按鈕並等待 WP Rocket 為您的所有帖子和頁面生成必要的 CSS 文件。 它還會自動清除您網站的緩存。

完成後,您可以繼續使用 Google Pagespeed Insights 再次測試您的網站性能。

額外的文件傳輸調整以提高性能

WP Rocket 還允許您從靜態文件中刪除查詢字符串、合併 Google 字體文件並縮小 HTML。 所有這些調整都為您的整體速度帶來了微小的改進,從而為您的訪問者帶來了更快的加載體驗。

基本文件優化

您還將看到用於縮小和合併 CSS 文件的選項。 這些選項將減少 HTTP 請求並為您提供額外的速度提升。

但是,您需要仔細檢查您的網站,以確保啟用這些設置後沒有任何問題。

縮小和合併 CSS 文件

此外,您可以對網站上的 JavaScript 文件應用相同的優化。 您可以縮小和組合它們以作為單個文件並延遲 JavaScript 文件的加載以提高性能。

優化 JavaScript 交付

有關更多詳細信息,請參閱有關如何在 WordPress 中正確設置 WP Rocket 的分步教程。

方法 2. 使用 Asset CleanUp 刪除 WordPress 中未使用的 CSS

這種方法有點先進但非常強大,可以讓您輕鬆地從 WordPress 網站的任何頁面中刪除任何未使用的 CSS。

但是,它有點複雜,您需要徹底測試您的網站功能和外觀,以確保沒有損壞。

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

激活後,您需要訪問 資產清理 » 設置 頁並切換到測試模式選項卡。 從這裡,您需要打開“啟用測試模式”選項。

啟用測試模式選項

這允許您嘗試不同的設置並以管理員身份進行測試,而不會影響網站訪問者。

之後,您需要訪問 資產清理 » CSS/JS 管理器 頁。 從這裡,您可以逐頁卸載不需要的 CSS 和 JavaScript 文件。

CSS/JS 管理器

它將首先獲取您的主頁,並向您顯示該頁面上加載的所有 CSS 和 JavaScript 文件。

您需要向下滾動並查看加載的文件。 如果您看到不需要的文件,則可以針對該特定頁面、帖子類型或站點範圍卸載該文件。

卸載文件

該插件還允許您從此處選擇特定的帖子或頁面,或者您可以通過像往常一樣編輯帖子或頁面來訪問相同的選項。

在帖子編輯屏幕上,您會在帖子編輯器正下方找到資產清理框。

帖子編輯器內的資產清理

當訪問者在您的網站上查看此頁面時,該插件將自動獲取並列出加載的所有文件和資產。 然後,您可以簡單地卸載該頁面上不需要的未使用的 CSS 或 JavaScript 文件。

卸載特定頁面的文件

重要的: 不要忘記在刪除任何未使用的 CSS 或 JavaScript 後測試您的網站,以確保一切正常。

完成卸載和刪除未使用的 CSS 和 JavaScript 文件後,您可以返回插件的設置頁面並關閉“測試模式”。

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

您現在可以使用 Google Pagespeed Insights 測試您的網站,以查看未使用的 CSS 通知中的更改。

WordPress 中的 CSS 減少

我們希望本文能幫助您了解如何輕鬆刪除 WordPress 中未使用的 CSS。 您可能還想遵循我們關於構建網站的成本的完整指南,並查看我們的最佳管理 WordPress 託管列表。

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