Core Web Vitals 是 Google 提供的一組指標，包含 LCP, INP, CLS。

First Paint (FP)

螢幕上出現第一個「與背景顏色不同的 pixels」的時間點

First Contentful Paint (FCP)

螢幕上出現第一個 content 的時間點

當 viewport 中「最大的 element」出現在螢幕上的時間點

element 可以是 <img> 或 <p>，具體考慮範圍可以見: MDN Web Docs
有一個類似的叫 First Meaningful Paint (FMP)，但是因為不容易定義所以已經被棄用了
FCP 和 LCP 的範例 | https://web.dev/articles/lcp

所有用戶與頁面的互動中，「延遲時間最長的互動」的延遲時間

「互動」只考慮 mouse click, keyboard press, touchscreen touch
為了去除網頁當機造成的延遲，每當互動次數超過 50 次時就會將目前最長的延遲時間去掉
延遲時間的計算方式 | https://web.dev/articles/inp

從 FCP 開始，到 5s quiet window 之前的「最後一個 long task 的結束時間」的時長

long task 是指執行超過 50ms 的 task
quiet window 是一段期間內: 沒有 long tasks，還在等待的 GET request 不超過兩個
TTI 的測量方式 | https://web.dev/articles/tti

在一段時間內 (通常是 FCP 到 TTI) 的「所有 long task 的 blocking time 的總和」

由於瀏覽器不能 interrupt 正在執行的 task，當 main thread 正在執行 long task 時可能會 block 住用戶的互動，因此當 task 的執行時間遠超過 50ms 時，用戶就有可能會注意到「卡頓」的情形
一個 long task 的 blocking time 指的是其在 50ms 後的剩餘執行時間

在網頁生命週期內的所有 session windows 中「CLS 最高的 window 的分數」

layout shifts 指的是在兩個連續的 frame 間，頁面中的某些元素改變了 start position
- 發生變化的元素稱為 unstable elements
- 如果是加入新元素，只要沒有影響到原本元素的 start position 就不會被算入
layout shifts score 的計算方式是 impact fraction * distance fraction
- impact fraction 指的是所有 unstable elements 佔的「區域總和」 (包括當前 frame 和前一個 frame) 佔 viewport 的比例
- distance fraction 指的是所有 unstable elements 中「最大的水平或垂直位移距離」佔 viewport 寬高的比例
- 範例
session window 代表著一連串的 layout shift
- 從第一個 layout shift 開始計算 window，當有新的 layout shift 發生就會把 window 延長
- 當 1s 內都沒有任何 layout shift 發生、或是 window 超過 5s，就會終止當前 window，下一個 layout shift 發生時再開始計算下一個 window
一個 session window 的 CLS 是其內所有 layout shift 的分數加總