INP
INP 衡量互動延遲（使用者操作到畫面更新）。它取代 FID，反映 JS 主執行緒是否被長任務阻塞。
定義
INP（Interaction to Next Paint）是 Core Web Vitals 的互動指標，用來衡量使用者互動後到下一次畫面更新的延遲。INP 受長任務（long tasks）、JS 執行、第三方 script、以及主執行緒阻塞影響。
為什麼重要
- 直接影響互動體感與使用者對「網站是否卡頓」的感受
- 2024 年 3 月正式取代 FID，成為 Core Web Vitals 互動指標
- 偏差會拖累轉換率與使用者滿意度
- 反映真實的互動品質，不只是第一次點擊
- 第三方 script（分析、廣告）常是 INP 問題的元兇
- 過多 JS 會阻塞主執行緒，導致點擊無回應
- 良好的 INP 讓使用者感覺網站「順暢」
怎麼做（實作重點）
- 拆分 JS、延後非必要 script、使用 async/defer
- 識別並消除長任務（> 50ms）：用 DevTools Performance 分析
- 使用 Web Worker 把耗時計算移出主執行緒
- 減少第三方 script 負擔：延後載入、使用 facade
- 優化事件處理：debounce/throttle、避免複雜 DOM 操作
- 使用 requestAnimationFrame 安排視覺更新
- 監控 INP：用 web-vitals 函式庫或 RUM 持續追蹤
範例
html
import { onINP } from 'web-vitals';
onINP((metric) => {
console.log('INP:', metric.value, 'ms');
console.log('Rating:', metric.rating); // 'good' | 'needs-improvement' | 'poor'
// 回報給分析服務
analytics.track('INP', {
value: metric.value,
rating: metric.rating
});
});html
// 長任務分割（實驗性 API）
async function processItems(items) {
for (const item of items) {
processItem(item);
// 每處理一項就讓出主執行緒
if ('scheduler' in window && 'yield' in scheduler) {
await scheduler.yield();
} else {
await new Promise(r => setTimeout(r, 0));
}
}
}相關連結
常見問題
關於這個詞彙的常見問答。