橡實整合設計 品牌 VI & 網站高級訂製 | 企業數位轉型

Google將在2024/3導入全新體驗分數INP指標

Issue

昨天(7/5)晚上Google發布了新的搜尋SEO的幾個重大的更新,其中包括RWD不再是主要指標,Sitemap即將走入歷史等等,比較受到關注的則是全新的網頁體驗指標INP。

INP是什麼?

根據Google官方的定義,INP是英文Interactive Next Paint,簡單來說,是指用戶與「下一個繪製的互動指標」。

什麼是下一個繪製?所謂的繪製就是「讓網頁物件跑出來」,所以「不管你在網頁上做什麼,只要是有東西跑出來,這個等東西跑出來的時間,都算是INP的量測範圍」,所以INP就是量測使用者在網頁上的「整體體驗」。

Google官方說,「INP 是一個相對較新的指標,但隨著網頁變得更加複雜和互動,它變得越來越重要。Google 已宣布 INP 將在 2024 年 3 月取代 FID 成為核心 Web 關鍵。這意味著 Web 開發人員將需要專注於提高頁面的 INP 分數,以保持良好的性能。」

Google:INP分數將主導SEO分數和排名

INP簡單來說,就是使用者在網站上的「整體體驗」,Google官方也證實,INP分數很可能對未來的SEO分數和排名產生重大影響。

當然,INP分數只是影響SEO分數和排名的因素之一。其他因素,例如內容質量、反向連結配置和整體用戶體驗也很重要。然而,INP 分數將來可能會變得越來越重要,因此優化頁面以獲得良好的 INP 分數非常重要。

FID看第一次 INP看全部

在Google針對網站的體驗分數,目前有三大指標,分別是LCP、FID、CLS。都是專注在網頁載入的第一時間。

  • 其中LCP指的就是當使用者進入網站時,最大的網頁內容繪製時間,還記得上面提到的繪製嗎?就是進入網頁以後,最大的東西(圖片)跑出來的那個時間,這也是因應目前主流網站都會用大圖或影片放在網站的主視覺,所以LCP成為重要的指標。
  • CLS(非預期畫面位移)則是分析在網頁載入以後,載入延遲的狀況,這是什麼意思呢?我們有時候載入網頁的時候,會發現我們滾動到一個地方,但是滾動過程中,網頁內容又被網下推,如果這個「內容被往下推」的時間越長,那代表網頁體驗就越不好。
  • 而FID則是指第一次可開始互動的時間,有人說這是整體網站的速度,其實不然,嚴格來說這是指,當我們進入一個網頁之後,從「什麼都不能做」到「可以滾動或是有按鈕可以按(互動)」的這個時間長度,所以他像是一個整體的網站指標。

時代在變,網頁設計的規範也逐步改變,在過去幾年是電腦版走入RWD響應式設計的時代,所以Google把RWD體驗當成是一個關鍵的指標,現在RWD已經成為標配,那初期的載入已經不再是首要的重點了,自然就要更新指標,而INP指標,就是下一個世代網頁設計師應該專注的重點。

這就好像台灣過去的年代,大學學歷是求職的重要的關鍵,但是到了現在滿街大學生的時代,那大學學歷就不是求職的重要依據了。

什麼東西會降低INP分數

Google官方的說明寫的很技術性,好像論文一樣,但是簡單來說,大致上就是使用者在網頁上「需要等待的時間」都算在INP指標以內,官方的報告有提到一個部分,指出用戶在網頁上停留(什麼都不做跟互動)與等待時間,這會依照比例計算。

這意思是假如有一個網頁,他一開始載入很快,可能你點進去頁面一秒不到就開好了,但是進去之後,點了一個按鈕,你等這個回應等了兩秒(可能是動畫載入、圖片載入等等),那針對FID,這網頁的分數很棒,但是在INP時代,分數就不合格。

於是理解了以後,我問了Google AI Bard這個問題:「CSS 動畫或平滑滾動會降低 INP 分數嗎?」Bard直接給出答案,「是的,CSS 動畫和平滑滾動會降低 INP 分數。」

這是Bard的解釋

這是因為它們增加了瀏覽器的額外處理時間,這可能會延遲對用戶互動的響應。

例如,如果您有一個在用戶向下滾動頁面時播放的 CSS 動畫,則瀏覽器必須首先渲染該動畫,然後才能響應用戶的滾動事件。這可能會顯著增加 INP 分數的延遲,尤其是在動畫複雜或資源密集型的情況下。

平滑滾動是另一個可以降低 INP 分數的功能。平滑滾動是一種使用 JavaScript 創建更加漸進和流暢的滾動體驗的技術。但是,這也會增加瀏覽器的額外處理時間,從而延遲對用戶互動的響應。

如果您擔心網頁的 INP 分數,則應避免使用 CSS 動畫和平滑滾動。相反,您應該使用更簡單的動畫或根本不使用動畫。您還應該避免使用大型或複雜的動畫,因為它們會對 INP 分數產生重大影響。

WordPress用什麼編輯器影響INP

有趣的來了,由於INP一直強調網頁的程式碼精簡程度,所以我問了一個一個問題,到底對於WordPress網頁設計來說,「Elementor跟Oxygen Builder 架設的網站,對於INP分數有沒有影響?」有趣的是,Google認為Oxygen明顯是優於Elementor的。

Bard:通常認為Oxygen Builder 的INP 分數比Elementor Builder更好。這是因為 Oxygen Builder 是一個混合主題和拖放構建器,而 Elementor 是一個純粹的拖放 WordPress 構建器。這使得 Oxygen Builder開箱即用的速度始終比 Elementor 更快。

  • 以下是兩個網頁編輯器在 INP 分數方面的比較:
  • Elementor INP評分: 150-250ms
  • Oxygen INP評分: 50-150ms

Google這個分數為什麼我覺得具有可信度,因為其實對於爬蟲來說,一個WordPress網站用什麼編輯器製作的,一定是很簡單可以看到的,而過去幾年,Elementor跟氧氣製作的網站數量都非常大,那對於Google來說,要針對編輯器這個變因分析使用者體驗數據,其實是很簡單的!

不過google也強調,INP 分數只是影響網頁整體性能的因素之一!

提高 INP 網站就必須瘦身

問題來了,那到底要怎麼降低INP的時間(提高INP分數)呢?好像又回到了「減法架站」的初衷了,那就是所有一切都「輕量至上」。

如果你要用CSS動畫,那就盡量使用輕量級 CSS 動畫。不會給瀏覽器增加太多處理時間。另外還記得台灣網頁設計師最愛的平滑滾動嗎?Google說:「平滑滾動會顯著降低 INP 分數,因此最好盡可能避免使用。」

其他還包括這幾點:

  • 壓縮圖片:大圖像或畫素太高像會減慢頁面加載速度,從而對 INP 分數產生負面影響。
  • 縮小 JavaScript 和 CSS:縮小 JavaScript 和 CSS 文件有助於減少加載它們所需的處理時間。
  • 使用 CDN(全球傳遞網路):使用 CDN 可以通過從更靠近用戶的服務器提供靜態資產來幫助提高頁面的性能。

使用輕量級主題和外掛。繁重的主題和外掛可能會減慢頁面速度,因此使用輕量級選項很重要。 在不同的設備和瀏覽器上測試頁面:確保您的頁面在不同的設備和瀏覽器上表現良好,因為這也會影響 INP 分數。

哪裡可以看到INP分數

目前INP分數已經在 Google PagesPeed Insights可以看到了,不過是屬於「實際使用者體驗」這個分數的欄位,這個分數不是每個網站都會有,需要看用戶的狀況。其中INP指標也是要看用戶瀏覽的狀況。

用戶瀏覽狀況?

因為使用者體驗分數(包括INP分數)並不是單一的量測指標,他跟「使用者Chrome瀏覽器的設定」有關,所以要有INP分數,必須有三個條件。

  • 第一:網站時間夠久
  • 第二:用Chrome瀏覽網站的用戶夠多
  • 第三:這些用Chrome瀏覽的用戶,都有開啟使用者體驗的量測功能(加入 CrUX)。

這真的很困惑,所以我又跑去問Google的Bard,結果得到一樣的結果。意思就是,假設你的網站客戶很多,但是都是用Safari、Edge、Safari就是不用Chorme,那你的網站就沒有INP分數。

網站沒有INP分數,也不用緊張啦!其他的頁面速度、網域的權威值(包含反向連結數量)、內容質量、安全性、RWD等等都是Google做為SEO評測的依據。

如何加入CrUX?

可以按照以下步驟選擇加入 CrUX:

  1. 打開 Chrome。
  2. 單擊窗口右上角的三個點。
  3. 選擇“設置”。
  4. 向下滾動到“隱私和安全”部分。
  5. 點擊“隱私”。
  6. 向下滾動到“後台同步和站點數據”部分。
  7. 點擊“管理例外”。
  8. 在“Chrome 用戶體驗報告”下,選擇“允許”。

有趣的是,我問了Google Bard如果網站用戶都不用Chrome怎麼辦,Google說,那就邀請你的訪客用戶加入啊!(這是變相增加Chorme市占率嗎?)

問:那麼如果我的網站用戶都不使用chrome,或者主要不使用chrome,那麼我的網站將沒有INP分數?

這是正確的。如果您的網站用戶不使用 Chrome,或者主要不使用 Chrome,那麼您的網站將不會有 INP 分數。這是因為 INP 指標僅根據從選擇加入 CrUX 的 Chrome 用戶收集的數據進行計算。

如果您想查看網站的 INP 分數,您可以鼓勵用戶使用 Chrome 並選擇加入 CrUX。這將有助於確保您的網站有足夠的真實用戶數據,以便可以計算 INP 指標。

以下是鼓勵用戶使用 Chrome 並選擇加入 CrUX 的一些提示:

  • 確保您的網站與 Chrome 兼容。 這意味著您的網站應設計為能夠與 Chrome 的特性和功能良好配合。
  • 在您的網站上推廣 Chrome。 您可以通過在網站頁腳添加 Chrome 下載頁面的鏈接或向網站添加宣傳 Chrome 的橫幅來實現此目的。
  • 向您的用戶提供有關 CrUX 的教育。 您可以通過將 CrUX 網站的鏈接添加到網站頁腳或添加博客文章來解釋 CrUX 是什麼以及它如何使您的網站受益來實現此目的。

通過遵循這些提示,您可以鼓勵用戶使用 Chrome 並選擇加入 CrUX。這將有助於確保您的網站具有 INP 分數,該分數可用於衡量網站對用戶的響應能力。