理解 Web Vitals | 提升網站效能與使用者體驗的關鍵指標

此文章是 FrontendMaster 上的 Advanced Web Development Quiz 課程筆記

問題

Match the Web Vitals to the correct descriptions Match the answers to the correct options.

[1] TTFB
[2] FID
[3] TTI
[4] TBT
[5] CLS
[6] INP

[a] the time it takes for a webpage to respond to a user's first interaction.
[b] the time that the main thread is blocked from responding to user input.
[c] the average time it takes for a webpage to update its visuals after a user interacts with it.
[d] the time it takes for the server to respond to a request and start sending data back to the client.
[e] the time it takes for a webpage to be fully loaded and responsive to user input.
[f] the stability of a webpage's layout, or the unexpected layout shifts that occur on a webpage as it loads.

Web Vitals

Web Vitals 是 Google 提出的一套指標，可以用來當作網站使用體驗的參考標準

• 統一的一套標準：依循此套標準可以讓團隊溝通更容易
• 影響 SEO：Google 直接把這個指標納入搜尋結果的排名
• 客觀地反應使用者體驗：蒐集了真實的使用者資料與工具 (Lighthouse、PageSpeed Insights)，可以釐清在不同裝置或網路環境的實際表現

遵循這些指標可以客觀並有效地提高網站的使用體驗，有助於留住使用者

Core Web Vitals

其中有幾個指標特別被挑選出來因為他們更為著重於使用者體驗，有三個面向：

• 載入 Largest Contentful Paint (LCP)：主要內容何時顯示
• 互動 Interaction to Next Paint (INP)：使用者互動後畫面多久有反應
• 視覺穩定性 Cumulative Layout Shift (CLS)：載入時版面會不會亂跳

身為網頁的開發者，應該盡量達到這三個指標的標準，如果達到 PR 75，即視為通過

指標

TTFB - Time To First Byte

從瀏覽器送出請求開始，到客戶端收到伺服器回應的「第一個 byte」為止的時間，也就是伺服器開始回傳資料、且用戶端能開始解析 HTML 的那一刻，而不是整個回應結束的時間點

FID – First Input Delay

使用者在頁面上的 第一次互動 (例如點擊、鍵盤輸入等) 發生，到頁面實際開始對這次互動做出反應的時間差，也就是第一次互動的延遲時間

• FID 會受到主執行緒上「長任務（long task，> 50ms）」影響，因為長任務會阻塞事件處理
• 如果使用者第一次點擊剛好避開 long task，FID 會看起來很好，反之則會變差，所以數值不太穩定
• 若使用者在該次載入完全沒有互動，就不會產生 FID 值

TTI – Time To Interactive

在最後一個 long task 結束後，接下來至少 5 秒內都沒有新的 long task 出現的第一個時間點；這一刻起可以認為主執行緒「可靠地可互動」

TBT – Total Blocking Time

從使用者角度看，是主執行緒被「長任務」阻塞、無法處理輸入事件的時間總長

從 First Contentful Paint (FCP) 到 Time To Interactive (TTI) 這段期間

用途：兩個頁面即使 TTI 一樣，TBT 高的那個在「到達 TTI 之前」的互動體驗會明顯比較差，例如：

• 一個情境只有一個很長的 task，整段時間完全無法互動（TBT 很大）
• 另一個情境有多個較短的長任務，中間還是可以互動（TBT 小很多）

CLS – Cumulative Layout Shift

衡量頁面在載入過程中的視覺穩定性，也就是是否有非預期的版面位移，會不會讓使用者在閱讀或點擊時被「推走」

• 公式：CLS = distance fraction × impact fraction
  • distance fraction：某元素在此次位移中，移動距離佔 viewport 最大邊（高度或寬度）的比例，例如往下移動 22%，distance fraction = 0.22
  • impact fraction：此次位移影響到的 viewport 區域比例，例如整個 viewport 都被影響則為 1

範例 1：
元素往下移 22%，整個 viewport 皆受影響
CLS → 0.22 × 1 = 0.22

範例 2：
動態載入 filter 造成按鈕被往下推，元素只下移 13%，且約 60% viewport 受影響
CLS → 0.13 × 0.6 ≈ 0.07

INP – Interaction to Next Paint

衡量使用者互動之後，頁面畫面更新（下一次 paint）出現的時間，是「互動響應性」的指標

• 涵蓋的範圍：從互動發生開始，到該互動結果實際呈現在畫面為止，包含：事件處理（例如 click handler 的執行）、layout、paint、compositing
• 取樣方式：
  • 在整個頁面生命週期中，會記錄許多互動的 INP 值。
  • 常見做法是在使用者離開頁面時，取該次 session 中最差的一次（worst INP），或取 98 百分位等統計值，作為此頁面 INP

是相較舊 FID 更全面的互動響應性指標

答案

[1] TTFB [d] the time it takes for the server to respond to a request and start sending data back to the client.
[2] FID [a] the time it takes for a webpage to respond to a user's first interaction.
[3] TTI [e] the time it takes for a webpage to be fully loaded and responsive to user input.
[4] TBT [b] the time that the main thread is blocked from responding to user input.
[5] CLS [f] the stability of a webpage's layout, or the unexpected layout shifts that occur on a webpage as it loads.
[6] INP [c] the average time it takes for a webpage to update its visuals after a user interacts with it.

參考

• Web Vitals "web.dev"
• User-centric performance metrics "web.dev"