HTML 引入大型 CSS (3600KB) 導致載入緩慢優化方案

問題

單一 design.css 約 3.6MB，載入耗時 3 秒以上，嚴重拖慢首屏渲染。

核心優化策略

1. 啟用 Gzip/Br 壓縮 (最直接有效)
   • Nginx: gzip on; gzip_types text/css; gzip_min_length 1k;
   • Apache: mod_deflate / mod_brotli
   • IIS: 動態/靜態內容壓縮模組啟用
   • 壓縮後通常 70-90% 減量，3.6MB → 400-1000KB，載入時間大幅縮短。
2. 拆分 CSS：關鍵 CSS 內嵌 + 非關鍵異步載入
   • 提取首屏必要樣式 (Critical CSS) 內嵌在 <style> 中。
   • 其餘樣式用 <link rel="preload" as="style" onload="this.rel='stylesheet'"> 非同步載入。
   • 工具：critical (Node.js)、Penthouse、PostCSS 插件自動提取。
3. 移除未使用 CSS (PurgeCSS / UnCSS)
   • 掃描 HTML/模板/JS 動態類名，刪除未引用規則，常能減少 40-60% 體積。
   • 整合至建置流程 (Webpack/Vite/Rollup 插件)。
4. 程式碼層面精簡
   • 合併重複選擇器、縮寫屬性 (margin/padding/font/border)。
   • 移除過時瀏覽器 Hack、註解、空白 (上線前由 cssnano/minify 處理)。
5. HTTP 快取策略
   • Cache-Control: public, max-age=31536000, immutable (檔名含 hash 時)。
   • 變更內容時修改檔名 (如 design.a1b2c3.css)，利用長期快取。
6. CDN 分發
   • 靜態資源部署至 CDN 節點，降低延遲、分擔頻寬。
7. HTTP/2 或 HTTP/3
   • 多路複用、Header 壓縮、Server Push，顯著提升多資源並行載入效能。

快速驗證清單

# 1. 確認壓縮生效
curl -H "Accept-Encoding: gzip, br" -I https://example.com/design.css
# 應見到: content-encoding: gzip / br

# 2. 檢查快取標頭
# 應見到: cache-control: public, max-age=31536000, immutable

# 3. 測量載入時間 (DevTools Network)
# 目標: < 500ms (含壓縮傳輸)

優先順序建議

1. **立即啟用 Gzip/Br** (伺服器設定 5 分鐘完成，效果立竿見影)。
2. **引入建置流程自動最小化 + PurgeCSS** (一次設定，長期受益)。
3. **Critical CSS 內嵌** (需工具鏈支援，效果顯著但實作較複雜)。
4. **CDN + HTTP/2/3 + 長期快取** (架構層面，長期投資)。

3.6MB CSS 屬於明顯過大，**壓縮 + 清理未用樣式** 通常能解決 80% 問題，建議優先落實。