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