Lighthouse 報表清單的「商機」部分 所有未認可的 CSS 檔案 並能節省 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
在「管理」> 中啟用「匯總 CSS 檔案」設定 > 開發。您也可以設定更進階的匯總選項 支援其他模組 藉由串連、壓縮及壓縮 CSS 檔案 。
Joomla
多種 Joomla 擴充功能 可以透過串連、壓縮及壓縮 CSS 檔案 。此外，我們也提供的範本提供了這項功能。
Magento
啟用「Minify CSS Files」(壓縮 CSS 檔案) 選項 或商店中的「開發人員設定」中。
回應
如果您的建構系統會自動壓縮 CSS 檔案 部署正式環境版本 應用程式的表現你可以使用 React 開發人員工具進行檢查 。
WordPress
有些 WordPress 外掛程式可加快 來串連、縮小及壓縮網站樣式你可能也會需要 透過建構程序預先執行這項壓縮作業