詞彙表
L3.6cm L9.1cm C1.1cm 名詞 & 說明 & 章
名詞 & 說明 & 章
RTT（Round-Trip Time） & 封包從客戶端到伺服器再回來的時間；網路效能的基本單位。由距離與路由決定。 & [ch:beforefetch]
TCP 三向交握 & 建立 TCP 連線需要 1 RTT（SYN、SYN-ACK、ACK）。 & [ch:beforefetch]
TLS 交握 & 建立加密通道。TLS 1.3 需 1 RTT，0-RTT 恢復時為 0；TLS 1.2 需 2 RTT。 & [ch:beforefetch]
QUIC / HTTP/3 & 以 UDP 為基礎、內建 TLS 1.3 的傳輸協定；交握合併為 1 RTT，無隊頭阻塞，連線遷移。 & [ch:beforefetch]
TCP 慢啟動（slow start） & 新連線的擁塞視窗從約 10 個封包（約 14 KB）開始，每個 RTT 加倍；大檔前幾個 RTT 傳得慢。 & [ch:beforefetch]
preconnect / dns-prefetch & 提前對第三方來源完成 DNS + TCP + TLS，或只做 DNS。 & [ch:beforefetch]
103 Early Hints & 伺服器在最終回應前先送出的暫時回應，帶 標頭讓瀏覽器提早下載資源。 & [ch:beforefetch], [ch:cdn]
關鍵渲染路徑（CRP） & 從 HTML 到第一次繪製所必經的步驟：HTML → DOM、CSS → CSSOM、render tree、layout、paint。 & [ch:beforefetch]
preload scanner & HTML 解析器被阻擋時，仍先掃描後續標記並提早發出資源請求的機制。 & [ch:beforefetch], [ch:vitals]
render-blocking / parser-blocking & 阻擋渲染的 CSS 與阻擋解析的同步 JS。 & [ch:beforefetch]
TTFB（Time to First Byte） & 從導覽開始到 HTML 第一個位元組抵達；含重導、DNS、連線、伺服器處理。良好 \(\le\) 800 ms。 & [ch:metrics]
FP / FCP & 第一次繪製任何像素 / 第一次繪製內容（文字、圖片）。FCP 良好 \(\le\) 1.8 s。 & [ch:metrics]
FMP（First Meaningful Paint） & 已棄用的「主要內容繪製」啟發式指標，由 LCP 取代。 & [ch:metrics]
LCP（Largest Contentful Paint） & 視窗內最大內容元素完成渲染的時間。良好 \(\le\) 2.5 s。 & [ch:metrics], [ch:vitals]
FID（First Input Delay） & 第一次互動的輸入延遲；2024 年 3 月起由 INP 取代。 & [ch:metrics]
INP（Interaction to Next Paint） & 整個頁面生命週期中互動延遲的近似最大值（排除離群值）。良好 \(\le\) 200 ms。 & [ch:metrics], [ch:vitals]
CLS（Cumulative Layout Shift） & 非預期版面跳動的累計分數（最大 session window）。良好 \(\le\) 0.1。 & [ch:metrics], [ch:vitals]
TBT / TTI / Speed Index & 實驗室指標：長任務超過 50 ms 的總和 / 可互動時間（已從 Lighthouse 移除）/ 內容填滿視窗的速度。 & [ch:metrics]
長任務（long task） & 佔用主執行緒超過 50 ms 的任務；期間無法回應輸入。 & [ch:vitals]
LoAF（Long Animation Frames） & 超過 50 ms 的動畫幀，含腳本歸因；比 longtask 更適合診斷 INP。 & [ch:vitals], [ch:perfapi]
實驗室 / 現場資料（lab / field） & 受控環境的量測（Lighthouse、DevTools）/ 真實使用者的量測（CrUX、RUM）。 & 導論
p75 & 第 75 百分位數；Core Web Vitals 以 28 天內 p75 評定。 & 導論, [ch:metrics]
CrUX（Chrome UX Report） & Google 從 Chrome 使用者收集的公開現場資料集。 & 導論, [ch:devtools]
PerformanceObserver & 訂閱效能條目的 API； 可取回訂閱前的條目。 & [ch:perfapi]
Navigation Timing & 整份文件的載入時間線（Level 2：）。 & [ch:perfapi]
Resource Timing & 每個子資源的時間線與大小（）。 & [ch:perfapi]
Timing-Allow-Origin（TAO） & 允許跨來源資源揭露詳細時間與大小的回應標頭。 & [ch:perfapi]
Server-Timing & 伺服器把處理階段耗時寫進回應標頭，前端可讀取。 & [ch:perfapi], [ch:cdn]
新鮮度 / 驗證 & HTTP 快取的兩個概念：有效期內直接用；過期後以 ETag / Last-Modified 條件式請求驗證。 & [ch:caching]
stale-while-revalidate（SWR） & 過期後先用舊版、同時背景更新的指令；ISR 是它的 HTML 版。 & [ch:caching], [ch:cdn], [ch:ssr]
bfcache & 往返快取：把整頁狀態凍結在記憶體，上一頁 / 下一頁瞬間還原。 & [ch:caching]
Speculation Rules & 宣告式地 prefetch / prerender 下一頁的 API。 & [ch:caching]
Service Worker & 頁面與網路之間的可程式化代理執行緒。 & [ch:sw]
Cache Storage & SW 可用的 Request → Response 鍵值儲存。 & [ch:sw]
app shell & 預快取的應用程式外殼（HTML / CSS / JS），讓回訪與離線瞬間可見。 & [ch:sw]
navigation preload & 在 SW 啟動的同時平行送出導覽請求。 & [ch:sw]
CDN / PoP / 邊緣節點 & 內容傳遞網路 / 分布各地的機房 / 其中的伺服器。 & [ch:cdn]
origin shield & 邊緣與 origin 之間的區域快取層，減少回源。 & [ch:cdn]
cache key & CDN 辨認同一資源的鍵（URL + 部分標頭）。 & [ch:cdn]
快取命中率（CHR） & 命中 ÷ 總請求。 & [ch:cdn]
purge by tag & 依標籤一次清除多個 URL 的快取。 & [ch:cdn]
CSR / SSR / SSG / ISR & 客戶端渲染 / 伺服器端渲染 / 靜態產生 / 增量靜態再生。 & [ch:ssr]
hydration & 讓 SSR 產生的靜態 HTML 接上事件與狀態、變得可互動的過程。 & [ch:ssr]
串流 SSR / Suspense & 分段送出 HTML，慢區塊之後補上。 & [ch:ssr]
islands / RSC / resumability & 減少 hydration 的三種架構：只 hydrate 互動島 / 元件留在伺服器 / 不 hydrate 直接恢復。 & [ch:ssr]
指標門檻速查
L2.2cm C2.6cm C2.6cm C2.6cm L3.2cm 指標 & & & & 備註
LCP & \(\le\) 2.5 s & 2.5–4.0 s & \(>\) 4.0 s & Core Web Vital
INP & \(\le\) 200 ms & 200–500 ms & \(>\) 500 ms & Core Web Vital（2024/3 取代 FID）
CLS & \(\le\) 0.1 & 0.1–0.25 & \(>\) 0.25 & Core Web Vital
TTFB & \(\le\) 800 ms & 800–1800 ms & \(>\) 1800 ms & 診斷指標
FCP & \(\le\) 1.8 s & 1.8–3.0 s & \(>\) 3.0 s & 診斷指標
FID & \(\le\) 100 ms & 100–300 ms & \(>\) 300 ms & 歷史指標
TBT（實驗室） & \(\le\) 200 ms & 200–600 ms & \(>\) 600 ms & Lighthouse
L3.2cm L10.3cm 子部分 & 健康的比例 / 目標
LCP：TTFB & 應佔 LCP 的大約 40%；絕對值 \(\le\) 800 ms。
LCP：資源載入延遲 & 目標接近 0：LCP 圖片應在 HTML 中直接可見並 。
LCP：資源載入時間 & 約 40%；靠壓縮格式（AVIF / WebP）、正確尺寸、CDN。
LCP：元素渲染延遲 & 目標接近 0：不要讓 render-blocking 資源或 JS 延後渲染。
INP：輸入延遲 & 主執行緒忙碌造成；目標 \(<\) 50 ms。拆長任務、延後非必要工作。
INP：處理時間 & 事件處理器本身；目標 \(<\) 100 ms。先更新畫面再做重活。
INP：呈現延遲 & 渲染下一幀；避免大量 DOM 變更與強制同步版面。
CLS & 圖片 / 影片給尺寸；為動態內容預留空間；字型用 與 。
綜合練習：一次完整的效能稽核
以下流程把各章串起來，建議作為期末作業：挑一個真實網站（最好是你能改動的），完成後產出一份 3–5 頁的報告。
現場資料先行（導論、）：在 PageSpeed Insights 或 DevTools Live Metrics 的 Field data 看 28 天 p75 的 LCP、INP、CLS、TTFB，區分行動 / 桌機。若沒有 CrUX 資料，改用自家 RUM 或說明限制。
校準實驗室環境：依 CrUX 建議設定 CPU / 網路節流；決定冷 / 熱快取；用無痕視窗。記錄環境。
fetch 之前（）：用 Navigation Timing 拆解重導、DNS、連線、TLS、SW 啟動、TTFB；用 Network 面板確認協定（h2 / h3）、是否有多餘的重導、第三方來源的連線成本。
LCP（）：找出 LCP 元素；用 LCP breakdown 看四個子部分；檢查資源是否可被 preload scanner 發現、、格式與尺寸、render-blocking 資源。
INP（）：用 Live Metrics 與 Interactions 軌道找出最慢的互動；拆解三個子部分；定位到函式；提出拆分 / 延後 / 減少 DOM 的方案。
CLS（）：用 Layout shifts 軌道與 culprits 找出元素與原因（無尺寸圖片、動態插入、字型）。
快取（）：盤點 Cache-Control；用 Resource Timing 算命中率；測 bfcache 資格；評估是否適合 Speculation Rules。
Service Worker（）：若有 SW，量 成本、檢查策略是否合理、有沒有空的 fetch handler；若沒有，評估是否值得加。
CDN（）：用 curl 判讀命中狀態、Age、s-maxage；HTML 是否被邊緣快取；影像是否經過影像 CDN；是否啟用 HTTP/3、Brotli、Early Hints。
渲染策略（）：view-source 看內容是否在 HTML 中；量 TTFB 與 hydration 長任務；判斷目前策略是否合適，是否該改為 SSG / ISR / 串流。
提出與驗證修正：每項修正註明預期影響的指標與子部分；能改的就改，改完在相同環境重測；不能改的估算效益（例如「LCP 圖片改 AVIF 可省 60% 位元組，資源載入時間預估從 900 ms 降到 400 ms」）。
監測：加入 attribution 版回報；規劃儀表板與告警門檻。
L2.6cm L2.4cm L2.4cm L5.9cm 項目 & 現場 p75 & 實驗室 & 主要原因 / 修正 / 預期效果
TTFB & & &
LCP（元素：） & & &
INP（互動：） & & &
CLS（元素：） & & &
快取命中率 & & &
bfcache 資格 & & &
CDN 命中 / 協定 & & &
渲染策略 & & &
參考資料
以下資料皆為官方文件或規範，是本講義內容的主要依據；學習時建議以這些來源為準，因為指標定義與瀏覽器行為每年都會更新。
Web Vitals 與指標
web.dev — Web Vitals 總覽：https://web.dev/articles/vitals
LCP：https://web.dev/articles/lcp；優化：https://web.dev/articles/optimize-lcp
INP：https://web.dev/articles/inp；優化：https://web.dev/articles/optimize-inp
CLS：https://web.dev/articles/cls；優化：https://web.dev/articles/optimize-cls
TTFB：https://web.dev/articles/ttfb；優化：https://web.dev/articles/optimize-ttfb
FCP：https://web.dev/articles/fcp；FID（歷史）：https://web.dev/articles/fid；TBT：https://web.dev/articles/tbt
Long Animation Frames API：https://developer.chrome.com/docs/web-platform/long-animation-frames
web.dev Learn Performance（免費課程）：https://web.dev/learn/performance
CrUX：https://developer.chrome.com/docs/crux；PageSpeed Insights：https://pagespeed.web.dev/
Performance API 規範與文件
MDN Performance APIs：https://developer.mozilla.org/en-US/docs/Web/API/Performance_API
Navigation Timing Level 2：https://www.w3.org/TR/navigation-timing-2/
Resource Timing：https://www.w3.org/TR/resource-timing/
Performance Timeline：https://www.w3.org/TR/performance-timeline/
Paint Timing：https://www.w3.org/TR/paint-timing/
Largest Contentful Paint：https://w3c.github.io/largest-contentful-paint/
Event Timing：https://www.w3.org/TR/event-timing/
Layout Instability：https://wicg.github.io/layout-instability/
User Timing：https://www.w3.org/TR/user-timing/；Server Timing：https://www.w3.org/TR/server-timing/
web-vitals 函式庫：https://github.com/GoogleChrome/web-vitals
連線、關鍵渲染路徑與資源提示
High Performance Browser Networking（Ilya Grigorik，免費線上版）：https://hpbn.co/
關鍵渲染路徑：https://web.dev/learn/performance/understanding-the-critical-path
preconnect 與 dns-prefetch：https://web.dev/articles/preconnect-and-dns-prefetch
Fetch Priority：https://web.dev/articles/fetch-priority
103 Early Hints：https://developer.chrome.com/docs/web-platform/early-hints；RFC 8297：https://www.rfc-editor.org/rfc/rfc8297
Chrome DevTools
Performance 面板總覽：https://developer.chrome.com/docs/devtools/performance
Performance 面板參考：https://developer.chrome.com/docs/devtools/performance/reference
Lighthouse：https://developer.chrome.com/docs/lighthouse/overview
WebPageTest：https://www.webpagetest.org/
快取、bfcache 與 Speculation Rules
MDN HTTP caching：https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching
RFC 9111 HTTP Caching：https://www.rfc-editor.org/rfc/rfc9111；RFC 5861 stale-while-revalidate：https://www.rfc-editor.org/rfc/rfc5861
HTTP cache partitioning：https://developer.chrome.com/blog/http-cache-partitioning
bfcache：https://web.dev/articles/bfcache；Cache-Control: no-store 與 bfcache：https://developer.chrome.com/docs/web-platform/bfcache-ccns
unload 事件棄用：https://developer.chrome.com/docs/web-platform/deprecating-unload
Speculation Rules（prerender pages）：https://developer.chrome.com/docs/web-platform/prerender-pages
Service Worker
MDN Service Worker API：https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
Navigation preload：https://web.dev/blog/navigation-preload
Service Worker Static Routing API：https://developer.chrome.com/blog/service-worker-static-routing
Cache Storage（MDN）：https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage
CDN
Cloudflare Learning Center — What is a CDN：https://www.cloudflare.com/learning/cdn/what-is-a-cdn/
RFC 9211 Cache-Status：https://www.rfc-editor.org/rfc/rfc9211；RFC 9213 Targeted Cache-Control：https://www.rfc-editor.org/rfc/rfc9213
web.dev — Content delivery networks：https://web.dev/articles/content-delivery-networks
渲染策略與 SSR
Rendering on the Web：https://web.dev/articles/rendering-on-the-web
Patterns.dev — Rendering Patterns：https://www.patterns.dev/
React ：https://react.dev/reference/react-dom/server/renderToPipeableStream
React ：https://react.dev/reference/react-dom/client/hydrateRoot
Next.js 文件（Rendering、Caching、ISR）：https://nextjs.org/docs
Astro Islands：https://docs.astro.build/en/concepts/islands/
Web 效能領域變動很快：INP 在 2024 年取代 FID、bfcache 對 的放寬、Speculation Rules 與 Static Routing API 都是近兩年的事。建議每半年回到 web.dev 與 Chrome for Developers 的更新頁面檢視一次，並訂閱 Chrome 的 release notes。