使用 INP 重新定義 Web 效能標準

介紹

網路效能不再是技術細節，而是使用者體驗網路方式的遊戲規則改變者。 核心網路生命體上的最新成員是與下一個繪製的交互作用（INP）。這個新指標彌補了衡量網頁回應速度的差距，有望成為互動延遲的最終衡量標準，它實際上可以取代首次輸入延遲（FID）。

我們將深入探討INP的含義、為什麼您應該關心它、如何衡量INP，以及一些您可以立即應用來推動改進的可行技巧.

什麼是INP？

那麼，什麼是INP？簡而言之，它測量從用戶與網站互動（例如單擊按鈕或在表單中鍵入）到螢幕上彈出下一個視覺更新所花費的時間。這裡的想法是捕捉用戶在訪問網站時實際感受到的延遲。

與僅查看瀏覽器回應使用者輸入所需時間的FID不同，INP 的視野更廣闊。它檢查整個過程，從最初的延遲到視覺響應，從而更全面地了解網站的響應能力。

為什麼 INP 很重要？

1、使用者體驗

讓我們面對現實：當我們與網站互動時，我們希望事情能夠快速發生。如果有明顯的滯後，那就令人沮喪。高延遲可能會導致用戶不滿意、參與度降低，甚至完全放棄網站。

2. 整體響應

FID僅顯示了謎題的一部分：瀏覽器主執行緒有多繁忙。但這只是開始。 INP 透過測量使用者感知的總延遲來填補空白，使其比 FID 更可靠地衡量反應能力。

3. 面向未來的指標

Google 將把 INP 整合到其排名演算法中，因此現在掌握 INP 可以讓您在以後的搜尋排名中處於領先地位。

如何測量 INP？

要測量單一頁面瀏覽量的 INP，請執行以下操作：

1. 追蹤會話期間的所有使用者互動 - 點擊、敲擊和按鍵。
2. 注意每次互動在螢幕上產生視覺更新所需的時間。
3. 該頁面的 INP 分數是基於您測量的最長交互延遲。

透過這種方式，您將看到響應能力的最壞情況，這對於使用者感知至關重要。

INP評分指引：

• 好： INP ≤ 200ms
• 需要改進： 200ms
• 差：INP> 500 毫秒

診斷和改善 INP

現在我們知道了什麼是INP，讓我們討論如何讓它變得更好！以下是一些優化處理使用者互動的不同階段的策略：

1. 減少輸入延遲

• 審核您的主執行緒：使用 Chrome DevTools 等工具來發現阻塞主執行緒的任務，並將其分解為更小的、可管理的區塊。
• 最佳化 JavaScript： 清理程式碼 — 最小化、壓縮和消除任何未使用的 JavaScript。如果您使用 React 等工具，請利用並發渲染來協助更有效地指派任務。

2. 改進事件處理

• 反跳和限制：對於滾動或調整大小等高頻事件，使用技術來限制它們觸發其他進程的頻率。
• 使用被動事件監聽器：透過應用被動監聽器來提高觸控和捲動事件的效能。

3.優化繪畫

• 減少佈局轉換：盡可能避免更改 DOM，並始終使用 CSS 過渡而不是 JavaScript。
• 專注於優先繪製： 使用 Lighthouse 確定站點的哪些部分需要優先繪製，並專注於這些路徑。

4.使用瀏覽器優化

• 預先載入基本資源：事先準備好字體、圖片和腳本，以便在使用者需要時提供它們。
• 使用 Web Workers： 將繁重的計算推送給 Web Workers，以防止阻塞主執行緒。

INP 測量工具

要密切注意您的 INP，請考慮使用這些方便的工具：

• Lighthouse：此工具會審核您網站的回應能力，並提供有關如何改進的實用建議。
• Chrome DevTools 效能面板： 分析互動時間軸和延遲。
• PageSpeed Insights：為您提供來自現場的即時數據以測量 INP 並提供改進建議。

結論

INP 或 與下次繪製的互動，是一種變革性指標，它將 UX 置於 網路效能 領域的首位。它代表您的網站對現實互動的回應程度，使其成為用戶滿意度和搜尋引擎優化的重要因素。透過了解 INP 並制定策略來增強它，您不僅可以跟上不斷發展的性能標準，還可以確保您的用戶每次訪問您的網站時都能享受無縫、愉快的體驗。如果你喜歡這個部落格並且想了解更多關於前端開發和軟體工程你可以在Dev.to上關注我。

以上是使用 INP 重新定義 Web 效能標準的詳細內容。更多資訊請關注PHP中文網其他相關文章！