FID

定義

FID（First Input Delay）衡量使用者第一次互動到瀏覽器開始處理事件的延遲。由於它只看第一次互動，無法反映整體互動體驗，因此 Core Web Vitals 已改用 INP 作為主要互動指標。

為什麼重要

• 2024 年 3 月前是 Core Web Vitals 的互動指標
• 理解為何 INP 取代 FID（INP 更貼近真實互動體驗）
• 有助於定位頁面載入時主執行緒被阻塞的問題
• 避免只追 FID 而忽略後續互動的延遲問題
• FID 只能捕捉「第一次」互動，遺漏大量使用者行為
• 需要使用者真的互動才能測量（純載入無法觸發）
• 了解 FID 有助理解 Web Vitals 的演進歷史

怎麼做（實作重點）

• 把優化目標轉移到 INP：移除長任務與減少 JS 負擔
• 延後非必要 script（async/defer），拆分 bundle
• 減少主執行緒阻塞（第三方 script、同步計算）
• 使用 TBT（Total Blocking Time）作為 lab 環境的診斷指標
• 避免在 DOMContentLoaded 執行耗時任務
• 把密集計算移到 Web Worker
• 監控工具現已轉向 INP，FID 資料可作為歷史參考

範例

// 雖然 FID 已被取代，仍可監控作為參考
import { onFID } from 'web-vitals';

onFID((metric) => {
  console.log('FID:', metric.value, 'ms');
  // 注意：建議同時監控 INP
});

// 改用 INP（推薦）
import { onINP } from 'web-vitals';
onINP((metric) => {
  console.log('INP:', metric.value, 'ms');
});