壓縮 CSS

Lighthouse 報表清單的「商機」部分 所有未認可的 CSS 檔案 並能節省 KiB 的成本 這些檔案都會壓縮:

Lighthouse Minify CSS 稽核的螢幕截圖

壓縮 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 外掛程式可加快 來串連、縮小及壓縮網站樣式你可能也會需要 透過建構程序預先執行這項壓縮作業

資源