INP 互動延遲全解析：從輸入延遲到繪製延遲，精準優化頁面反應速度

根據 Chrome 開發者官方文件與 web.dev 的指南，INP（Interaction to Next Paint）並非單一數據，而是由三個連貫階段組成。以下提供實證的定義與可操作的優化方向。

INP 三階段解析

• 輸入延遲 (Input delay)：從使用者啟動互動（例如點擊或輕觸）開始，直到事件回呼開始執行為止的時間。官方定義為「當使用者與頁面互動時開始，並在互動的事件回呼開始執行時結束」。輸入延遲不可能為零，但開發者可以控制其長短，關鍵是判斷是否有其他工作在主執行緒上執行，阻礙了回呼及時啟動。
• 處理時間 (Processing duration)：事件回呼從開始到執行完畢所需的時間。官方定義為「事件回呼完整執行所需的時間」。任何在事件監聽器中執行的程式碼都會延遲互動，包括框架狀態更新、函式庫渲染以及第三方腳本。
• 呈現延遲 (Presentation delay)：事件回呼執行完畢後，瀏覽器呈現顯示互動結果的下一幀畫面所需的時間。文件指出「高呈現延遲表示在事件處理程式碼執行後，渲染結果時出現了延遲」。

實證優化建議

• 全面縮短每一階段：不要只優化輸入延遲，而應「盡可能縮短互動的每一個部分」，這樣網站才最有機會達成 INP「良好」門檻，無論使用者使用何種裝置。
• 高輸入延遲：當 INP 分解顯示輸入延遲過高時，請調查互動回呼開始前，主執行緒是否被其他工作佔用。這意味著互動本身「可能不是 INP 緩慢的直接原因」，改善方法包括評估頁面載入時的資源載入與 JavaScript 程式碼最佳化。
• 高處理時間：若處理時間過長，則「互動事件處理程序是 INP 緩慢的直接原因」。解決方案包括：減少或延遲事件處理程序執行的工作，檢討所有事件監聽器的程式碼——包括第一方、框架、函式庫以及第三方腳本。可考慮使用程式碼分割 (code-splitting)、漸進式載入 (progressive loading) 以及拆分長時間任務 (breaking up long tasks) 來大幅改善回應時間。
• 高呈現延遲：在事件回呼執行完畢後，需調查瀏覽器的渲染工作是否有瓶頸。目前關於呈現延遲的完整定義與完整補救指引，在提供的資料中未能完整引用。

測量與診斷

若要手動診斷緩慢的互動，可使用 Chrome 開發者工具中的「INP breakdown」功能。建議在錄製時嘗試多種不同的使用者互動，以全面了解頁面 INP 的最大貢獻者。INP 的「良好」門檻為低於 200 毫秒，「待改善」範圍為 200 至 500 毫秒，超過 500 毫秒則表示回應速度極差。