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
Chrome 開發人員工具的涵蓋率分頁可協助您找出重要和非重要 CSS。請參閱「使用涵蓋率分頁查看已使用和未使用的 CSS」。
內嵌重要 CSS 並延遲不重要的 CSS
與在 <script> 標記中內嵌程式碼類似，在 HTML 網頁的 head 中，<style> 區塊內的內嵌重要樣式，可用於第一次繪製。接著，使用 preload 連結以非同步方式載入其餘樣式。
建議您使用重要工具，自動擷取並內嵌「在折疊位置上方」CSS 的程序。
如需進一步瞭解，請參閱「延遲不重要的 CSS」。
堆疊專屬指南
Drupal
建議移除未使用的 CSS 規則，並僅將必要的 Drupal 程式庫附加至相關頁面或頁面上的元件。詳情請參閱 Drupal 說明文件。
如要找出會新增多餘 CSS 的附加程式庫，請嘗試在 Chrome 開發人員工具中執行程式碼涵蓋率。您可以在 Drupal 網站上停用 CSS 匯總功能時，透過樣式表網址找出有問題的主題或模組。
請留意主題和模組中是否有許多樣式表，且程式碼涵蓋率中有許多紅色標示。主題和模組只應在網頁實際使用樣式表時附加樣式表程式庫。
Joomla
有些 Joomla 擴充功能會在網頁中載入未使用的 CSS，建議你減少這類擴充功能的數量，或改用其他擴充功能。
WordPress
建議您減少會在網頁中載入未使用 CSS 的 WordPress 外掛程式數量，或改用其他外掛程式。