與下一個繪製動作的互動已正式成為 Core Web Vitals 🚀?

「與下一個顯示的內容互動」現已成為穩定的 Core Web Vitals 指標,取代「首次輸入延遲時間」。

就在今天!經過多年的研究,我們終於準備好讓「與下一個顯示的內容互動 (INP)」成為穩定的 Core Web Vitals 指標。這在評估互動回應方式方面相當重要,也解決了首次輸入延遲時間 (FID) 的許多缺點。

這張圖表以三個階段顯示 INP 在 Web Vitals 計畫中的進度。自 2022 年 5 月起,Chrome 導入 INP 做為實驗性指標。並於 2023 年 5 月宣布 INP 將於 2024 年 3 月成為 Core Web Vitals。現在,我們正式將 INP 納入 Core Web Vitals,取代 FID。
與下一個顯示的內容 (INP) 宣傳時間軸互動。

在這篇文章中,我們將快速回顧現今的實際異動、為 Chrome 工具說明淘汰及移除 FID 的具體時程,並分享一些實用資源,協助您找出並修正 INP 問題。

今日異動內容

現在,Chrome 端的所有 Core Web Vitals 工具都會反映 INP 的穩定狀態 (如適用)。舉例來說,PageSpeed Insights、CrUX 資訊主頁和 Web Vitals 擴充功能等工具,都會在 Core Web Vitals 指標的三大面向中顯示 INP。特別是 PageSpeed Insights 的「Core Web Vitals」評估邏輯會評估 INP 成效,而非 FID。如要進一步瞭解 Search Console 的對應異動,請參閱 Google 搜尋團隊的網誌文章

此外,即日起,某些工具可能會針對 FID 顯示淘汰通知,警告您該指標不再是 Core Web Vitals 指標,並將移除。您可以參閱下方 FID 淘汰時間表一節,瞭解確切日期,確保 FID 已完全轉換。

FID 淘汰時間表

由於 INP 已取代 FID 做為 Core Web Vitals 指標,Chrome 現已正式停止支援 FID。換句話說,Chrome 工具不再保證提供 FID,開發人員可以在 2024 年 9 月 9 日前轉換至 INP。

這對 Chrome 使用者體驗報告 (CrUX)PageSpeed Insights API 的使用者來說尤其重要。凡是從這些 API 處理 FID 資料的應用程式,都必須在 9 月 9 日前轉換至 INP,以免服務中斷。明確來說,這是最新版本的 API 中的破壞性變更,主要版本編號不會大幅更動!

最佳化 INP 的資源

無論是首次查詢 INP,或是回應專家,INP 最佳化資源集合都能做為起點,幫助您找到所需資源。這個常態性文件的內容涵蓋各項資訊,包括指標本身定義、在本機和實際評估技巧、各種應用實例的最佳化實用建議,以及一份實際個案研究清單,其中提供實際指引。

您可使用這些文件,按照下列一般工作流程找出並修正網站上的 INP 問題:

  1. 參閱標準 INP 文件,瞭解 INP 如何評估使用者互動的回應。

  2. 查看實際使用者資料來評估網站的 INP 成效。至少 75% 的 INP 體驗應在 200 毫秒內回應使用者輸入內容,才算是優質。如果您的網站已具備良好 INP,別擔心!

  3. 如有必要,請檢測網站以收集使用者體驗的診斷資訊。這類資訊非常重要,例如使用者互動的是哪些網頁元素、載入速度緩慢的原因,以及其他實用資料。整體來說,這項資訊有助您瞭解改善目標的最大機會。

  4. 使用 Chrome 開發人員工具在本機重現緩慢互動。這有助於您瞭解實際發生的情況,以及違規程式碼是什麼。

  5. 將程式碼最佳化,在處理使用者互動時盡可能減少工作量:

  6. 在本機評估您所做的變更,並監控實際使用者體驗,確保 INP 成效能快速取得 (持續保持!)

希望這份指南能協助您找到最佳化 INP 的正確路徑。如果過程中遇到任何問題,隨時可以在 Stack Overflow 上張貼標記 interaction-to-next-paint 的問題,取得協助。

我們長期推出 INP 做為 Core Web Vitals,因此回顧我們在 2021 年的第一篇貼文,說明打造更出色的回應速度指標。從那時起,我們採納了所有令人讚嘆的社群意見回饋,並研擬一套指標,相信能引導開發人員改善缺乏資源的使用者體驗,最終打造更優質的網路環境。感謝大家共同打造這個指標,也謝謝你努力提升回應狀態!