文章目錄
為了更準確的評估使用者在網頁上的互動情形，2023年5月時，Google 宣布將於 2024年3月對核心體驗指標 (Core Web Vitals) 進行更新，其中一項重要變更，就是將現有的 FID （First Input Delay） 指標改為 INP (Interaction to Next Paint) 指標。同時這一項變動，也會同步更新於 Google Search Console 核心指標頁面中顯示。
到底 FID 與 INP 兩者間的差異是如何？為何 INP 能夠更準確評估使用者在網頁上的狀況？今天就讓將能帶大家一起來了解，這個 2022年新竄起的核心指標吧！
什麼是 INP 指標？
INP 這個指標會觀察使用者在網頁造訪期間發生的點擊、輕觸和鍵盤互動所經歷的延遲時間，評估網頁回應使用者互動的整體效能。最終 INP 值是觀測到最長的互動時間，忽略離群值。 參考：Google
INP 指標是用來衡量網頁在使用者互動後，下一次畫面更新的時間。這個數值越低，代表網頁回應的速度越快，使用者體驗越好。
過去，Google 使用 FID 指標來衡量網頁的互動性，而 FID 指標只測量使用者首次與網頁互動時的延遲時間。
根據 Google Chrome 瀏覽器的資料，使用者在網頁上花費 90% 的時間都是在頁面讀取完成之後。因此，評估網頁在使用者互動後的回應速度非常重要，而INP 指標就是用來衡量這個回應速度的。
INP 指標是以使用者在網頁上的所有互動為基準，計算出整體的回應速度，具備良好回應速度的網站，應在網頁與使用者互動後，能夠立即提供視覺回饋，例如：當使用者點擊按鈕時，按鈕應該立即變色、當使用者輸入資料時，網頁應該立即更新顯示內容。
INP 指標會根據下一個畫面更新的時間來計算的，如果網頁在使用者互動後立即更新畫面，使用者可能會覺得網頁沒有反應，會按下「立即更新」，這樣的舉動也就告訴Google 使用者在該頁面體驗不佳。
INP 與 FID 有何不同？
| INP | FID | |
| 數值計算基準 | 考量所有網頁互動 | 僅計算初始互動的輸入延遲時間 |
| 評估要點 | 更全面地評估整個互動過程中的回應速度 | 重視的是網頁載入後初次互動的使用者體驗 |
簡而言之， INP 指標比 FID 指標能更準確的整體回應速度評估，更貼近使用者在網頁上的實際體驗。
INP 指標如何計算
INP（Input Timing）是一項衡量網頁互動反應速度的指標，它收集網頁上的所有互動行為並為每個互動事件分配一個分數。
當用戶離開頁面時，系統開始計算 INP值，較低的 INP值表示頁面的互動響應速度較快，用戶體驗較佳。
- 對於互動較少的頁面，使用最差的互動時間（即第100百分位數）。
- 對於互動較多的頁面，選擇互動時間分佈在百分位99或98的數值作為INP的結果。
根據目前的公開文檔，INP 的計算僅考慮三種互動方式：使用滑鼠進行點擊、觸碰觸控螢幕以、按下鍵盤上的任意鍵。
值得注意的是，滑鼠的停留（hover）和頁面的滾動（scrolling）不會納入INP的計算，但使用鍵盤進行頁面滾動可能會觸發INP的測量。
INP 的計算從用戶互動開始，包含後續的處理延遲和顯示延遲，直到下一個畫面被繪製為止。有些互動事件因為本身就比較複雜，需要較長的處理時間，例如從網路獲取遠端資料或進行複雜的瀏覽器內部資料處理，當遇到這種情況時，只要在處理完成前提供即時的視覺反饋給用戶，這些處理時間就不會被計入INP值中。
合格的 INP 指標
如上圖所示，Google 對 INP 指標的基準點，是200毫秒、500毫秒，各項指標還會以綠、橘、紅，做為分界：
- INP 低於或等於 200 毫秒：綠色（良好）
- INP 超過 200 毫秒，低於 500 毫秒：橘色（需要改善）
- INP 超過 500 毫秒：紅色（不佳）
如何改善 INP指標？
先找出造成 INP 不佳的原因
優化網頁的前，需要先了解網頁哪裡需要優化，大家可以使用以下幾個工具，或者手動來找尋 INP 指標不佳的頁面，再進行問題修正。
優化網頁互動
INP的計算，主軸都圍繞著「互動」，而互動可分為三個階段，就是我們可以進行優化調整的地方：
- 輸入延遲 (Input Delay)
網頁在使用者操作後，需要一些時間才能做出反應，這個時間就是輸入延遲時間。輸入延遲時間越長，使用者體驗就越差。
輸入延遲時間可能會受到多種因素的影響，包括：
- 網頁上的其他活動
- 指令碼的載入、解析和編譯
- 資料的擷取和處理
- 計時器函式的執行
- 快速連續的互動
為了改善使用者體驗，應儘量縮短輸入延遲時間。
- 改善回呼（Callback ）效能
要改善事件回呼的效能，最好的方法就是減少回呼中需要執行的程式碼量，但是，互動的邏輯有時很複雜，可能無法大幅減少程式碼量。
在這種情況下，可以嘗試將回呼中的程式碼分割成多個部分。這樣可以避免回呼佔用主執行緒過長的時間，讓其他互動可以更快地執行。
setTimeout 函式可以用來分割程式碼，它也會在新工作中執行指定的回呼程式碼，您可以直接使用 setTimeout 函式，也可以將其封裝成獨立的函式，以便更方便地使用。
- 減少降低顯示延遲 (Presentation Delay)
降低顯示延遲的方法有幾個，各項詳細的優化技巧，請參考 改善與下一個顯示的內容的互動方式。
- 最小化 DOM 大小
- 使用 content-visibility 延後轉譯畫面外元素
- 使用 JavaScript 轉譯 HTML 時請降低效能成本
結語
希望透過本文，各位讀者能更了解 INP 指標的意義、計算方式以及對網站優化和 SEO 的影響，在 2024年3月過後，這項指標將會對「提升網站的使用體驗」和「關鍵字排名」有更大影響。
優化 INP 指標是一個疊代程序，需要仔細找出欲優化的頁面、並嘗試不同方法測試，可能優化速度緩慢，需要很多時間與精力，但總的來說，面對未來的 SEO 環境，是非常值得投入的項目。
延伸閱讀：