與下一個油漆的相互作用 (INP)

隨著網絡開發的不斷發展，網站性能衡量也必須不斷發展，以便繼續優先考慮用戶體驗。 下次繪製交互 (INP) 是一項核心 Web 重要指標，用於評估網頁對用戶交互的響應能力。 它使用對用戶訪問頁面的整個生命週期中發生的所有單擊、敲擊和鍵盤交互的響應時間的觀察。 最終的 INP Web Vitals 基於最長的交互，忽略異常值。 Google 很快將使用 INP 作為新的 Core Web Vital 衡量標準，衡量網站處理用戶交互的速度。 由於 Google 是最受歡迎的網絡瀏覽器，在美國擁有 2.46 億唯一 Google 用戶，因此您的網站必須針對其算法進行優化。

更換 FID

首次輸入延遲 (FID) 將於 2024 年 3 月被交互到下一次繪製所取代。由於 FID 僅考慮第一次交互的輸入延遲，因此它不考慮整個畫面。 事實上，FID 甚至沒有考慮運行事件處理程序所需的時間或呈現下一幀的延遲。

從 FID 到 INP 的轉變表明衡量網絡性能的方式發生了轉變。 不只關注第一次交互，而是考慮網站的整體效率。 由於用戶體驗不會在第一次交互後結束，因此確認所有後續交互非常重要。 這將要求網絡開發人員全面提高整個網站的性能。 研究表明，只需將網站加載時間縮短十分之一秒，零售網站的轉化率就會提高 8.4%。

如何衡量

對於大多數網站，會報告具有最差延遲的 Interaction to Next Paint 值。 然而，對於具有大量交互的網站，隨機錯誤可能會導致無響應網站上的 INP 異常高。 為了解決此問題，如果網站的交互次數超過 50 次，它將忽略每 50 次交互中最高的一次。 如果網站的交互次數為 50 次或更少，則將使用最高值。 除此之外，它還將使用所有頁面瀏覽量的 75% 作為進一步刪除異常值的方法，這意味著如果 75% 的頁面獲得良好分數，那麼它將通過 INP 標準。 這樣可以更好地衡量響應能力。

INP 可以在現場和實驗室進行測量。 但值得注意的是，來自現場實際用戶的數據將使您對性能有更全面的感受。

在該領域

除了 INP Web Vitals 之外，來自真實用戶監控 (RUM) 的現場數據還可以為您提供重要數據，突出顯示哪些特定交互對 INP 值本身負責、交互是否發生在頁面加載期間或之後、交互類型 (單擊、按鍵或點擊）。

此外，如果您的網站可以包含在 Chrome 用戶體驗報告中，則可以在 PageSpeed Insights 中從 CrUX 獲取 INP 字段數據。 所提供的信息包括 INP 的原始級別圖片，如果可能，還包括頁面級別數據。 CrUX 的主要缺點是，雖然它可以幫助您發現問題，但它沒有為您提供足夠的信息來找出問題所在。 同時，RUM 可以幫助您檢查導致交互緩慢的網頁、用戶或用戶交互的詳細信息。 將 INP 歸因於特定的相互作用可以防止浪費精力和猜測。

在實驗室

理想情況下，一旦您的現場數據得出您的網站交互速度緩慢的結論，就應該開始實驗室測試。 如果沒有現場數據，可以通過一些方法在實驗室中復制緩慢的交互。 例如，您可以跟踪用戶流程並一路測試交互，或者您可以在頁面加載時（這是主線程最繁忙的時候）與頁面交互。

優化您的網站

優化您的網站與 Next Paint 的交互將使其在 SERP 上排名靠前。 優化的第一步是識別問題。 運行現場和實驗室測試，以了解您網站上的哪些交互最慢。

輸入延遲

當用戶在網頁上發起交互時，輸入延遲開始；當交互開始運行的事件回調時，輸入延遲結束。 輸入延遲的長度可能取決於頁面上的其他活動，例如腳本加載、解析、獲取處理、計時器函數或彼此重疊發生的其他交互。 無論原因如何，Web 開發人員的目標都是減少輸入延遲以改善 INP Web Vitals。

縮短輸入延遲的一種主要方法是減少頁面加載期間與腳本評估相關的長任務的可能性。 即使在 JavaScript 執行之後，瀏覽器也必須在後台完成多項不可避免的任務，例如語法驗證、將其編譯為 1 和 0 以供機器理解，然後最終完成任務。 採取措施減少完成每個步驟所需的時間將減少輸入延遲。

事件回調

與 Next Paint 測量的交互不會因輸入延遲而結束。 優化事件回調以快速運行以響應用戶交互也將改善 INP Web Vitals。 一般來說，分配盡可能少的工作將最有效地縮短事件回調。 但是，如果您網站的交互邏輯過於復雜，您可以嘗試分離事件回調，以避免聚合工作成為阻塞主線程的長任務。

另一種讓步技術是在事件回調中構造代碼以限制運行的內容。 儘管這是一種更先進的技術，但僅運行應用視覺更新所需的邏輯並將所有其他內容推遲到後續任務可以保持回調輕量並減少渲染時間。

另一件可能導致渲染問題的事情是，在同一個任務中讀取和更新元素的樣式，而兩個任務之間沒有任何暫停。 為了避免這個問題，Web 開發人員應該首先讀取樣式，然後使用 window.requestAnimationFrame 函數對寫入操作進行排隊，這有助於避免渲染問題。

演示延遲

呈現延遲是事件回調結束與瀏覽器繪製下一幀之間的時間。 減少呈現延遲可顯著提高“與下一個繪製的交互”值。

最小化文檔對像模型 (DOM) 大小可以使頁面快速呈現。 最小化 DOM 大小的最簡單方法是減小初始大小。 減小 DOM 大小可以使網站速度更快，因為瀏覽器需要讀取的代碼更少，這也意味著可以更快地處理 DOM 的更新。

結論

INP 取代 FID 表明 Web 開發發生了重要變化。 全球有 51.8 億互聯網用戶，很明顯，網站性能必須變得越來越高效。 其中許多用戶的互聯網速度也低於平均水平，並且設備規格較低。 這就是 Google 首先發布 Core Web Vitals (CWV) 報告的原因 - 因此可以優化網站以覆蓋每個用戶，而不僅僅是具有高速功能的用戶。 通過跳轉到 INP，交互性和用戶體驗現在被優先考慮，因為優化現在必須超越首次輸入延遲。

INP Web Vitals 是根據網站上的最差延遲期進行分配的，同時考慮了用戶訪問頁面的整個生命週期中發生的所有點擊、敲擊和鍵盤交互的響應時間。 與 Next Paint 的交互可以在現場進行更真實的測量，或者在實驗室中進行更多分析。 要針對 INP 優化您的網站，請通過減少長任務來減少輸入延遲，使用讓步技術縮短事件回調並避免佈局抖動，並通過最小化 DOM 大小來減少呈現延遲。 自我了解 INP 是為了讓您的網站為 2024 年 3 月即將發生的重大變化做好準備。

如需優化您網站的幫助，請立即聯繫 Coalition Technologies 專家！