跳至主要内容

[web] Web Vitals

keywords: webdev, performance​

Metrics​

Metrics @ web.dev

  • TTFB (Time to First Byte)：發出 HTTP request 後取得第一個 byte 的時間
  • FCP (First Contentful Paint)：瀏覽器渲染第一個 DOM 元素
  • LCP (Largest Contentful Paint)
  • CLS (Cumulative Layout Shift)
  • DEPRECATED: FID (Fist Input Delay) ，被 INP（Interaction to Next Paint）取代

web vitals

圖片來源：addyosmani @ twitter

Resources​

INP（Interaction to Next Paint）​

資料來源
Deprecate FID

INP 在 2024 年 3 月會取代 FID（First Input Delay），FID 會變成 Depprecated（資料來源）。

INP 反應的是使用者在網頁上互動（例如，用滑鼠點擊、在觸控螢幕上點擊、或鍵盤操作）後得到回饋所需的最長時間（扣除掉 outlier），數字越低表示對使用者的反應越快、越可靠。

Good INP values are 200 milliseconds or less, poor values are greater than 500 milliseconds, and anything in between needs improvement.

檢測原則​

不要一開始就花時間和力氣在 reproduce slow interactions，而是當 slow interactions 被發現是，在使用 performance profiler 來找問題背後的原因。

參考資料​