CSS 效能優化：讓樣式更小、載入更快
提升 CSS 效能的主要目的是加快網站載入速度、降低重新渲染成本、改善使用者體驗，並確保樣式結構具備可維護性與可擴展性。透過合理的選擇器設計、樣式管理與建構流程，可有效優化前端效能。
縮寫表示法
把多個相關的屬性合併成一行，減少程式碼量。最常見的陷阱是沒寫到的子屬性會被重設為預設值。
| 簡寫 | 說明 |
|---|---|
margin、padding | 四個值依上、右、下、左的順序，也可以只寫兩個或三個。 |
background | 一次設定顏色、圖片、重複方式與定位。 |
border、border-radius | 框線的寬度、樣式、顏色，以及四個角的圓角。 |
font | 字重、字級、行高與字型族，順序有嚴格規定。 |
transition、animation | 把過渡與動畫的各項子屬性寫在一行。 |
詳細用法請見 縮寫表示法 。
檔案最小化
移除空白、註解與換行，縮小檔案體積，載入就更快。實務上不必手動處理，交給建置工具在打包時自動完成。
| 處理項目 | 說明 |
|---|---|
| 移除空白與換行 | 刪掉縮排與斷行，對瀏覽器沒有影響。 |
| 移除註解 | 註解只給開發者看，不需要送到瀏覽器。 |
| 移除最後的分號 | 規則區塊裡最後一個分號可以省略。 |
| 選取器與規則優化 | 合併重複的選取器與規則，減少重複的宣告。 |
詳細用法請見 檔案最小化 。
引入外部的樣式檔
把 CSS 放在獨立檔案中，用 <link> 引入，瀏覽器可以快取也能平行下載，效能比 @import 好。
| 引入方式 | 說明 |
|---|---|
<link> | 解析到就開始平行下載，可被快取，是建議的做法。 |
@import | 要等外層樣式表解析完才發出請求，容易形成請求瀑布。 |
| 關鍵樣式內嵌 | 首屏需要的樣式直接寫進 HTML，省下一次往返。 |
| 預先載入 | 用 rel="preload" 提早取得重要的樣式檔。 |
詳細用法請見 引入外部的樣式檔 。
CSS Sprite
把多張小圖合併成一張，再用 background-position 顯示對應的區塊，以減少請求數。HTTP/2 之後效益已大幅降低，現在多改用 SVG 圖示。
| 項目 | 說明 |
|---|---|
| 原理 | 合併成一張圖，再用 background-position 位移到要顯示的區塊。 |
| 適用時機 | HTTP/1.1 時代為了減少請求數，現在效益已大幅降低。 |
| 替代方案 | 改用 SVG 圖示，可縮放、可換色，也不必維護合併圖。 |
詳細用法請見 CSS Sprite 。
從影響最大的做起
| 優先度 | 做法 |
|---|---|
| 高 | 移除沒用到的樣式、壓縮檔案 |
| 高 | 用 <link> 平行下載，避免串接式引入 |
| 中 | 首屏樣式內嵌、其餘延後載入 |
| 中 | 合併小圖 或改用向量圖示 |
| 低 | 縮寫屬性 減少字元數 |
動畫的效能
改寬高與位置會觸發重新排版，改 位移 與透明度則交由合成層處理。做動畫時優先選後者。
以上談的是「檔案多大、載入多快」，而使用者實際感受到的體驗另有一組量化指標：載入速度看 LCP、互動反應看 INP、版面穩定看 CLS，見 Core Web Vitals 是什麼。
常見問題
CSS 為什麼會拖慢網頁？
因為它是阻塞渲染的資源。瀏覽器必須先取得並解析樣式才能繪製畫面，檔案太大或來得太晚，使用者就會多等一段白畫面。
最有效的優化是什麼？
減少實際載入的量：移除沒用到的樣式、壓縮檔案、把非首屏的樣式延後載入。這些的效果遠大於微調選取器。
選取器寫法會影響效能嗎？
在現代瀏覽器中影響很小，可維護性比較重要。真正需要留意的是動畫：改寬高與位置會觸發重新排版，改位移與透明度則不會。
