Lighthouse 報表清單的「商機」部分 所有含有未使用的 CSS 的樣式表，可能可省下 2 KiB 或以上。 移除未使用的 CSS ，減少網路活動消耗的非必要位元組數：
未使用的 CSS 減慢效能的方式
使用 <link> 標記是為頁面新增樣式的常見方式：
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>
瀏覽器下載的 main.css 檔案稱為外部樣式表
原因是 - 與使用該資料的 HTML 分開儲存
根據預設，瀏覽器必須下載、剖析及處理所有外部樣式表 才能在使用者螢幕上顯示或轉譯任何內容。 瀏覽器試圖顯示內容是合理的 處理完成時 因為樣式表可能包含會影響網頁樣式的規則。
每個外部樣式表都必須從網路下載。 這些額外的網路行程可能會大幅增加時間 使用者必須先等候，畫面上才會顯示任何內容。
未使用的 CSS 也會減緩瀏覽器的建構速度 轉譯樹狀結構與 DOM 樹狀結構類似，但其包含各節點的樣式。 如要建構算繪樹狀結構，瀏覽器必須導覽整個 DOM 樹狀結構，並檢查每個節點適用的 CSS 規則。 CSS 中未使用的 CSS 瀏覽器可能花費更多時間計算每個節點的樣式。
如何偵測未使用的 CSS
Chrome 開發人員工具的「涵蓋範圍」分頁可協助你找出重要且不重要的 CSS。 請參閱透過「涵蓋範圍」分頁查看已使用和未使用的 CSS 一文。
內嵌重要的 CSS 並延後不重要的 CSS
與 <script> 標記中的內嵌程式碼類似
第一次繪製需要內嵌的重要樣式
在 HTML 網頁 head 的 <style> 區塊內。
然後使用 preload 連結，以非同步方式載入其他樣式。
建議將擷取和內嵌「不需捲動位置」的程序自動化購物比較服務 (CSS) 使用重要工具。
詳情請參閱延遲不重要的 CSS。
堆疊專屬指南
Drupal
建議你移除未使用的 CSS 規則。僅附加必要的 Drupal 程式庫 將特定頁面或元件加入網頁中請參閱定義程式庫 。
Joomla
有些 Joomla 擴充功能會在網頁中載入未使用的 CSS，建議你減少這類擴充功能的數量，或改用其他擴充功能。
WordPress
有些 WordPress 外掛程式會在網頁中載入未使用的 CSS，建議你減少這類外掛程式的數量，或改用其他外掛程式。