與 Next Paint 的交互 （INP） 是 Google 的一項核心 Web 指標指標。提高這個分數將使你的網站對你的用戶感覺更靈敏。在本文中，我們將向您展示如何在 WordPress 中提高您的 Google INP 分數，并解釋 Google 的 INP 分數是什么。
以下是我們將在本指南中介紹的主題的快速概述：
什么是 Google Core Web Vitals？
Google Core Web Vitals 是 Google 認為對整體用戶體驗很重要的網站性能指標。這些網絡重要分數是谷歌整體頁面體驗分數的一部分，這將影響你的SEO排名。
這些指標很有用，因為即使您的 加載速度很快，它也可能無法為用戶提供完整的功能。即使頁面已加載，訪問者也可能無法執行他們想要的操作或訪問他們需要的信息。
Core Web Vitals 旨在幫助解決這個問題。它們可以讓您衡量您的網站加載、可見以及可供訪問者使用的速度。
為此，Google 使用了三項質量測試：
-
最大內容繪制 （LCP）
-
首次輸入延遲 （FID）
-
累積布局偏移 （CLS）
然而，谷歌正在用一種名為INP（Interaction to Next Paint）的新測試來取代FID。
此更改目前處于“待定”狀態，將于 2024 年 3 月完成。這給了你時間準備，這樣你的SEO排名就不會受到影響，我們將在本文后面向你展示如何。
什么是 Google INP？
INP 代表 “Interaction to Next Paint”。這是一項新的 Google Core Web Vital 指標，用于衡量導致網站延遲的用戶互動。
INP 測試衡量用戶與您的網站互動（例如點擊某物）和您的內容在視覺上更新以響應之間需要多長時間。這種視覺更新稱為“下一次繪制”。
例如，用戶可能會在您的網站上提交、單擊按鈕或選擇在燈箱中打開的圖像。INP 測試將衡量用戶執行這些交互和實際看到您網站上的更新內容之間所花費的時間。
然后，Google 測試會根據您網站上大多數用戶互動的持續時間得出一個 INP 分數。分數將為“好”、“需要改進”或“差”，具體取決于您的網站在視覺上更新所需的時間。
為什么 Google 將 FID 指標更改為 INP？
當前的 FID 測試衡量您的網站在頁面加載后對第一個用戶輸入（例如鼠標單擊或鍵盤按下）的響應速度。它通過測量用戶第一次輸入到您的網站開始對該輸入采取行動之間的時間來實現這一點。
換句話說，它衡量您的網站在首次加載時的響應速度以及它給真實用戶的第一印象。
但是，此指標的幫助并不大。FID 測試有兩個限制：
-
它只測量第一次用戶交互，而不是所有用戶交互。
-
它只在網站開始處理交互之前進行測量，而不是在用戶實際上可以在屏幕上看到視覺反饋時進行測量。
因此，谷歌正在改變測試，以更全面地了解網頁的整體響應能力。INP 將測量用戶在離開頁面之前在那里花費的整個時間。
如何在 WordPress 中測量 Google INP 分數
測試您的 Google Core Web Vitals 分數的最簡單方法是使用 工具。只需輸入您要測試的 URL，然后單擊“分析”按鈕。
該工具將分析網頁幾秒鐘，然后向您顯示測試結果。
*注意：*您還可以使用 DebugBear 的免費網站速度測試或程序查看 Core Web Vitals，這是一些開發人員的首選。
現在，除了其他 Google Core Web Vitals 之外，您還將看到該頁面的 Interaction to Next Paint （INP） 分數。
移動和桌面用戶會有不同的分數。
在上面的屏幕截圖中，您可以看到桌面用戶在 WPBeginner 上查看此網頁的 INP 分數為 47 毫秒。綠點表示這是一個很好的分數。
-
超過 200 毫秒 – 響應速度快
-
200-500 毫秒 – 需要改進
-
慢于 500 毫秒 – 響應能力差
請務必檢查移動和桌面用戶的分數，并爭取良好的響應能力。
然后，您可以按照以下部分中的指南提高您的 INP 分數。
案例研究：在 Awesome Motive 的網站上發現緩慢的互動
但首先，看一個案例研究可能會有所幫助。我們已經開始衡量我們品牌網站上的 INP 分數，包括 、 和 。
當我們的團隊檢查我們網站的 INP 分數時，初步結果顯示我們需要改進。
使用 ，我們可以看到：
-
我們80%的會議被評為“好”
-
12%的會議被評為“需要改進”
-
8%的會議被評為“差”
現在，我們還不知道我們頁面上的哪些特定交互速度很慢，需要優化。Google 在測試時不會提供此信息。
這意味著接下來，我們將需要運行自己的測試，以發現 INP 分數較低的頁面上的緩慢交互。這是一項詳細而高級的任務，最好由開發人員執行。
它是通過轉到每個需要改進的頁面，然后通過實際點擊、點擊和按鍵來測試每次交互來完成的。這些需要使用工具進行計時和評估。
Chrome 列出了許多可用于測試的工具，例如 Chrome 擴展程序和 DevTools 中 Lighthouse 面板中的新時間跨度模式。
需要注意的是，評分較低的會話很可能發生在速度較慢的設備或連接上。這意味著在測試時，建議限制瀏覽器的速度，否則您可能無法發現緩慢的交互。
您可以使用 Chrome 的 功能，方法是轉到 View ? Developer ? Inspect Elements。您可以切換到“網絡”選項卡，然后從下拉菜單中選擇限制選項。
找到頁面的 INP 分數后，您可以使用本教程下一節中的提示來改進它們。
如何在 WordPress 中提高 Google INP 分數
大多數 INP 分數優化工作需要由開發人員完成。這包括您在網站上使用的主題和插件的作者，以及您正在運行的任何 的開發人員。
這是因為 INP 分數主要與在您的網站上執行 JavaScript 交互所需的時間有關。
例如，當用戶單擊某個按鈕時，將運行一些 JavaScript 代碼來執行單擊該按鈕所期望的功能。此代碼將下載到用戶的計算機上，并在其 Web 瀏覽器中運行。
為了優化 INP 分數，必須減少 JavaScript 用戶交互期間發生的延遲。此延遲有三個組成部分：
-
輸入延遲，當您的網站正在等待該頁面上阻止事件處理程序運行的后臺任務時，就會發生這種情況。
-
處理時間，即在 JavaScript 中運行事件處理程序所需的時間。
-
顯示延遲，即重新計算頁面并在屏幕上繪制頁面內容所需的時間。
作為網站所有者，您可以采取一些措施來改善第一次和第三次延遲。我們將在下一節中向您展示如何操作。
但是，要真正提高 INP 分數，您需要改進第二個延遲，即代碼本身的處理時間。這不是你自己能做到的。
您的 、插件和自定義 JavaScript 的開發人員可能需要優化他們的代碼，以便立即向您的用戶提供反饋。好消息是，他們可能已經在努力滿足 2024 年 3 月的最后期限。
我們將在本文后面通過示例為開發人員提供一些具體提示。
網站所有者如何針對 INP 優化其網站
雖然對您網站的 INP 分數最重要的影響將來自開發人員優化他們的代碼，但網站所有者可以做一些事情。
特別是，您可以通過優化網站上的后臺進程來確保盡快識別用戶的鼠標點擊和擊鍵。此外，您可以確保對其輸入的響應盡快顯示在屏幕上。
您可以采取以下一些步驟來實現這一點。
1. 確保您運行的是最新版本的 WordPress
您應該做的第一件事是確保您。
這是因為 WordPress 版本 6.2 和 6.3 引入了顯著的性能改進。這些將提高您的網站在服務器端和客戶端的性能，從而提高您的 INP 分數。
2.優化WordPress中的后臺進程
后臺進程是 WordPress 中在后臺運行的計劃任務。它們可能包括檢查 WordPress 更新、發布預定帖子和備份您的網站。
如果您的網站忙于運行這些后臺任務，那么它可能無法立即意識到用戶單擊了鼠標或按下了某個鍵，從而導致 INP 分數較低。
您可以配置后臺腳本和插件，以減少它們正在執行的工作量，從而減輕您網站的壓力。否則，您可能只能在需要時運行它們，而不是讓它們在后臺運行。
3. 檢查 PageSpeed Insights 性能建議
在網站上運行 測試后，您可以向下滾動到測試結果的“性能”部分。
在這里，如果您遵循建議，您會發現一些提高網站性能的機會以及估計節省的時間。
例如，您可能會看到有關消除渲染阻塞資源的建議。
您可能還會看到減少未使用的 JavaScript 的建議。您會在許多中找到執行此操作的設置，例如 。
4. 在 WordPress 中縮小 JavaScript
JavaScript 需要先下載到用戶的計算機上，然后才能運行。通過使 JavaScript 文件盡可能小，可以在性能上獲得一些小的提升。
縮小 JavaScript 通過從源代碼中刪除空格、行和不必要的字符來縮小文件。
這不會對你的表現產生顯著影響，但如果你想將你的 INP 分數多減少幾毫秒，那么你可能會發現這是值得的。
開發人員如何針對 INP 優化其代碼
如果你是一名開發人員，那么最大的 INP 分數收益將來自優化你的代碼。您可以做以下幾件事。
1. 立即直觀地確認用戶輸入
在優化代碼的 INP 分數時，有一件事會發揮最大的作用：您需要立即向所有用戶輸入提供視覺反饋。
用戶應該立即看到他們的輸入已被識別，并且您正在根據它采取行動。這將使您的代碼對用戶的響應速度更快，并產生出色的 INP 分數。
以下是一些示例：
-
如果用戶單擊某個元素，則應顯示顯示該元素已被單擊的內容。
-
如果用戶提交了表單，則需要立即顯示一些內容來確認這一點，例如消息或微調器。
-
如果用戶單擊圖像以在燈箱中打開它，那么不要只是等待圖像加載。相反，您應該立即顯示演示圖像或微調器。然后，當圖像加載時，您可以將其顯示在燈箱中。
最重要的是，這將提高您的 INP 分數，尤其是當您需要執行繁重的 JavaScript 處理以響應用戶輸入時。
只需確保在開始任務之前更新 UI。之后，您可以在回調中使用 Web Worker 在單獨的線程上執行 CPU 密集型工作，然后最終將結果呈現給用戶。setTimeout
一旦你做對了，你就可以做更多的事情來優化你的代碼。
2.優化瀏覽器花費大部分時間的地方
接下來你應該做的是調查瀏覽器花費大部分時間的地方，然后優化這些部分。
在 Google Chrome 中，當您導航到“視圖”?“開發人員”?“開發人員工具”?“性能”時，可以檢查阻止下一次繪制的 JavaScript 函數和事件處理程序。
有了這些知識，你就可以看到可以優化什么，以減少用戶交互后下一次涂漆的時間。
3.減少布局
有時，許多 CPU 活動都由布局工作組成。
發生這種情況時，應檢查是否可以減少代碼中的函數數量。relayout
4.首先顯示首屏內容
如果呈現頁面內容的速度很慢，則您的 INP 分數可能會受到影響。
您可以考慮先只顯示重要的“首屏”內容，以便更快地交付下一幀。
面向開發人員的良好 JavaScript 編碼實踐示例
向你展示一些糟糕的代碼如何導致糟糕的 INP 分數的例子可能會有所幫助。
我們在 ，您可以進行實驗。您可以查看我們的示例代碼，閱讀我們的簡短說明，并通過單擊按鈕查看它的不同之處。
下面是該 CodePen 項目的動畫。您可以看到，未優化的示例代碼導致 INP 分數較差，為 965 毫秒。按下按鈕會讓用戶感到滯后。
相比之下，優化后的代碼會立即更新按鈕文本，從而獲得最佳的 INP 分數。
請繼續閱讀，查看四個示例，了解如何改進代碼以優化 INP 分數。
示例 1：在運行繁重的 CPU 任務之前更新屏幕
CPU 密集型任務需要時間，除非您編寫好的代碼，否則這可能會導致 INP 分數不佳。在這種情況下，最好在運行該任務之前更新屏幕。
下面是一個糟糕的示例，其中用戶界面在繁重的 CPU 任務后更新。這導致高 INP：
// Bad example``button.addEventListener(``'click'``, () => {`` ``// Heavy CPU task`` ``for` `(``let` `i = 0; i < 10000000; i++) {`` ``console.log(i);`` ``}`` ``// UI update`` ``button.textContent = ``'Clicked!'``;});
在此改進的示例中，單擊按鈕時，用戶界面會立即更新。
之后，繁重的 CPU 任務被移動到回調中：setTimeout
// Better example``button.addEventListener(``'click'``, () => {`` ``// UI update`` ``button.textContent = ``'Processing...'``;` ` ``// Heavy CPU task`` ``setTimeout(() => {`` ``for` `(``let` `i = 0; i < 10000000; i++)`` ``{`` ``console.log(i);`` ``}`` ``// Final UI update`` ``button.textContent = ``'Done!'``;`` ``}, 0);``});
這允許瀏覽器在開始慢速任務之前更新屏幕，從而獲得良好的 INP 分數。
示例 2：計劃非緊急處理
您還應該確保不要立即在腳本中運行非緊急或非必要的工作，因為這可能會延遲用戶期望的響應。
您應該首先立即更新頁面以確認用戶的輸入。之后，您可以使用在幀結束時有空閑時間或用戶處于非活動狀態時安排腳本的其余部分。requestIdleCallback
下面是一個示例：
button.addEventListener(``'click'``, () => {`` ``// Immediate UI update`` ``button.textContent = ``'Processing...'``;` ` ``// Non-essential processing window.requestIdleCallback(() => {`` ``// Perform non-essential processing here... button.textContent = 'Done!';`` ``});``});
這將使網頁對用戶的反應更靈敏，并為您提供更好的 INP 分數。
示例 3：計劃在下一次繪制之前運行函數
您還可以使用來計劃在下次重繪之前運行函數：requestAnimationFrame
button.addEventListener(``'click'``, () => {`` ``// Immediate UI update`` ``button.textContent = ``'Processing...'``;` ` ``// Visual update`` ``window.requestAnimationFrame(() => {`` ``// Perform visual update here... button.style.backgroundColor = 'green'; button.textContent = 'Done!';`` ``});``});
這對于響應用戶交互的動畫或視覺更新非常有用。
同樣，您應該通過立即確認用戶的輸入來向用戶提供反饋。
示例 4：避免布局抖動
當您重復讀取和寫入 DOM（文檔對象模型）時，會發生布局抖動，從而導致瀏覽器多次重新計算布局。
下面是布局抖動的示例：
// Bad example``elements.forEach(element => {`` ``const height = element.offsetHeight; ``// read element.style.height = height + 'px'; // write});
這可以通過批量讀取和寫入來避免。
這是一個更好的例子：
// Good example``const heights = elements.map(element => element.offsetHeight); ``// batched read``elements.forEach((element, index) => {`` ``element.style.height = heights[index] + ``'px'``; ``// batched write``});
