什麼是 Google 的 INP 分數以及如何在 WordPress 中提高它

已發表: 2023-08-25

您是否想知道 Google 的 INP 分數是多少以及如何在您的 WordPress 網站上提高它？

與 Next Paint 的交互 (INP) 是 Google 的一項核心 Web Vitals 指標。提高此分數將使您的網站對用戶的響應更加靈敏。

在本文中，我們將向您展示如何提高 WordPress 中的 Google INP 分數，並解釋 Google 的 INP 分數是什麼。

What is Google INP score and how to improve it in WordPress

以下是我們將在本指南中涵蓋的主題的快速概述：

什麼是 Google 核心網絡生命力？

Google Core Web Vitals 是 Google 認為對整體用戶體驗非常重要的網站性能指標。這些網絡重要分數是 Google 整體頁面體驗分數的一部分，這將影響您的 SEO 排名。

這些指標非常有用，因為即使您的 WordPress 網站加載速度很快，它也可能無法為用戶提供完整的功能。即使頁面已加載，訪問者也可能無法執行他們想要的操作或訪問他們需要的信息。

Core Web Vitals 旨在幫助解決此問題。它們可讓您衡量網站加載、可見以及可供訪問者使用的速度。

為此，Google 使用了三項質量測試：

最大內容塗料 (LCP)
首次輸入延遲 (FID)
累積佈局偏移 (CLS)

您可以在我們關於如何優化 WordPress 核心 Web Vitals 的終極指南中了解有關這些測試的更多信息。

然而，Google 正在用名為 INP（Interaction to Next Paint）的新測試取代 FID。

此更改目前的狀態為“待處理”，並將於 2024 年 3 月完成。這讓您有時間做好準備，以免您的 SEO 排名受到影響，我們將在本文後面向您展示如何操作。

什麼是谷歌INP？

INP 代表“與下一次繪製的交互”。這是一個新的 Google Core Web Vital 指標，用於衡量導致網站延遲的用戶交互。

INP 測試測量用戶與您的網站交互（例如單擊某些內容）和您的內容以視覺方式更新作為響應之間需要多長時間。這種視覺更新稱為“下一次繪製”。

例如，用戶可能會在您的網站上提交聯繫表單、單擊按鈕或選擇在燈箱中打開的圖像。 INP 測試將測量用戶執行這些交互和實際在您的網站上看到更新內容之間所花費的時間。

然後，Google 測試會根據您網站上大多數用戶交互的持續時間得出一個 INP 分數。分數可能是“好”、“需要改進”或“差”，具體取決於您的網站更新視覺效果所需的時間。

為什麼 Google 將 FID 指標更改為 INP？

當前的 FID 測試衡量您的網站在頁面加載後響應第一個用戶輸入（例如單擊鼠標或按下鍵盤）的速度。它通過測量用戶第一次輸入和網站開始對該輸入採取行動之間的時間來實現這一點。

換句話說，它衡量您的網站首次加載時的響應速度以及它給真實用戶的第一印象。

然而，這個指標並沒有想像中那麼有用。 FID 測試有兩個限制：

它僅測量第一次用戶交互，而不是全部。
它僅在網站開始處理交互之前進行測量，而不是在用戶可以實際在屏幕上看到視覺反饋時進行測量。

因此，谷歌正在改變測試，以更全面地了解網頁的整體響應能力。 INP 將測量用戶在離開頁面之前花費的整個時間。

如何在 WordPress 中衡量 Google INP 分數

測試 Google Core Web Vitals 分數的最簡單方法是使用 PageSpeed Insights 工具。只需輸入您要測試的 URL，然後單擊“分析”按鈕即可。

Analyzing a Web Page for Page Speed Insights

該工具將分析網頁幾秒鐘，然後向您顯示測試結果。

現在，與其他 Google Core Web Vitals 一起，您還將看到該頁面的 Interaction to Next Paint (INP) 分數。

移動端和桌面端用戶會有不同的分數。

在上面的屏幕截圖中，您可以看到桌面用戶在 WPBeginner 上查看此網頁的 INP 得分為 47 毫秒。綠點表示這是一個很好的分數。

一旦您看到自己網站的得分，您可能會想知道它與其他網站相比如何，以及是否需要改進。

Google 提供了一些解釋您的 INP 分數的指南：

快於 200 毫秒 – 良好的響應能力
200-500 毫秒 – 需要改進
慢於 500 毫秒 – 響應能力差

確保檢查移動和桌面用戶的分數，並以良好的響應能力為目標。

然後，您可以按照以下部分中的指南來提高您的 INP 分數。

案例研究：在 Awesome Motive 網站上發現緩慢的交互

但首先，看一下案例研究可能會有所幫助。我們已開始衡量品牌網站上的 INP 分數，包括 All in One SEO、MonsterInsights 和 WPForms。

當我們的團隊檢查我們網站的 INP 分數時，初步結果顯示我們最受歡迎的頁面需要改進。

使用 Chrome 用戶體驗 (CrUX) 儀表板，我們可以看到：

我們 80% 的課程被評為“良好”
12% 的課程被評為“需要改進”
我們 8% 的課程被評為“差”

現在，我們還不知道頁面上的哪些特定交互速度很慢並且需要優化。 Google 在測試時不會提供此信息。

這意味著接下來，我們需要運行自己的測試來查找 INP 分數較低的頁面上的緩慢交互。這是一項詳細且高級的任務，最好由開發人員執行。

它是通過轉到每個需要改進的頁面，然後通過實際的點擊、敲擊和按鍵來測試每個交互來完成的。這些需要使用工具進行計時和評估。

Chrome 開發者博客列出了許多可用於測試的工具，例如 Chrome Web Vitals 擴展以及 DevTools 中 Lighthouse 面板中的新時間跨度模式。您還可以查看 Google 關於如何使用 Web Vitals 擴展進行調試的文章。

值得注意的是，評級較低的會話很可能是在較慢的設備或連接上進行的。這意味著在測試時，建議限制瀏覽器的速度，否則您可能無法發現緩慢的交互。

您可以通過轉到View » Developer » Inspect Elements使用 Chrome 的 Inspect Element 功能來執行此操作。您可以切換到“網絡”選項卡，然後從下拉菜單中選擇一個限制選項。

Using Chrome Inspect Elements to Throttle Your Browser

找到頁面的 INP 分數後，您可以使用本教程下一部分中的提示來改進它們。

如何提高 WordPress 中的 Google INP 分數

大部分 INP 分數優化工作需要由開發人員完成。其中包括您在網站上使用的主題和插件的作者，以及您正在運行的任何自定義 JavaScript 的開發人員。

這是因為 INP 分數主要與在網站上執行 JavaScript 交互所需的時間相關。

例如，當用戶單擊按鈕時，會運行一些 JavaScript 代碼來執行單擊按鈕所需的功能。該代碼被下載到用戶的計算機並在他們的網絡瀏覽器中運行。

為了優化您的 INP 分數，必須減少 JavaScript 用戶交互期間發生的延遲。這種延遲由三個部分組成：

輸入延遲，當您的網站正在等待該頁面上阻止事件處理程序運行的後台任務時，就會發生這種情況。
處理時間，即在 JavaScript 中運行事件處理程序所需的時間。
呈現延遲，即重新計算頁面並將頁面內容繪製到屏幕上所需的時間。

作為網站所有者，您可以採取一些措施來改善第一次和第三次延遲。我們將在下一節中向您展示如何操作。

然而，要真正提高 INP 分數，您需要改善第二個延遲，即代碼本身的處理時間。這不是你自己能做的事情。

WordPress 主題、插件和自定義 JavaScript 的開發人員可能需要優化其代碼，以便立即向用戶提供反饋。好消息是他們可能已經在努力在 2024 年 3 月的最後期限前完成這項工作。

我們將在本文後面通過示例為開發人員提供一些具體提示。

網站所有者如何針對 INP 優化其網站

雖然對網站 INP 分數最重要的影響來自於開發人員優化其代碼，但網站所有者可以做一些事情。

特別是，您可以通過優化站點上的後台進程來確保盡快識別用戶的鼠標單擊和擊鍵。此外，您還可以確保對其輸入的響應盡快顯示在屏幕上。

您可以採取以下一些步驟來實現這一目標。

1.確保您運行的是最新版本的 WordPress

您應該做的第一件事是確保您運行的是最新版本的 WordPress。

這是因為 WordPress 6.2 和 6.3 版本引入了顯著的性能改進。這些將提高您網站在服務器端和客戶端的性能，從而提高您的 INP 分數。

有關詳細說明，您可以參閱我們有關如何安全更新 WordPress 的指南。

2.優化WordPress後台進程

後台進程是 WordPress 中在後台運行的計劃任務。它們可能包括檢查 WordPress 更新、發布計劃的帖子以及備份您的網站。

如果您的網站太忙於運行這些後台任務，那麼它可能不會立即意識到用戶單擊了鼠標或按下了某個鍵，從而導致 INP 分數較低。

您也許可以配置後台腳本和插件，以減少它們正在執行的工作量，從而減輕您網站的壓力。否則，您可能只能在需要時運行它們，而不是讓它們在後台運行。

有關詳細說明，您可以參閱我們關於如何提高 WordPress 速度和性能的終極指南的優化後台進程部分。

3. 檢查 PageSpeed Insights 性能建議

在網站上運行 PageSpeed Insights 測試後，您可以向下滾動到測試結果的“性能”部分。

在這裡，您會發現一些提高網站性能的機會，如果您遵循建議，預計可以節省時間。

PageSpeed Insights Performance Opportunities and Diagnostics

例如，您可能會看到消除渲染阻塞資源的建議。您可以按照我們有關如何修復 WordPress 中渲染阻塞的 JavaScript 和 CSS 的指南來執行此操作。

您可能還會看到減少未使用的 JavaScript 的建議。您會在許多最好的 WordPress 緩存插件（例如 WP Rocket）中找到執行此操作的設置。

4. 在 WordPress 中縮小 JavaScript

JavaScript 需要下載到用戶的計算機上才能運行。通過使 JavaScript 文件盡可能小，您可以在性能上取得一些小進步。

縮小 JavaScript 通過從源代碼中刪除空格、行和不必要的字符來縮小文件。

這不會對您的表現產生巨大影響，但如果您希望將 INP 分數減少幾毫秒，那麼您可能會發現這是值得的。

要了解如何操作，您可以參閱我們有關如何在 WordPress 中縮小 CSS 和 JavaScript 文件的指南。

開發人員如何針對 INP 優化其代碼

如果您是開發人員，那麼最大的 INP 分數增益將來自優化您的代碼。您可以執行以下幾項操作。

1. 立即以視覺方式確認用戶輸入

在優化代碼的 INP 分數時，最重要的一件事是：您需要立即為所有用戶輸入提供視覺反饋。

用戶應該立即看到他們的輸入已被識別並且您正在對其進行操作。這將使您的代碼對用戶的響應更加靈敏，並獲得很高的 INP 分數。

這裡有一些例子：

如果用戶單擊某個元素，那麼您應該顯示一些內容來表明該元素已被單擊。
如果用戶提交表單，那麼您需要立即顯示一些內容來確認，例如消息或微調器。
如果用戶單擊圖像以在燈箱中打開它，那麼不要只是等待圖像加載。相反，您應該立即顯示演示圖像或旋轉器。然後，當圖像加載時，您可以將其顯示在燈箱中。

最重要的是，這將提高您的 INP 分數，特別是當您需要執行大量 JavaScript 處理來響應用戶輸入時。

只需確保在開始任務之前更新 UI。之後，您可以在setTimeout回調中或使用 Web Worker 在單獨的線程上執行 CPU 密集型工作，然後最終將結果呈現給用戶。

一旦你做對了，你還可以做一些事情來優化你的代碼。

2. 優化瀏覽器花費最多時間的地方

您應該做的下一件事是調查瀏覽器將大部分時間花在哪裡，然後優化這些部分。

在 Google Chrome 中，當您導航到View » Developer » Developer Tools » Performance時，可以檢查阻止下一次繪製的 JavaScript 函數和事件處理程序。

有了這些知識，您就可以了解可以優化哪些內容，以減少用戶交互後直到下一次繪製的時間。

3. 減少佈局

有時，許多 CPU 活動都由佈局工作組成。

發生這種情況時，您應該檢查是否可以減少代碼中的relayout函數的數量。

4.首先顯示首屏內容

如果渲染頁面內容很慢，那麼您的 INP 分數可能會受到影響。

您可以考慮首先僅顯示重要的“首屏”內容，以便更快地交付下一幀。

面向開發人員的良好 JavaScript 編碼實踐示例

向您展示一些示例可能會有所幫助，說明糟糕的代碼如何導致 INP 分數較低。

我們在 CodePen 上整理了一個示例項目，您可以嘗試一下。您可以檢查我們的示例代碼，閱讀我們的簡短說明，並通過單擊按鈕查看它所帶來的差異。

這是來自 CodePen 項目的動畫。您可以看到，未優化的示例代碼導致 INP 得分很低，為 965 毫秒。用戶按下按鈕時會感到遲緩。

相比之下，優化後的代碼會立即更新按鈕文本，從而獲得最佳的 INP 分數。

Animation of CodePen Example Project for Optimizing INP Score

請繼續閱讀，了解如何改進代碼以優化 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
);

我們希望本教程能幫助您了解如何提高 WordPress 中的 Google INP 分數。您可能還想查看我們的 WordPress SEO 終極指南或我們的專家精選的最佳 WordPress SEO 插件和工具。

如果您喜歡這篇文章，請訂閱我們的 WordPress 視頻教程 YouTube 頻道。您還可以在 Twitter 和 Facebook 上找到我們。