互動至下一次繪製 Interaction to Next Paint (INP)

Interaction to Next Paint（INP，互動至下一次繪製）是衡量網頁回應速度的指標，屬於 Core Web Vitals 的其中一項。它觀察使用者在頁面上點擊、輕觸或按下鍵盤後，瀏覽器需要多久才能把結果顯示在畫面上。

INP 在 2024 年 3 月取代了 FID（首次輸入延遲），成為 Core Web Vitals 的正式成員。FID 只看第一次互動的延遲，INP 則觀察整個瀏覽過程中的所有互動，所以更能反映使用者的真實感受。

INP 為甚麼重要

頁面看起來載入完成，不代表可以順暢使用。當使用者按下按鈕卻遲遲沒有反應，往往會重複點擊或直接離開。INP 就是用數字把這種卡頓感量化出來。

Core Web Vitals 屬於 Google 頁面體驗相關訊號的一部分，但它只是眾多因素之一，內容是否切合搜尋需求仍然更重要。換句話說，INP 不會讓一個內容薄弱的頁面突然排名上升，卻能減少因操作不順而流失的使用者，對轉換率有直接幫助。

INP 如何計算

一次互動的時間由三個階段組成：

1. 輸入延遲：使用者操作後，瀏覽器因為忙於其他工作而無法立即處理的等待時間。
2. 處理時間：執行事件處理程式（例如按鈕的點擊功能）所花的時間。
3. 呈現延遲：瀏覽器完成計算版面並把下一個畫面繪製出來的時間。

一個頁面訪問期間會有多次互動，INP 通常取其中最慢的一次（互動次數很多時，會略去極端值）。Google 評估時，是以真實使用者資料的第 75 百分位數為準。

INP 的評分標準

• 良好：200 毫秒或以下
• 需要改善：高於 200 毫秒至 500 毫秒
• 較差：高於 500 毫秒

常見的 INP 問題成因

• 頁面載入過多或過大的 JavaScript，主執行緒長時間被佔用。
• 第三方腳本，例如聊天視窗、廣告、追蹤碼，在使用者操作時同時運行。
• 頁面結構（DOM）過於龐大，每次更新畫面都需要大量計算。
• 點擊後在同一段程式中處理過多工作，才讓畫面更新。

如何改善 INP

1. 先量度：從 Google Search Console 的 Core Web Vitals 報表找出受影響的頁面群組，再用 PageSpeed Insights 查看真實使用者資料。
2. 減少或延後載入非必要的 JavaScript 與第三方腳本。
3. 把耗時的工作拆成較短的任務，讓瀏覽器有機會先回應使用者操作。
4. 簡化頁面結構，避免不必要的深層巢狀元素。
5. 每次修改後再次測量，確認真實數據有改善，因為實驗室工具的結果未必與真實使用者一致。

常見問題

INP 和 LCP 有甚麼不同？

LCP（最大內容繪製）衡量主要內容出現得多快，屬於載入速度；INP 衡量使用者操作後頁面回應得多快，屬於互動速度。兩者針對不同階段的體驗。

只有很少互動的網站也要留意 INP 嗎？

如果頁面互動很少，例如只是閱讀文章，INP 通常問題不大。但只要有選單、表單、篩選或展開內容等功能，仍然值得定期檢查。