了解 Google 的 INP 分數及如何改進 WordPress 網站速度
最後更新於 2024 年 3 月 14 日，由編輯部 | 評論者：Syed Balkhi
您是否想知道什麼是 Google 的 INP 分數以及怎麼在您的 WordPress 網站上改進這一指標？互動到下一次繪製（INP）是 Google 的核心網頁指標之一。改善這一指標可以使您的網站對用戶更加響應。在本文中，我們將介紹如何提高你的 Google INP 分數以及解釋什麼是 Google 的 INP 分數。
什麼是 Google 核心網頁指標？
Google 核心網頁指標是 Google 認為對整體用戶體驗很重要的網站性能指標。這些網頁指標是 Google 整體頁面體驗指標的一部分，將影響您的 SEO 排名。
這些指標非常有用，因為即使您的 WordPress 網站加載速度很快，它也可能不完全對用戶功能。如果一個頁面已加載，訪客可能無法執行他們想做的事情或訪問所需的信息。
什麼是 Google INP？
INP 代表“互動到下一次繪製”。這是一個新的 Google 核心網頁指標，用於衡量引起您網站延遲的用戶互動。
INP 測試用於衡量從用戶與您的網站互動開始（如點擊某物）到您的內容在視覺上更新的時間。這種視覺更新稱為“下一次繪製”。
為什麼 Google 將 FID 指標改為 INP？
舊的 FID 測試衡量的是頁面加載後，網站對第一次用戶輸入的反應速度，如鼠標點擊或鍵盤按鍵。通過測量用戶的第一次輸入與您網站開始響應之間的時間來實現這一點。
然而，這一指標並不是那麼有用，因為它只衡量第一次用戶互動，且僅關注開始處理互動的時間，而不關注用戶實際看到視覺反饋的時間。所以 Google 更改測試以更全面地反映網頁的整體響應性。INP 測試將在用戶離開頁面之前測量整個時間。
如何在 WordPress 上測量 Google INP 分數
測試您的 Google 核心網頁指標分數最簡單的方法是使用 PageSpeed Insights 工具。只需輸入您要測試的 URL，然後點擊“分析”按鈕即可。
該工具將分析網頁幾秒鐘，然後顯示測試結果。注意：您還可以使用 DebugBear 的免費網站速度測試或 Site Speed Chrome 擴展來查看核心網頁指標，這些是某些開發者偏好的工具。
現在，除了其他 Google 核心網頁指標外，您還將看到該頁面的互動到下一次繪製（INP）分數。桌面和移動用戶的分數會有所不同。
當您能看到自己的網站分數時，您可能會想知道它與其他網站的比較情況以及是否需要改進。Google 提供了一些指南來解讀您的 INP 分數：
- 小於 200 毫秒 – 響應性好
- 200-500 毫秒 – 需要改進
- 大於 500 毫秒 – 響應性差
請確保檢查您網站移動和桌面用戶的分數，並目標達到響應性良好的標準。接下來，您可以遵循以下指南來改善您的 INP 分數。
案例研究：在 Awesome Motive 的網站上發現慢速互動
我們已經開始測量我們品牌網站的 INP 分數，包括 All in One SEO、MonsterInsights 和 WPForms。當我們的團隊檢查我們網站的 INP 分數時，初步結果顯示我們最受歡迎的頁面需要改進。
使用 Chrome 用戶體驗（CrUX）儀表板，我們可以看到：
- 80% 的會話被評為“良好”
- 12% 的會話被評為“需要改進”
- 8% 的會話被評為“差”
現在，我們還不知道哪些具體的互動在頁面上是很慢並需要優化的。這些信息在 Google 測試中沒有提供。這意味著我們接下來需要自己進行測試，以便找到低 INP 分數頁面上的慢速互動。這是一個需要由開發者執行的詳細而先進的任務。
您可以查看 Google 的文章，了解如何使用 Web Vitals 擴展進行調試。需要注意的是，評分較低的會話很可能發生在較慢的設備或連接上。因此，在測試時建議限制瀏覽器的速度，否則可能無法發現慢速互動。
找到頁面的 INP 分數後，您可以使用本教程下一部分中的提示來改進它們。
如何提高 WordPress 的 Google INP 分數
大部分 INP 分數優化工作需要由開發者完成，包括您網站所使用的主題和插件的作者，以及任何自定義 JavaScript 的開發者。這是因為 INP 分數主要與網站上 JavaScript 互動所需的時間有關。
如果您是一個網站所有者，有幾個步驟可以用來減少第一個和第三個延遲時間。我們會在下一部分展示如何做。
網站所有者如何優化 INP
以下是一些您可以採取的步驟，以實現這一目標。
1. 確保正在運行最新版本的 WordPress
首先，請確保您正在運行最新版本的 WordPress。這是因為 WordPress 6.2 和 6.3 版引入了顯著的性能改進，這些改進將提高您網站在服務器端和客戶端的性能，從而提高您的 INP 分數。
2. 優化 WordPress 中的後台進程
如果您的網站過多地運行這些後台任務，那麼可能無法立即意識到用戶已點擊鼠標或按下按鍵，從而導致差的 INP 分數。
3. 檢查 PageSpeed Insights 性能建議
在您運行 PageSpeed Insights 測試後，可以向下滾動到測試結果的性能部分。在這裡，您將找到一些提高網站性能的機會，以及如果您遵循建議可以節省的估計時間。
如何優化 JavaScript 代碼以提高 INP
如果您是開發者，那麼最大的 INP 分數增益將來自於優化您的代碼。這裡有一些能幫助的具體事例：
立即視覺確認用戶輸入
這些將使您的代碼對用戶更具響應性，並產生更好的 INP 分數。
例子 1: 在進行重 CPU 任務前更新屏幕
CPU 重度任務需要時間，如果寫了不好的代碼並將屏幕更新放在此任務之前，將導致高 INP 分數。以下是一個更新屏幕前進行 CPU 重度任務的糟糕示例：
稍後，我們將展示一些改進的示例。
例子 2: 安排在下一次重繪前運行的函數
您還可以使用 requestAnimationFrame 來安排在下一次重繪前運行函數：
例子 3: 避免佈局抖動
布局抖動發生在您反复讀寫 DOM（文檔對象模型）時，導致瀏覽器多次重新計算佈局。
通過合批讀和寫，可以避免這種情況。這是一個更好的示例：
