未使用的 CSS 規則堆積：Coverage 面板盤點與清理流程

作者：平白設計編輯部｜發布與最後查證：2026-09-30｜適用：台灣（中華民國）｜技術資訊，不保證搜尋排名

十月連假前品牌常為促銷活動新增大量視覺樣式，但活動結束後舊的 CSS 選擇器若未清除，會讓樣式表不斷膨脹。這些未被使用的規則會佔用下載頻寬並延長渲染阻塞時間。本文介紹如何透過 Chrome DevTools 的 Coverage 面板找出冗餘程式碼，並提供安全的清理流程。這屬於技術檢查步驟，不保證 Core Web Vitals 分數或搜尋排名提升。

文章重點

• 十月連假促銷後舊樣式易殘留導致檔案臃腫
• 未使用 CSS 會延長渲染阻塞影響首次內容繪製
• 用 Coverage 面板錄製載入過程觀察紅色佔比
• 拆分活動專屬樣式避免直接刪除共用元件庫

促銷檔期後的樣式殘留問題

每年十月連假前後，品牌網站為了配合秋季促銷活動，通常會在短時間內新增許多視覺樣式。這些樣式可能包含限時橫幅、倒數計時器的動畫效果，或是特定商品的標籤配色。開發人員為了趕上檔期，往往會將新規則直接寫進主樣式表裡。

當活動結束、頁面下架後，這些針對單一檔期撰寫的 CSS 選擇器卻經常被遺忘在原始碼中。隨著每個季度不斷疊加，主樣式表的體積會越來越龐大。這不僅增加維護難度，也讓瀏覽器每次載入頁面時都必須下載一堆根本用不到的規則。

這種情況在快速迭代的行銷網站特別常見。就像 改版後 favicon 路徑怎麼抽樣 這類細節需要定期盤點一樣，樣式表的清理也應該排進每次改版後的標準檢查清單中，才能避免無效程式碼持續堆積。

未使用 CSS 對渲染的影響

瀏覽器在繪製畫面之前，必須先下載並解析所有連結的 CSS 檔案，這個過程稱為渲染阻塞。即使某些選擇器在當前頁面完全沒有對應的 HTML 元素，瀏覽器仍然得把它們讀完才能繼續往下執行。這代表檔案越大，等待時間就越長。

首次內容繪製（FCP）是衡量使用者何時能看到畫面的關鍵指標。當樣式表裡塞滿未使用的規則時，下載與解析的時間都會被拉長，直接推遲 FCP 的觸發時機。尤其在行動網路環境下，這種延遲會讓使用者感受更加明顯。

縮減關鍵資源的大小是改善載入體驗的基本功。除了清理 CSS，也可以同步檢查其他資源是否正確設定，例如參考 改版後 og:locale 怎麼抽樣 來確認中繼資料的一致性，確保整體前端架構維持乾淨。

module.exports = {
  content: ['./src/**/*.html', './src/**/*.js'],
  css: ['./src/styles/main.css'],
  safelist: ['is-active', 'js-slider', 'promo-banner'],
  output: './dist/styles/clean.css'
};

Coverage 面板的操作流程

Chrome 開發者工具內建的 Coverage 面板是排查未使用 CSS 最直接的工具。開啟方式很簡單：按下 Ctrl+Shift+P 叫出指令選單，輸入「Show Coverage」即可啟動面板。點擊左側的重新整理圖示就能開始錄製頁面載入過程。

錄製完成後，面板會列出所有載入的樣式表，並以綠色和紅色區塊顯示使用狀況。綠色代表該段 CSS 在當前頁面有被使用，紅色則是完全沒用到的規則。點擊任一檔案還能展開檢視具體哪些選擇器被標記為紅色。

操作時要注意，Coverage 只反映「當下這次載入」的狀態。如果你的網站有多種版型或互動狀態（例如展開選單、切換分頁），需要逐一觸發這些狀態再觀察結果。建議搭配 改版後 web manifest 怎麼抽樣 等流程一起建立完整的改版後檢查清單。

安全清理與拆分策略

發現大量紅色區塊後，千萬不要直接全選刪除。最穩妥的做法是先區分「全站共用」與「活動專屬」的樣式。對於只在特定促銷頁使用的 CSS，應該將它們拆分成獨立檔案，讓該頁面按需載入，而不是全部塞進主樣式表裡。

如果專案使用建構工具，可以透過 PurgeCSS 或 UnCSS 這類套件在建置階段自動移除未使用的選擇器。不過這些工具依賴靜態分析，遇到 JavaScript 動態生成的類別名稱時可能會誤刪，因此必須在設定檔中保留白名單。

另一種策略是利用媒體查詢的 lazy loading 特性，將非關鍵樣式的 media 屬性設為不符合當前條件的值，讓瀏覽器以低優先順序下載。這樣既不會阻塞渲染，也能在需要時自動套用，兼顧效能與功能完整性。

共用元件庫的誤判陷阱

現代前端框架常使用共用元件庫，同一個按鈕元件可能在首頁、商品頁、結帳頁呈現不同狀態。Coverage 面板在單一頁面錄製時，只會看到當前頁面用到的類別，其他狀態的樣式就會被標記為紅色，造成「未使用」的假象。

要避開這個陷阱，清理前必須做全站交叉比對。可以寫簡單的腳本爬取所有頁面的 HTML，收集實際出現過的類別名稱，再跟樣式表裡的選擇器做交集。只有確定全站都沒用到的規則，才列入可安全移除的名單。

另外也要注意第三方套件注入的樣式。有些外掛會在初始化時動態加入類別，這些在靜態 HTML 裡看不到，Coverage 也可能漏抓。保持一份完整的樣式來源清單，才能在瘦身過程中避免意外破壞既有功能。

常見問題

Coverage 面板的紅色區塊可以直接刪除嗎？

不行。紅色只代表在當前錄製狀態下未被使用，若網站有其他頁面或互動狀態會用到這些樣式，直接刪除會導致版面跑掉。必須先做全站交叉比對。

為什麼清理後 FCP 沒有明顯改善？

FCP 受多種因素影響，CSS 大小只是其中之一。伺服器回應速度、圖片載入策略、JavaScript 執行時間都可能成為瓶頸，需全面排查而非只看樣式表。

PurgeCSS 會不會誤刪需要的樣式？

有可能。PurgeCSS 透過靜態分析 HTML 來判斷類別是否存在，若類別是由 JavaScript 動態生成或來自第三方套件，就可能被誤刪。需在設定檔中加入白名單保護。

多久應該做一次 CSS 清理？

建議在每次大型促銷活動結束後，或每季固定排程進行一次。搭配版本控制系統，可以在清理後快速回溯，降低風險。

重點摘要

1. 促銷活動後應立即盤點並清理殘留的 CSS 規則
2. Coverage 面板能直觀顯示各檔案的未使用佔比
3. 拆分活動樣式為獨立檔案可有效減少主表體積
4. 清理前務必全站交叉比對以避免誤刪動態類別

延伸閱讀

• 改版後 favicon 路徑怎麼抽樣
• 改版後 og:locale 怎麼抽樣
• 改版後 web manifest 怎麼抽樣