All The Performance Metrics You Need To Know

學習所有 Google 提出的衡量網頁效能指標！ TTFB, FCP, LCP, FID, CLS, TTI, TBT

@ 網頁效能

前言

原先只想寫寫關於 核心 Web 指標🔗 關聯的三個指標解釋而已……結果發現一窩蜂的指標還是有必要去認識，因此本篇文章挑戰用自己的方式去理解並解釋所有 Google 提出網頁體驗相關的指標，陣容豪華絕對 學不完 🥺 夠學。

我發現沒有必要一次性的記憶所有種類的指標，因此製作了一個懶人包與該文章，方便你我查詢與學習：

指標的測量

指標就是為了能夠客觀的測量網站體驗而生的統計數值，在深入了解各項指標之前先來了解一下指標的測量基礎依據：

是否正在發生？

頁面導航是否成功啟動？伺服器有回應嗎？ 關聯指標：FFTB、FCP

是否有用？是否渲染了足夠的內容讓用戶可以深入其中？ 關聯指標：LCP
是否可用？

頁面是否繁忙？用戶是否可以與頁面互動？ 關聯指標：FID、TTI、TBT

是否令人愉快？頁面互動起來是否流暢自然？沒有延遲卡頓？ 關聯指標：CLS

以及延伸出來的指標種類如下：

感知加載速度頁面加載渲染出所有視覺元素的速度
加載響應度頁面加載和執行任何所需的 JavaScript 所需的速度
運行時響應度頁面加載後，對用戶互動的響應速度
視覺穩定性頁面加載過程內容元素變更位置的程度
滑順度頁面變化時保持穩定幀率和順暢性的程度

TTFB - 首次位元組時間

良好的 TTFB 數值建議在 800 毫秒以內，在 1800 毫秒以上則視為差勁，在此之間則需要改進

測量網頁載入過程中從請求一個資源到第一個位元組回應所需的時間，從這項指標中主要可以了解用戶獲取資源的速度，是在其他指標之前最為根基的指標。越好的 TTFB 代表網頁「正在發生」，用戶可以越快速的獲取資源」。

FCP - 首次內容繪製

良好的 FCP 數值建議在 1.8 秒以內，在 3 秒以上則視為差勁，在此之間則需要改進

測量網頁載入過程中「首個內容的出現所需的時間」，所謂的內容指的是文字、圖片（包含背景圖片）、<svg> 元素或非白色的 <canvas> 元素。也就是測量網頁要花多久時間去顯示其內容。從這項指標中主要可以了解網頁的載入速度，越好的 FCP 越能說服用戶網頁「正在發生」。

LCP - 最大內容繪製 🌟

良好的 LCP 數值建議在 2.5 秒以內，在 4 秒以上則視為差勁，在此之間則需要改進

測量網頁載入過程中「首個最大內容的出現所需的時間」，所謂的最大內容包含：

  • <img> 元素
  • 內嵌在 <svg> 元素中的 <image> 元素
  • 使用封面圖像的 <video> 元素
  • 透過 url()🔗 函數加載帶有背景圖像的元素
  • 具有文字節點或其他行內元素的塊級元素🔗的子元素

也就是測量網頁要花多久時間去顯示其最大內容，從這項指標中主要可以了解網頁載入時用戶的體驗，越好的 LCP 越能說服用戶網頁「是否有用」。

FID - 首次輸入延遲 🌟

良好的 FID 數值建議在 100 豪秒以內，在 300 毫秒以上則視為差勁，在此之間則需要改進

測量網頁載入過程中第一次與網站互動（點選連結、按鈕或是使用自訂的 JavaScript 控制），「瀏覽器能夠回應互動的時間點」，也就是測量網頁要花多久時間去回應用戶的互動，從這項指標中主要可以了解網頁的互動性，越好的 FID 越能說服用戶網頁「是否可用」。

具體來說該指標計算用戶首次互動需要花多少時間瀏覽器才能反應（不包含事件處理的時間），隨著用戶的行為不同結果也會不同。

CLS - 累積布局偏移 🌟

良好的 CLS 數值建議在 0.1 以內，在 0.25 以上則視為差勁，在此之間則需要改進

測量網頁「內容的穩定性」也就是測量網頁內容位置變換的頻繁程度，從這項指標中主要可以了解網頁在視覺上的穩定性，越好的 FID 越能讓用戶感受網頁使用起來「是令人愉悅的」。

TTI - 可互動時間

良好的 TTI 數值建議在 3.8 秒以內，在 7.3 秒以上則視為差勁，在此之間則需要改進

測量網頁要花多久時間讓用戶可以與網頁互動，從這項指標中主要可以了解網頁的互動性，越好的 TTI 越能說服用戶網頁「是否可用」。 網頁會因為執行序被堵塞而導致事項被延遲執行，或是受 JavaScript 控制的介面還未完整的載入，這些都會導致網頁無法與用戶互動，這些問題應當被測量且盡可能的避免。

具體來說該數值會先從 FCP 發生的時間點開始計算，並且找到在網頁加載過程中最後的長事項的結尾，該區間就是 TTI 的計算範圍，如果並沒有任何長事項則將會以 FCP 的時間點作為 TTI 的數值。

TBT - 總阻塞時間

良好的 TBT 數值建議在 200 豪秒以內，在 600 豪秒以上則視為差勁，在此之間則需要改進

測量 FCP 與 TTI 之間主執行緒被阻塞到影響輸入的回應性的時間，也就是測量網頁在載入過程中繁忙到無法回應的長度，從這項指標中主要可以了解網頁的互動性，越好的 TBT 越能說服用戶網頁「是否可用」。，瀏覽器必須等到該項任務完成才能回應用戶的互動，計算模擬圖表如下：

事項處理時長事項阻塞時間
事項一250 ms200 ms
事項二90 ms40 ms
事項三35 ms0 ms
事項四30 ms0 ms
事項五155 ms105 ms
總阻塞時間345 ms

總結

本篇文章是我的進階消化版，實際上 Google 的文件已經很完整了，如果想要更深入了解，可以參考 以用戶為中心的性能指標🔗 有完善的解釋，翻譯也齊全。隨著網頁的發展，指標也會隨之改變，因此本篇文章會持續更新，如果有任何錯誤或是建議，歡迎告知！

補充

長事項🔗

當主執行緒執行單個事項超過 50 毫秒就會被視為是一件長事項。TTI 與 TBT 皆建構於長事項 API 之上。

網頁核心指標（Core Web Vitals）

網頁核心指標旨在簡化環境，並幫助網站專注於最重要的指標。如果使用 Google 提供的網站檢測工具，像是 PageSpeed🔗，會使用以上的網頁指標： LCP 、 FID 或 CLS 為網站評比分數，分別從效能、交互性與視覺穩定為衡量基準，來測量該網頁的瀏覽體驗。

網頁分數測量基準

以上三種網頁指標基準都是根據 Google 統整並定義出來的，其中行動裝置與電腦也會根據性能上的差異有不一樣的要求，詳細可以參考看看：定義核心 Web 指標閥值🔗。

此外須留意 Google 的搜尋引擎會根據網站的所有頁面統整做個綜合評分，如果 75% 的頁面達成「優良」評分，那麼該網站在該指標下就會被評為「優良」，因此監控整體網站內所有頁面的評分是重要的。

參考資料