高性能網站建設指南

🎯 什麼情境該想到我

當網站/頁面「載入很慢、首屏遲遲不出來」，你想知道從哪裡下手優化時。

⚙️ 怎麼用

黃金法則：多數載入時間在前端 → 先優化前端（比調後端 CP 值高）。核心是減少往返次數。

1. 減少 HTTP 請求：合併 JS/CSS、用 CSS sprites、行內小圖（越少往返越快）。
2. JS 放底部、CSS 放頂部：避免腳本阻塞頁面渲染。
3. 壓縮傳輸：開 Gzip/Brotli，縮小 JS/CSS/圖片。
4. 用 CDN：靜態資源就近提供，降低延遲。
5. 先量測再優化：用瀏覽器開發者工具/效能瀑布圖找真正的瓶頸資源。

🧪 我實際套用的紀錄

• 2026-07-15：（待填）

⚠️ 注意

• 書中細節（如某些 HTTP/1 技巧）在 HTTP/2 後有變；但「減少往返、量測導向」的原則不變。

🔗 相關工具

• 工具-快取與資源優化 —— 規則裡最高槓桿的那一項，重複造訪的速度幾乎由它決定
• 工具-透明多級分流 —— 往後端延伸：前端規則管瀏覽器到 CDN，這張管 CDN 之後到服務節點
• 工具-簡單清楚至上 —— 提醒優化的邊界：先量測再動手，別為了省幾十毫秒寫出沒人看得懂的程式
• 工具-LLM推論最佳化 —— 同一套紀律換到 LLM 場域：先量出瓶頸在哪一段，再決定套哪個手法

🎯 什麼情境該想到我

當使用者「重複造訪網站卻還是慢」、資源每次都重新下載時。

⚙️ 怎麼用

1. 設快取標頭：對靜態資源加長 Cache-Control/Expires，讓瀏覽器重複造訪直接用本地副本。
2. 內容雜湊檔名（cache busting）：檔名帶 hash（如 app.9f3c.js），內容一改檔名就變 → 可放心設「永久快取」，更新自動失效。（本站 Quartz 就是這樣。）
3. 善用多層快取：瀏覽器 → CDN → 反向代理 → 應用快取，越外層命中越省。
4. 壓縮與合適格式：圖片用適當格式/尺寸，別傳過大資源。

🧪 我實際套用的紀錄

• 2026-07-15：（待填）

⚠️ 注意

• 快取最難的是「失效」；用內容雜湊檔名可一併解掉「更新了卻還吃到舊檔」的問題。

🔗 相關工具

• 工具-前端效能優化規則 —— 快取只是其中一條規則；跳過去拿完整清單，判斷該先動快取還是先減請求數
• 工具-透明多級分流 —— 多層快取的上游架構：瀏覽器 → CDN → 反向代理這條路徑本身該怎麼擺