Quartz 5

高性能網站建設指南 High Performance Web Sites

Properties1
tagssoftware, web, performance, frontend

2 min read

📌 30 秒摘要（Layer 3）

一個反直覺卻關鍵的發現：網頁 80–90% 的載入時間花在前端（下載 JS/CSS/圖片/資源），而非後端產生 HTML。所以想讓網站變快，優化前端的投報率遠高於優化後端。本書把它濃縮成一組可照做的規則——核心是減少 HTTP 請求數、善用快取與 CDN、壓縮與資源擺放位置。雖成書於較早年代，但「先量測前端、減少往返、善用快取」的原則至今通用。

🗺 心智圖（Canvas）

高性能網站建設指南

高性能網站建設指南

High Performance Web Sites — Steve Souders

🥇 黃金法則：前端優先

工具-前端效能優化規則

🎯 什麼情境該想到我

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

⚙️ 怎麼用

黃金法則：多數載入時間在前端 → 先優化前端（比調後端 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 後有變；但「減少往返、量測導向」的原則不變。

🔗 相關工具

80–90% 的使用者等待時間發生在前端 優化前端的投報率遠高於優化後端

先量測再優化 用開發者工具／效能瀑布圖找出真正的瓶頸資源

📉 減少 HTTP 請求

合併檔案 多支 JS／CSS 合併成一支，減少往返次數

CSS Sprites 把多張小圖併成一張，用背景位移取用

行內小資源 極小的圖／樣式直接 inline，省掉一次請求

🗄 快取與 CDN

工具-快取與資源優化

🎯 什麼情境該想到我

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

⚙️ 怎麼用

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

🧪 我實際套用的紀錄

  • 2026-07-15：（待填）

⚠️ 注意

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

🔗 相關工具

加 Expires／Cache-Control 標頭 讓重複造訪直接用本地副本，不再重抓

內容雜湊檔名（cache busting） app.9f3c.js：可放心永久快取，更新自動失效

使用 CDN 靜態資源就近提供，降低網路延遲

📦 壓縮與資源擺放位置

Gzip 壓縮傳輸內容 文字類資源壓縮後體積大幅下降

CSS 放頁面頂部 讓瀏覽器盡早開始漸進渲染，避免白畫面

JS 放頁面底部 腳本下載與執行會阻塞渲染，往後擺

Link to original

🧰 這本書給我的工具

✨ 關鍵重點（Layer 1–2）

  • 黃金法則：多數載入時間在前端 → 優化前端 CP 值最高。
  • 減少 HTTP 請求：合併檔案、CSS sprites、行內小資源。
  • 用 CDN 讓靜態資源就近提供。
  • 加 Expires/快取標頭：讓瀏覽器重複造訪不再重抓。
  • Gzip 壓縮傳輸內容；CSS 放頂部、JS 放底部，避免阻塞渲染。

💬 金句原文（Layer 0）

  • 「80% 到 90% 的使用者等待時間，發生在前端。」

🔗 相關

Graph View

Backlinks