移除未使用的 CSS

Lighthouse 報表的「商機」部分會列出所有未使用 CSS 的樣式表,因此可能省下 2 KiB 以上。移除未使用的 CSS,減少網路活動消耗不必要的位元組:

Lighthouse 移除未使用的 CSS 稽核的螢幕截圖

未使用的 CSS 如何減緩效能

使用 <link> 標記是為頁面新增樣式的常見方法:

<!DOCTYPE html>
<html>
  <head>
    <link href="main.css" rel="stylesheet" />
    ...
  </head>
</html>

瀏覽器下載的 main.css 檔案稱為外部樣式表,因為該檔案會與使用該格式的 HTML 分開儲存。

根據預設,瀏覽器必須下載、剖析及處理所有外部樣式表,才能在使用者的螢幕顯示或轉譯任何內容。瀏覽器在系統處理樣式表前嘗試顯示內容並不合理,因為樣式表可能包含會影響網頁樣式的規則。

每個外部樣式表都必須從網路下載。這些額外的網路行程可能會大幅增加使用者在畫面上看到任何內容前須等待的時間。

未使用的 CSS 也會降低瀏覽器的轉譯樹狀結構建構速度。算繪樹狀結構與 DOM 樹狀結構類似,但前者包含每個節點的樣式,如要建構算繪樹狀結構,瀏覽器必須瀏覽整個 DOM 樹狀結構,並檢查每個節點適用的 CSS 規則。使用的 CSS 越多,瀏覽器可能需要花更多時間計算每個節點的樣式。

如何偵測未使用的 CSS

Chrome 開發人員工具的「涵蓋率」分頁可協助你找出重要和不重要的 CSS。 請參閱透過「涵蓋範圍」分頁查看已使用和未使用的 CSS

Chrome 開發人員工具「涵蓋率」分頁
Chrome 開發人員工具:「涵蓋率」分頁。

內嵌重要的 CSS,並延遲不重要的 CSS

與在 <script> 標記中內嵌程式碼類似,第一次繪製需要內嵌於 HTML 網頁 head<style> 區塊中。接著使用 preload 連結,以非同步方式載入其餘樣式。

建議您使用關鍵工具,自動擷取並內嵌「不需捲動位置」 CSS。

詳情請參閱延遲不重要的 CSS

堆疊專屬指南

Drupal

建議您移除未使用的 CSS 規則。請只將必要的 Drupal 程式庫附加至相關頁面或頁面上的元件。詳情請參閱「定義程式庫」。

Joomla

有些 Joomla 擴充功能會在網頁中載入未使用的 CSS,請考慮減少或改用其他擴充功能。

WordPress

有些 WordPress 外掛程式會在網頁中載入未使用的 CSS,建議你減少這類外掛程式的數量,或改用其他外掛程式。

資源