刪除 WordPress 中未使用的 CSS 的正確方法

擁有大量未使用的代碼會大大降低您的網站速度。 WordPress 中常見的嫌疑人之一是不必要的 CSS 代碼。 幸運的是，有幾種方法可以防止您的網站性能不佳並停止破壞用戶體驗。 雖然一種方法是手動方法，但它需要大量的開發經驗。 另一個對初學者更友好的選擇是專注於現有工具並刪除 WordPress 中由主題和插件添加的未使用的 CSS，只需單擊幾下即可。

如何成功刪除 WordPress 中未使用的 CSS

您可能知道，WordPress 使用了許多插件、主題和其他第三方庫。 它們都帶來了許多功能來改善您的網站功能。 但是，大多數情況下，大多數都帶有大量您實際上不使用的功能。 然而，如果您不專門使用 WordPress 專業人員來維護和優化您的網站，它將為每個訪問者加載所有內容。 這會導致傳輸大量未使用的 CSS 並減慢網站本身的速度。 因此，性能不佳會減少您的網站流量並降低您的搜索排名。

在許多情況下，刪除 100% 未使用的代碼非常困難，幾乎是不可能的。 但即使刪除最少量或衝突的腳本，也會提高您的網站性能。 除了典型的代碼“最小化”之外，還有幾種方法可以在不破壞您的網站的情況下減少未使用的 CSS 代碼的影響。

為什麼未使用的 CSS 還在那裡？

因為 CSS 負責設置 WordPress 網站外觀的樣式，所以您可以找到的每個主題都包含它。 不僅主題，而且許多插件都有自己的樣式和自定義選項。 更不用說各種網站構建器、庫，甚至是單個元素，您只使用其中的一小部分。 一般來說，一些插件不會對網站產生太大影響。 但是，如果有很多，累積效應真的會減慢您的網站。

刪除未使用 CSS 的工具

雖然有許多工具可以幫助您刪除未使用的 CSS，但大多數工具並不適用於所有情況。 當然，對於靜態網站，它們中的大多數都會很有幫助。 但是，動態網站通常通過使用 JavaScript 注入 CSS 類來加載和設置元素。 這是更難的部分，因為很難檢測到這些類。 例如，動態樣式產品和購物車頁面的電子商務網站。

在開發過程中考慮它

從一開始就擺脫未使用的 CSS 的一種解決方案是在網站開發期間考慮它。 您基本上可以將 CSS 代碼拆分為不同的文件，每個文件都有特定的用途。 但是，大多數人更喜歡使用 WordPress 主題來避免從頭開始構建網站。 這就是您必須非常熟練或找到 WordPress 專家為您做這件事的地方。

使用 UnusedCSS 在線解決方案

另一種方法是使用像 UnusedCSS 這樣的高級解決方案來輕鬆查找和清理您的 CSS 問題。 這個工具的優點是它能夠掃描你的 JavaScript 文件並蒐索注入。 它的一些最顯著的特點是：

• 自動查找未使用的 CSS 規則
• 為您提供乾淨的 CSS 供下載
• 探索響應式設計和媒體查詢規則
• 檢查網站是否有更改
• 更改預覽
• 和更多

PurgeCSS 用於刪除額外的 CSS

這是另一個在開發過程中非常有用的工具。 那些使用 Bootstrap、Foundation 和類似 CSS 框架的人會發現它非常有用。 由於您可能只使用了一小部分 CSS 規則，因此該工具可以幫助您過濾掉所有未使用的樣式。 基本上，這是使您的 CSS 文件顯著減小的好方法。

自動優化插件

下一個是非常流行的 WordPress 插件。 有了它，您可以輕鬆地縮小、組合和緩存樣式。 它在頁眉中註入必要的規則、內聯關鍵 CSS、縮小 HTML 並將腳本移動到頁腳。 本質上，它可用於實現圖像的“延遲加載”、優化字體和異步非組合 JavaScript。 每個網站都可以從這個廣泛的插件中受益。

WP火箭

您可以找到的最適合初學者的選項之一。 WP Rocked 為您的頁面和速度優化提供有效的解決方案。 它不僅可以讓您在速度測試中獲得滿意的結果，而且可以明顯改善訪問者的用戶體驗。 當您想刪除未使用的 CSS 時，只需激活它，打開“文件優化”並繼續“優化 CSS 交付”選項。 它將為您提供一個僅包含必要的 CSS 規則的 CSS 文件，該文件將在其他文件之前加載。 此外，WP Rocket 將自動清除緩存，並允許您縮小和聚合 CSS 文件。

使用 Asset CleanUp 刪除未使用的 CSS

您可以使用 Asset CleanUp 從主題和插件中卸載未使用的文件。 它允許您分別為每個頁面完成此任務。 雖然這有點複雜且耗時，但它是一種非常有效的使用方法。 就像其他一些插件一樣，它具有“測試模式”選項，以防止對您的實時網站產生不良影響。 但是，資產清理也可以幫助您刪除未使用的 JavaScript 文件。 最後，當您測試訪問者看到的內容時，您可以簡單地選擇卸載所有不必要的內容。

使用 Perfmatters 優化你的 CSS

此列表中最後但並非最不重要的是高級性能插件之一。 Perfmatters 將幫助您刪除未使用的 CSS 和 JavaScript。 註冊、安裝和激活後，您將能夠訪問其腳本管理器。 除其他選項外，這可以幫助您輕鬆修改每個頁面或帖子。 本質上，它為您提供了一個簡單的儀表板菜單，您可以使用它來刪除單獨頁面或整個網站上任何未使用的 CSS 和 JavaScript。 就像 CSS 一樣，您可以使用它來組合或縮小 JavaScript 文件以獲得更好的性能。

提高網站速度的其他注意事項

考慮使用 CDN 來交付 CSS 文件——以顯著降低 CSS 或任何其他文件的加載速度。

定期縮小和合併大部分 CSS 文件——從 WordPress 中的 CSS 中刪除不必要的規則、類和多餘字符。 但是，由於代碼的複雜性、此類文件的大小以及後續的額外優化，這是否對所有大型網站都有幫助是有爭議的。

完全刪除 WordPress 中未使用的 CSS 的每一部分幾乎是不可能的。 但是，您可以使用上述方法相當公平地加速您的網站。 這取決於案例的數量，但如果您的 WordPress 網站確實有大量未使用的代碼，那麼差異將非常明顯。 另一方面，有時即使是很小的變化也可能意味著一切。 雖然目標不是擁有世界上最快的網站，但細微的變化很重要。 但是，其他努力應該集中在內容和對用戶的有用性上，而不是在搜索引擎測試中贏得最高速度的位置。