Web Vitals 是 Google 統合大量真實使用者資料後,用來量化網站體驗的一組指標。透過量測讓開發者能更具體地知道改善方向,其中又以 Core Web Vitals 最為關鍵。
建構視角的對應章節:Core Web Vitals
Core Web Vitals 的三個面向#
Google 會定期挑選出三個面向中最具代表性的指標:
- Largest Contentful Paint (LCP):載入速度
- First Input Delay (FID):互動性
- Cumulative Layout Shift (CLS):視覺穩定性
LCP#
LCP 是「載入速度」的代表,指的是頁面中最大的圖片、影片預覽圖或文字等元素的繪製時間。比起 load 或 DOMContentLoaded,LCP 更貼近使用者真正感受到「內容載入完成」的時點。
判定上只計入完全進入可視區域的元素;當頁面繪製出比目前 LCP 更大的元素時就會被取代,直到使用者開始與頁面互動。
FID#
First Input Delay 代表「可用性」。剛載入網頁時按了按鈕卻沒反應,正是 FID 高的典型情境。
具體計算方式是使用者第一次點擊按鈕、連結或與 input、checkbox 互動時,從觸發輸入事件到主執行緒下一次空閒的延遲時間。
CLS#
Cumulative Layout Shift 是「穩定性」的代表,描述頁面載入過程中元素位移的累計量。最讓人惱怒的情境就是準備點某個按鈕時因為元素突然位移而誤觸他處。
計算公式為 影響範圍 (impact fraction) × 移動距離 (distance fraction) 後再累加。使用者互動後 500 毫秒內發生的位移不計入,因為這類位移屬於可預期的行為(如點擊展開)。
周邊指標#
下列指標雖非 Core Web Vitals,卻常作為優化時的參考。
FCP#
First Contentful Paint (FCP) 為網頁繪出第一個圖片或文字內容的時間。
TTFB#
Time to First Byte (TTFB) 與網路速度與伺服器處理時間有關,計算的是發出請求到收到第一個位元組之間的時間。
TTI#
Time to Interactive (TTI) 代表使用者完全可以與頁面互動的時間,從 FCP 到最後一個 Long Task 結束(之後 5 秒內沒有其他 Long Task 且請求數不超過三個)。Long Task 指主執行緒中執行超過 50 毫秒的工作。
TBT#
Total Blocking Time (TBT) 衡量 FCP 到 TTI 之間使用者互動會被卡住的時間,把所有 Long Task 超過 50 毫秒的部分加總而來。
為什麼是 50 毫秒#
事件處理本身大約會花掉幾十毫秒,且使用者通常希望 100 毫秒內看到回應。因此主執行緒上超過 50 毫秒的工作越多,使用者感受到卡頓的機率就越高。
量測環境的兩種類型#
Web Vitals 的量測情境分為:
- in the lab:開發階段在穩定環境下模擬載入。
- in the field:真實使用者載入與互動的真實情境。
正式上線前自然只有 lab 資料,可作為比較優化前後的依據;上線後則需要從真實使用者收集 field 資料,因為使用者裝置、網路、廣告、瀏覽器外掛等都會影響表現。
評分判定#
判斷依據看 PR75:取分數較好的 75% 使用者落在哪個區間。例如 LCP 在這個區間若低於 2.5 秒就算 Good,超過 4 秒則為 Poor。
量測工具#
Lab 與 Field 兼具#
- PageSpeed Insights:輸入網址即可同時得到 Lab(Lighthouse)與 Field(Chrome UX Report)的結果。
- Web Vitals Extension:方便即時查看當下頁面的指標。
- Web Vitals Library:以官方 JavaScript library 客製測量工具。
主要為 Field#
- Chrome UX Report:真實使用者資料,可以圖表比較不同時間點,並依網路、裝置、國家分類。
- Search Console:以頁面為單位顯示指標,可優先處理表現較差的頁面。
主要為 Lab#
- Chrome DevTools 與 Lighthouse:在開發環境直接量測,因為沒有真實使用者,會以 TBT 替代 FID。
- WebPageTest:同樣以 TBT 替代 FID,並可在多種裝置與地理位置條件下測試。
與 SEO 的關聯#
使用體驗一直是 SEO 的計算重點。Web Vitals 把體驗量化後,開發者能更具體地知道哪裡該改進。除此之外,行動裝置相容性、網頁安全性、HTTPS、侵入式廣告與彈窗也都會影響 SEO 評分。
原文出處#
- 原書/iThome:https://ithelp.ithome.com.tw/articles/10248039