Interaction to Next Paint（INP）是谷歌 Core Web Vitals 中最新增加的一項指標，對 WordPress 網站所有者來說非常重要。這是另一項衡量網站使用者體驗質量的指標，同時也會影響網站的搜尋引擎優化。
INP 跟蹤網站對使用者輸入的響應速度，例如，訪問者點選按鈕後多久就能看到效果。反應速度越快越好，這一點可能不足為奇。
為了幫助您瞭解如何在 Core Web Vitals 的這一部分中取得好成績，就像最大內容繪製、累積佈局偏移和首次輸入延遲一樣，我們為您準備了一份關於如何針對 WordPress 優化 INP 的詳細指南。在本文中，我們將向您介紹什麼是 INP、為什麼要關注它、如何測量 INP，以及最重要的，如何改進它。
什麼是 INP？
INP (即 Interaction to Next Paint) 是一個效能指標，對於網路開發人員來說正變得越來越重要。到 2024 年 3 月，它將取代首次輸入延遲 (FID)，成為 Google Core Web Vitals 的一部分。
INP 從使用者與網頁的第一次互動開始進行測量。例如，互動就是滑鼠點選或按鍵。測量一直持續到網頁對該輸入做出視覺響應為止。因此，INP 比 FID 更能全面地衡量網站的響應能力。
這兩個指標的主要區別在於測量的範圍和深度。FID 量化了從第一次使用者互動到瀏覽器開始處理請求的延遲時間。INP 則更進一步。首先，它從訪問者的角度測量了從使用者互動到下一次頁面更新的整個過程。這包括輸入延遲、處理時間和展示延遲的整個週期。
圖片來源：web.dev
此外，INP 觀察使用者訪問頁面整個過程中所有合格互動的延遲，而不僅僅是第一個互動。該指標報告最差的 2% 的使用者介面響應，重點關注最慢的響應時間。這種方法確保了 INP 能夠最真實地反映頁面最差情況下的使用者體驗。
為什麼 INP 很重要？
INP 對於瞭解和改善網站的使用者體驗至關重要。它是比 FID 更可靠的整體響應性指標。良好的 INP 值表示對使用者互動的快速視覺響應。然而，如果得分較低，則會導致使用者體驗令人沮喪。
INP 的重要性還在於它對搜尋引擎優化排名的影響。通過將 INP 納入核心網站生命週期指標，谷歌強調了使用者體驗在網站效能中的重要性。在使用者互動後表現出更快視覺反饋的網站很可能在搜尋排名中獲得青睞。但這也意味著相反的情況：有明顯延遲的網站可能會對其排名產生負面影響。
哪些因素影響 INP 表現？
與網頁對使用者互動的響應速度有關的各種因素都會影響 INP 指標。您可以將這些因素大致分為三個階段：輸入延遲、處理時間和呈現延遲。
- 輸入延遲：這一階段主要受 JavaScript 中所謂的長任務影響。如果使用者互動發生時瀏覽器已處於繁忙狀態，它就必須在處理互動之前完成任務，從而導致明顯的延遲。
- 處理時間：這一階段包括瀏覽器響應使用者輸入所需的時間。這一階段的延遲通常會導致挫敗感，有時表現為“憤怒點選（rage clicks）”，即由於缺乏即時反饋，訪問者會重複點選同一頁面元素。
- 演示延遲：最後一個階段是從事件回撥完成到瀏覽器能夠呈現下一幀互動結果的時間。
造成高 INP 的主要因素
在整個 INP 測量期間，有多種因素會導致延遲，包括
- 當 JavaScript 任務超過 50 毫秒時，它們被視為長任務。這些任務會阻塞主執行緒，延遲瀏覽器處理使用者下一次互動的能力。
- 當互動處理完畢後，瀏覽器必須呈現下一幀以反映變化。如果網頁較大或複雜，或存在佈局混亂（瀏覽器過度重新計算樣式和佈局）等問題，就會延遲下一幀的呈現。
- 需要大量資源載入和互動的網頁可能會出現 INP 延遲。這包括帶有大圖片、視訊或大量使用 CSS 和 JavaScript 的頁面。
- 使用第三方指令碼和工具（如跟蹤和分析指令碼）會增加載入和處理時間，影響頁面的響應速度。
- 緩慢的網路連線或高延遲也會產生影響。
如何測量 INP？
要了解和改進 WordPress 網站的互動性和響應性，關鍵在於測量 “下一步的互動”（INP）。值得慶幸的是，有幾種工具可以幫助您瞭解網站在此方面的表現：
- PageSpeed Insights– 您可能對它不陌生。輸入頁面 URL 後，您會收到一份詳細報告，其中包括您的 INP 值。
- Chrome DevTools： 瀏覽器開發工具預設內建在 Chrome 瀏覽器中，可提供 INP 的詳細明細，包括輸入延遲、處理時間和呈現延遲。
- SpeedVitals Core Web Vitals Checker：該工具提供的 Core Web Vitals Checker 可測量包括 INP 在內的各種效能指標。它通過 Chrome 使用者體驗報告 (CrUX) API 提供來自真實使用者的現場資料。
- Lighthouse：Lighthouse 是 Chrome DevTools 中的另一款工具，可用於深入分析網站效能。
上述大多數解決方案只是簡單地顯示 INP 分數，以便於訪問。
測量時，必須同時考慮實驗室資料（在受控環境中進行的合成測試）和現場資料（來自使用者的真實效能資料）。
這種綜合方法可以讓您更清楚地瞭解網站在不同場景和使用者體驗下的 INP 效能。
INP 得分多少才算好？
Chrome 瀏覽器團隊為確定良好的 INP 得分提供了明確的基準。這些指南將 INP 分數分為三個不同的範圍，以顯示網頁的響應能力水平。
圖片來源：web.dev
如上圖所示，INP 為 200 毫秒或更短是理想狀態。如果 INP 在 200 至 500 毫秒之間，則表示還有提升空間。任何高於 500 毫秒的 INP 分數都被標記為差。
這些分數是對使用者訪問頁面的整個生命週期進行評估後得出的，其中考慮了所有的點選、敲擊和鍵盤互動。同樣，INP 指標側重於最差（或最慢）的互動，以便對頁面的互動性進行真實的衡量。
如何提高 WordPress 網站的 INP
改進網站 INP 表現涉及幾個關鍵策略，這些策略可以優化 WordPress 網站響應使用者輸入的速度和效率。現在讓我們花點時間來看看這些策略，並提供有效實施這些策略的技巧。
提高總體效能
有時，您可以通過完成基本的網站改進任務來大大提高 INP。在進行更復雜的工作之前，請確保完成以下工作：
- 選擇可靠高效的託管服務：這有助於確保更快地交付網站資源，提高 INP。
- 謹慎選擇主題和外掛：您選擇的主題和外掛應有助於提高網站的速度和效率，而不是降低網站的速度和效率。
- 儘可能減少網站上的外掛數量：外掛越少，載入的程式碼就越少。此外，定期更新網站及其外掛，以保持最佳效能。
- 使用快取策略並壓縮資料：這將加快載入過程，改善使用者體驗。
- 使用 CDN：使用內容交付網路（CDN）可加快檔案交付並縮短載入時間。
優化主執行緒可用性
主執行緒就是瀏覽器的工作管道。渲染和執行網站的所有必要流程都要經過它。
因此，它對於處理使用者互動至關重要，為此優化其可用性至關重要。下面是一些相關策略：
- 拆分大型任務：將大型 JavaScript 任務分解成較小的、易於管理的塊。這樣可以防止單個任務長時間阻塞主執行緒，從而更快地處理使用者互動。使用 setTimeout 或 requestIdleCallback 等技術可以有效地在空閒時段排程任務，從而減少輸入延遲。
- 避免 Thrashing：當你的程式碼反覆迫使瀏覽器重新計算樣式或佈局時，通常會在一個迴圈中發生迭代。儘量減少 DOM 操作和樣式重新計算的次數，以避免出現故障。批量進行 DOM 讀寫操作，以減少迴流和重繪週期。
(附註：如果您不太明白上述內容的意思，最好還是與開發人員討論一下。）
新增懶載入
實施懶載入可大大提高效能。它可以在頁面載入時延遲載入非關鍵資源，如在使用者訪問過程中不需要的圖片或指令碼。
這樣可以減少主執行緒的初始負載，使其能夠更高效地處理使用者互動。
優化或刪除 JavaScript
JavaScript 的執行會嚴重影響 INP。要優化 JavaScript
- 刪除不必要的程式碼：網站上不再存在的任何東西都無法阻止它。因此，請花時間刪除不使用的 JavaScript 和 CSS，以提高 INP 和整體效能。
- 最小化 JavaScript 檔案：通過刪除不必要的格式和註釋來減小 JavaScript 檔案的大小，這樣可以加快載入速度，從而更快地釋放主執行緒。
- 使用高效程式碼：優化 JavaScript 程式碼以提高效能。避免不必要的計算和長時間執行的任務。
- 推遲非關鍵 JavaScript：非同步載入非關鍵指令碼，或將其載入推遲到主要內容呈現之後。前面提到的分析指令碼就是很好的例子。
查詢速度變慢的根本原因
找出速度變慢的根本原因是有效優化的關鍵。使用 Google 的 Lighthouse 或 PageSpeed Insights 等工具對網站效能進行詳細分析。它們可以幫助找出需要改進的具體方面，如 DOM 大或指令碼執行效率低。
有助於提高 INP 的 WordPress 外掛
以上是提高網站 INP 分數的一般技巧，可為您帶來反應更靈敏、使用者更友好的網站體驗。要具體提高 WordPress 的 “Interaction to Next Paint”（INP），您還可以試試這些有用的外掛：
- WPTurbo：藉助該外掛的 CDN+OSS ，及 WP 瘦身、預載入和懶載入等功能來實現 WordPress 網站加速。
- WP Rocket：WP Rocket 因其快取功能而聞名，還提供程式碼優化、檔案最小化和資料庫優化功能。
- Flying Scripts：該外掛可以將非關鍵指令碼的執行時間延遲到使用者不需要完成任務的時候。
- NitroPack：該外掛為 WooCommerce、伺服器級快取和生成關鍵 CSS 提供高階選項。對於不太熟悉技術優化的使用者來說，它非常方便。
- Asset CleanUp：這是另一個很好的選擇，可對 Javascript 進行最小化、延遲指令碼並執行一系列其他優化任務。
- WP-Optimize：該外掛集資料庫清理、影象壓縮和快取功能於一身。它的資料庫優化功能尤其有用。
- Perfmatters：雖然 Perfmatters 與 WP Rocket 這樣的一體化工具配合使用效果最佳，但它能高效處理許多較小的效能任務，是其他外掛的良好補充。
- W3 Total Cache：W3 Total Cache 提供一系列快取方法，是一款技術性更強的外掛，可對各種優化方面進行詳細控制。
- Autoptimize：處理影象優化和最小化等基本問題。將其與快取外掛搭配使用可獲得最佳效果。
小結
Interaction to Next Paint (INP) 是核心網站生命力的一個超級重要方面，代表了網頁的響應速度。
它的意義在於創造快速、引人入勝的線上體驗，這是每個人都看重的。通過使用本文討論的方法優化 INP，您的網站可以在提升使用者體驗、搜尋排名和整體效能方面大有裨益。這不僅僅是一個技術調整的問題。這也是確保為受眾提供愉快、流暢體驗的一種方法。
但請記住，INP 的優化是一個持續的過程，需要根據使用者互動模式和網站更新進行定期監控和調整。這不是一件一勞永逸的事情，但上述步驟應該能讓你的網站達到一個良好的狀態。
您對改進 WordPress 網站的 INP 得分有其他見解或技巧嗎？歡迎在下面分享您的經驗。
評論留言