使用 Google 的 Next Paint 優化新的參與度指標

Core Web Vitals 是 Google 定義的一組指標，用於衡量網站的用戶體驗有多好。 他們於 2021 年首次成為資格賽信號。

雖然指標定義隨著時間的推移進行了調整，但 Interaction to Next Paint 指標的引入是自 Core Web Vitals 計劃啟動以來最大的變化。

什麼是 Next Paint (INP) 交互？

Next Paint 參與度是衡量網站響應用戶交互速度的指標。 它測量用戶輸入（例如單擊按鈕）與下次刷新頁面內容（“下一次繪製”）之間經過的時間。

為了在 Google 中獲得更好的排名，這種交互延遲應該小於 200 毫秒。 這確保了網站對用戶的響應能力。

核心網絡生命力正在發生怎樣的變化？

谷歌宣布，到 2024 年 3 月，與 Next Paint 的交互將成為三個核心 Web Vitals 指標之一。然後，對用戶輸入響應太慢的網站可能會遭受較差的搜索結果排名。

INP 將取代當前的第一輸入延遲 (FID) 指標。 雖然 FID 也衡量響應能力，但它的局限性更大，因為它只關注第一次用戶交互。 它還僅測量開始處理輸入事件之前的延遲，而不是等到用戶可以看到結果。

目前，只有 64.9% 的移動網站在 Next Paint 的參與度指標上表現良好，並且獲得良好的 INP 分數比獲得良好的首次輸入延遲分數更難。

如何衡量網站上 Next Paint 的參與度指標？

運行網站速度測試，看看您的網站加載速度以及響應用戶輸入的速度。

測試完成後打開“Web Vitals”選項卡。 您可以在頁面底部看到“下一次繪製參與度”指標。

在這種情況下，只有38%的用戶擁有良好的INP體驗。

如何優化與 Next Paint 的交互？

當瀏覽器需要大量 CPU 處理才能刷新頁面時，就會出現交互延遲。 發生這種情況的原因有兩個：

• 正在進行的後台任務正在阻止處理用戶輸入
• 處理用戶輸入本身需要花費大量時間

後台任務通常發生在初始頁面加載期間，但也可能稍後發生。 它們通常是由網站上嵌入的第三方代碼引起的。

響應用戶交互可能需要大量處理。 如果無法對此進行優化，您可以考慮顯示一個微調器以提供視覺反饋，直到處理任務完成。

JavaScript 代碼執行是最常見的處理類型，但複雜的視覺更新也可能需要很長時間。

使用 Chrome DevTools 分析性能

Chrome DevTools Performance Profiler 顯示哪些任務花費了很長時間並且應該進行優化。 開始錄製，單擊頁面上的項目，然後單擊視圖中最長的條。

這使您可以識別代碼是來自第三方還是您自己的網站。 您還可以深入了解如何加快任務速度。

檢查總塊時間指標以識別後台任務

總阻塞時間指標跟踪可能阻塞其他代碼執行的後台 CPU 任務的頻率。 如果用戶在任務正在進行時與頁面交互，則瀏覽器首先完成該任務，然後再處理輸入事件。

您可以使用 Google Lighthouse 等工具來查看如何優化此指標。

如果您網站上的繁重處理任務是核心網站代碼的一部分，則您需要與開發團隊合作來優化它們。 對於第三方，您可以檢查是否仍然需要該腳本或聯繫供應商的客戶支持以查看是否可以優化代碼。

監控與 Next Paint 的交互

想要跟踪您在 INP 和其他 Core Web Vitals 上的表現嗎？ DebugBear 可以跟踪您的網站速度並幫助您優化它。

立即開始 14 天免費試用，享受更好的用戶體驗。

結論

Next Paint 參與度指標代表了 Google 核心網絡生命力自最初宣布以來的最大變化。 INP 解決了之前的“首次輸入延遲”指標的缺點，並更好地表示了用戶如何體驗網站。

在 2024 年排名變化開始之前，檢查您的網站在“與下一次繪製的交互”指標上的表現。這樣，您將有足夠的時間來確定優化措施並使您的網站更快。

嘗試 DebugBear 14 天免費試用。