Lighthouse 報表的「商機」部分會列出所有未經辨識的 CSS 檔案，並列出壓縮檔案後可能節省的 KB 數 (KiB) 數：
壓縮 CSS 檔案能如何改善效能
壓縮 CSS 檔案有助於提升網頁載入效能。 CSS 檔案通常大於實際數量。例如：
/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}
建議減少為：
h1,
h2 {
background-color: #000000;
}
從瀏覽器的角度來看，這 2 個程式碼範例的功能相等，但第二個範例使用的位元組較少。壓縮器可透過移除空白字元進一步提高位元組效率：
h1,
h2 {
background-color: #000000;
}
部分壓縮器會採用巧妙的技巧，盡可能減少位元組。舉例來說，顏色值 #000000 可以進一步縮減為 #000，也就是其簡寫法。
Lighthouse 會根據 CSS 中的註解和空白字元，預估可省下的金額。這是保守估計。如先前所述，壓縮工具可以執行巧妙的最佳化作業 (例如將 #000000 縮減為 #000)，進一步縮減檔案大小。因此，使用壓縮器時，所省下的金額可能會比 Lighthouse 報表所省下的金額。
使用 CSS 壓縮器壓縮 CSS 程式碼
如果是不常更新的小型網站，您可以使用線上服務手動壓縮檔案。只要將 CSS 貼到服務的使用者介面，系統就會傳回經過壓縮的程式碼。
針對專業開發人員，您可能會想設定自動化工作流程，藉此自動壓縮 CSS，然後再部署更新的程式碼。這通常可透過 Gulp 或 Webpack 等建構工具完成。
瞭解如何壓縮 CSS 中的 CSS 程式碼。
堆疊專屬指南
Drupal
依序前往「Administration」 >「Configuration」 >「Development」，啟用「Aggregate CSS files」。您也可以透過其他模組設定更進階的匯總選項，透過串連、壓縮及壓縮 CSS 樣式來提升網站速度。
Joomla
有些 Joomla 擴充功能可以透過串連、壓縮及壓縮 CSS 樣式來提升網站速度。此外，有些範本也提供這項功能。
Magento
在商店的開發人員設定中啟用「Minify CSS Files」(壓縮 CSS 檔案) 選項。
回應
如果您的建構系統會自動壓縮 CSS 檔案，請確保您部署應用程式的實際工作環境版本。您可以用 React Developer Tools 擴充功能進行檢查。
WordPress
有些 WordPress 外掛程式可以透過串連、壓縮及壓縮樣式來提升網站速度。您也可以透過建構程序預先執行這項壓縮作業 (如果可行的話)。