tags: core-web-vitals、LCP、CLS、FID、INP
認識 Core Web Vitals
什麼是 Web Vitals
由 Google 定義出來的專有名詞，針對優秀的使用者體驗，提供品質指標的統整指南，主要是透過量化方式，提供工程師改善網站的方向，也是影響 SEO 排名的其中一個因素。
根據網站的不同面向，Web Vitals 提供多個指標：
- 最大的內容繪製 (LCP)
- 首次輸入延遲 (FID)
- 累計版面配置位移 (CLS)
- 首次位元組時間 (TTFB)
- 首次內容繪製 (FCP)
- 互動時間 (TTI)
- 總封鎖時間 (TBT)
- 與下一個顯示內容的互動 (INP)
什麼是 Core Web Vitals
Google 的 Chrome 團隊在 2020 年提出，用來衡量網站使用者體驗最重要的三種指標，分別代表 UX 三個不同面向：載入(Loading)、互動(Interactivity) 與 視覺穩定性(Visual Stability)。
💡 補充：
網站體驗核心指標會隨著時間演變(指標項目或計算公式)，皆可從官方說明文件和指標的 CHANGELOG 中取得最新變更資訊。
LCP - 最大內容繪製 (Largest Contentful Paint)
測量使用者開始載入網頁到在 可視區域(viewport) 內顯示 最大圖片或文字區塊 之間的時間(以秒為單位)。
- 評估網頁主要內容的載入速度
- Good: 頁面初次開始載入後的 2.5 秒內執行 👍
💡 補充：
最大的元素會隨著內容載入而改變：
範例一
最初的 LCP 是左上方文字，後續加載新的 DOM 後，在第五影格時候變成了圖片。
範例二
Instagram 標誌會相對提早載入，即使系統會逐步顯示其他內容，仍是最大的元素。
優化方向
任何阻礙頁面渲染的因素，都會造成 LCP 分數不佳，因此可針對以下方向做優化：
- 圖片載入時間
- 外部資源載入的時間（CSS、JS、Font）
- Lazy Loading
- Code Splitting
- Tree Shaking
大方向是針對第一幀內容越快載入越好，不需要的內容越晚下載越好。
CLS - 累積佈局偏移 (Cumulative Layout Shift)
評估網頁整個生命週期中每發生非預期版面配置位移：
- 視覺化內容的穩定性
- Good: 頁面 CLS 應維持為 0.1 以下
- 佈局偏移分數 = 影響可視範圍比例 * 移動距離比例
可視範圍比例 50% * 移動 25% = 0.125
優化方向
- 預先指定元素大小 (Placeholder)
- CSS 轉換動畫
FID - 首次輸入延遲時間（First Input Delay）
測量從使用者首次與網站互動 (點選連結、輕觸按鈕等) 到瀏覽器實際能回應互動所需的時間（單位為毫秒）。
- 評估互動
- Good: 100 毫秒以下 👍
💡 補充：
這個測量必須由用戶與網站的互動，因此這項測試的數據只會反應在使用者數據上，即不會出現在實驗室數據中(Lab Data)。
優化方向
瀏覽器的主要執行緒(Main Thread)忙於執行的 JavaScript 時，會無法立即回應使用者想要的互動，所以可以朝減少 JavaScript 執行方向優化：
- 拆分長時間的工作，最小化主執行緒的工作
拆分出能非同步處理，等瀏覽器有空時執行
- 減少 JavaScript 執行時間
- 減少第三方程式的影響
💡 補充：
可以透過 Webpack Bundle Analyzer 的視覺化介面，快速分析出打包後的結果，含打包哪些檔案、檔案大小等，決定是否要拆分模組、動態載入，或改用較輕量的套件。
ℹ️ Interaction to Next Paint (INP) 將於 2024 年 3 月取代 Core Web Vitals 中的 First Input Delay(FID)。
INP - 下次繪製互動時間 (Interaction to Next Paint)
觀察使用者在網頁造訪期間發生的點擊、輕觸和鍵盤互動所經歷的延遲時間，評估網頁回應使用者互動的整體效能（單位為毫秒）。
- 評估互動
- Good: 200 毫秒以下 👍
- 偏低表示網頁能穩定回應使用者輸入的內容
💡 補充：
滑鼠懸停 (hover) 和頁面捲動 (scrolling) 不會被納入 INP 的計算，但如果使用鍵盤捲動畫面，則可能會觸發 INP 的測量。
💡 FID (首次輸入延遲時間) vs. INP (下次繪製互動時間)：
- 互動次數
- FID 只會計入 「最初」 互動
- INP 會考量 「所有」 網頁互動
- 延遲時間
- FID ：初次互動的輸入延遲時間
- INP ：輸入延遲 + 處理延遲(執行事件處理所需的時間) + 顯示延遲(下一個影格繪製時間)
INP 會記錄使用者與網頁互動時發生的所有延遲，藉此全面評估回應速度，讓 INP 比 FID 更能準確反映整體回應速度。
優化方向
針對互動三階段進行優化調整：
- 輸入延遲時間 (Input Delay)
同 FID 方向
- 處理時間，計算完成事件回呼所需的時間 (Processing Time)
優化 event callback，細拆分處理邏輯，如善用
setTimeout - 顯示延遲，是指瀏覽器顯示下一個頁框，包含互動結果 (Presentation Delay)
最小化 DOM 大小、限制 CSS 選取器複雜度、使用
content-visibility屬性
測試工具
實驗室資料 (Lab Data)
在受控的環境(裝置及網路)中收集到的效能資料
優點
- 便於除錯和測試
- 快速重現
限制
- 無法反映真實用戶的環境(使用者的裝置功能及網路狀況)
- 無法關聯真實世界的頁面關鍵績效指標
代表工具
- Lighthouse
以電腦上的資源評量網站的效能指標，透過本機瀏覽器去測試網站
- WebPageTest
場域資料/使用者資料 (Field Data)
由真實用戶收集到的效能資料，又稱 Real User Monitioring (RUM)
優點
- 反映真實世界的使用者體驗
- 關聯到頁面關鍵績效指標
限制
- 有限的除錯能力
- 有限的指標收集範圍
代表工具
- Chrome User Experience Report
- PageSpeed Insights
透過線上工具取得目標網站的效能指標，拿 Google 的 server 去測試目標網站
💡 通常行動裝置分數會較電腦裝置較低
工具清單
線上
Browser Extension
Browser 內建
- Lighthouse (Chromium-based)
- Performance insights (限定 Chrome)
建議 undock 開發者工具 + network disabled cache + 無痕
結論
想要優化指標分數，靠的不只是前端，因為行銷(追蹤數據)、廣告(盈利收入)、設計(畫面/組件設計)和後端(response time)等，也會直接或間接影響到分數表現。
最後，不論指標、Lighthouse 分數、Performance insights 結果是高或低，最重要需關注的是使用者體驗，不需要過度追求高分數，但追求綠色標準還是有必要的。