在使用 PageSpeed Insights 檢查網站性能時，常常會看到“減少未使用的 CSS”和“縮減 CSS”這樣的優(yōu)化建議，特別是在沒有進行過性能優(yōu)化的網站上，這兩項建議幾乎總是出現(xiàn)在報告中。
為什么會出現(xiàn)這種情況呢？原因在于，我們在建設網站時所使用的 WordPress 主題和插件，為了滿足更廣泛的需求，往往會內置大量適配不同場景的 CSS。這樣的設計雖然在功能實現(xiàn)上很靈活，但對網站性能來說，卻意味著許多我們并不需要的 CSS 會被加載到頁面上，導致頁面加載變慢，從而影響網站的整體速度，并觸發(fā) PageSpeed Insights 提出的優(yōu)化建議。
怎么減少未使用的CSS
對于不熟悉技術的站點運營者，PageSpeed Insights 通常會給出一個簡單的建議：“減少或改變加載未使用 CSS 的 WordPress 插件數量”。這個方法雖然簡單有效，但對于大部分網站來說，插件往往是必須的。而在使用多功能高級主題時，未使用的 CSS 更可能來源于主題本身，而非插件。
如果希望從根本上減少未使用的 CSS，最有效的做法就是清理主題或插件代碼中的冗余 CSS。對于具備一定技術能力的朋友，可以參考以下步驟進行手動優(yōu)化：
- 分析頁面加載的 CSS：使用瀏覽器開發(fā)者工具（如 Chrome DevTools）查看頁面加載時實際使用的 CSS 和未使用的 CSS。
- 精簡和剔除無用的 CSS 規(guī)則：根據分析結果，刪除頁面中未使用的 CSS 代碼，確保只保留與當前頁面相關的樣式。
- 使用工具自動優(yōu)化：可以使用一些工具，如 PurifyCSS 或 UnCSS，這些工具能夠幫助自動剔除未使用的 CSS 代碼。
- 將 CSS 文件按需加載：根據頁面需求，采用按需加載 CSS 的方式，減少不必要的 CSS 文件加載。
關于減少未使用的CSS的實操指南
本站之前也發(fā)表過一些關于減少未使用的CSS的實操指南，有一定技術能力的朋友可以參考下面的文章嘗試優(yōu)化一下。
使用 Purgecss 刪除WordPress主題中未使用的 CSS 來減小 CSS 文件體積
本文介紹了如何使用Purgecss工具移除WordPress主題中未使用的CSS樣式，以減小CSS文件體積并優(yōu)化前端性能。通過Gulp配置和示例代碼，詳細講解了Purgecss的安裝、使用及注意事項，包括處理動態(tài)生成的CSS類和與Tailwind CSS框架的配合。適合有一定Gulp使用經驗的開發(fā)者閱讀。
反注冊WordPress主題或插件中的 JavaScript 和 CSS 文件
本文介紹了如何在WordPress中反注冊插件加載的JavaScript和CSS文件，以減少不必要的HTTP請求并優(yōu)化網站性能。通過使用wp_deregister_script和wp_deregister_style函數，開發(fā)者可以移除插件中多余的資源文件，從而提升頁面加載速度并避免與主題代碼的沖突。文章還提供了具體的代碼示例，幫助開發(fā)者快速實現(xiàn)這一優(yōu)化措施。
WooCommerce按需加載前端資源 提高頁面打開速度
本文介紹了如何通過按需加載WooCommerce前端資源來提升頁面打開速度。WooCommerce默認的CSS加載方式可能導致不必要的資源加載，影響性能。文章提供了具體的代碼示例，展示如何根據不同的頁面類型（如商品列表頁、購物車頁、結算頁等）加載特定的CSS文件，從而優(yōu)化網站性能。適合需要進行WooCommerce定制開發(fā)的用戶參考。
僅在特定的 WordPress 頁面上按需加載 JavaScript，優(yōu)化頁面性能
本文介紹如何在WordPress中僅在特定頁面上按需加載JavaScript，以優(yōu)化頁面性能和減少服務器開銷。通過使用wp_enqueue_script()函數和條件判斷，可以靈活控制腳本的加載，避免不必要的資源浪費。適合需要優(yōu)化頁面加載速度的WordPress開發(fā)者參考。
為了提升網站性能，減少未使用的 CSS 是關鍵。雖然減少插件數量可一定程度上優(yōu)化，但更有效的方式是手動清理主題或插件代碼中的冗余 CSS。通過工具或手動剔除無用樣式，并按需加載 CSS，可以顯著提升網站加載速度，改善用戶體驗。
