最新SEO優化要素,一篇文掌握Google使用者體驗核心指標Core Web Vitals

SEO

SEO搜尋引擎優化(Search Engine Optimization)是一門可以挖很深的學問,這篇文要介紹的概念雖然不到超深,但也是屬於比較進階的SEO技巧,如果你對較廣泛的SEO知識有興趣,歡迎報名參加我們舉辦的免費SEO講座。

點此報名免費SEO直播課程

在2020年5月5日,Google的Chrome Team在他們的Chromium部落格發布了衡量網站使用者體驗的核心指標Core Web Vitals,沒過幾天,在5月28日Google官方部落格馬上宣佈將這些指標都列入Google的排名因素Ranking Factor。

這是什麼意思呢?

Google在談論影響排名的因素時,通常都很隱晦,所以當Google明講某個因素會列入參考時,就代表你的網站若無法達到標準,就會被扣分,導致排名下降。

像是你的網站若沒有傳輸安全加密Https,Google就會讓他的排名下降。

儘管沒人說的準Google怎麼更新演算法,也無法確定網站排名實際會影響多少,但我們能做的,就是了解規則來避免扣分,這就是為什麼我們需要認識使用者體驗核心指標

什麼是使用者體驗指標Core Web Vitals?

Core Web Vitals顧名思義就是Google用來評斷各別網頁「整體使用者體驗」的重要指標;使用這些指標來測量網頁的載入速度互動性視覺穩定性

指標三大重點:

  • 網站載入速度:最大內容繪製 LCP(Largest Contentful Paint) 
  • 網頁互動性:首次輸入延遲 FID(First Input Delay) 
  • 視覺穩定性:累積版面移動 CLS(Cumulative Layout Shift)  

聽起來很複雜吧,沒關係,我們會一一為您破解,告訴你每個指標的定義與網站優化的重點。

如何查詢使用者體驗指標Core Web Vitals?

這些指標的數據能在哪裡觀測呢?以下四個平台都有提供資訊。

  • Page Speed Insight
  • Google search console
  • Web Vitals/Google extension
  • Web page test

1. Page Speed Insight

Page Speed Insight是網站的測速工具,同時也會提供使用者體驗指標,為網站的優化提供方向;但這裡的數據有時候實在太嚴格,參考性偏低。

下圖為測試Google自己網頁所顯示的數據,連自己的網站都無法通過考驗…

LCP FID CLS,看到這些關鍵字了嗎?

2. Google search console

Google search console是站長必備的工具之一,在這次更新後也能查詢的到使用者體驗指標的數據,你能在側欄的工具列中找到他。

網站使用者體驗核心指標
工具中會顯示你網頁中哪個指標有問題。

3. Web Vitals /Chrome擴充功能

你可以在Google應用商店裡找到Web vitals的擴充功能,安裝之後,只要點擊就能查看所在網頁的使用者體驗核心指標。


單就這個指標來說最方便的工具

4. Web Page Test

使用Web page test網頁表現檢查工具,也會有Core Web Vitals的分數。


目前還未顯示FDI。

使用者體驗指標跟SEO有什麼關係?

在進入實際優化步驟前,我們先來理解一下,為何Core Web Vitals會影響到Seo優化?

宏觀來說,SEO要完成的主要任務就只有兩個,一個是讓Google喜歡,一個是讓搜尋用戶喜歡。

像是點擊率(Click through rate)、網頁停留時間、跳出率(Bounce rate)等等,就是搜尋用戶釋出的訊號,若是用戶喜歡你的網頁,Google就會提高你的排名。

但問題是,跳出率、停留時間這些因素比較被動,需要大量數據累積才能產生,所以Core Web Vitals才順應而生。

Core Web Vital,讓Google能直接用這些指標來評估用戶喜不喜歡你的網頁。

舉例來說:如果Google要評測一個男人是不是好男人的話,以前他可能要等很多女生跟他交往,並聽完她們的意見後,才能決定這男人好不好,但現在Google紅娘團隊已經驗豐富,所以就發展出了一套Core Men Vital來主動觀測來評斷這個男人好不好。

Core Men Vital:身高大於180,存款大於一百萬,不菸不酒。

Google一向都很重視使用者體驗,他們希望帶給用戶最好的搜尋體驗,你試想,如果搜尋結果前幾名都是一些老舊且載入緩慢的網站,你會不會漸漸就不想使用Google搜尋了。

這次的Core Web Vitals就是使用者體驗的指標,如果你做得好,不止Google喜歡你,連用戶也會愛上你,這樣你的SEO想不好都很難。(當然內容還是最重要的啦)

使用者體驗核心指標
使用者體驗總覽

網站載入速度LCP

LCP網站載入速度

網站載入速度一直都是使用者體驗的核心之一,Google過去用過很多不同的指標來衡量網站載入速度是否合格,但過往的指標往往無法準確描繪出用戶真正的使用情境;所以這次的更新,便是透過衡量加載頁面最大的元素的時間,來確認網站的載入速度。

什麼是LCP?

LCP是計算網頁中最大的內容元件載入所需的時間;簡單點說,就是網頁中的最主要內容被使用者看到所花的時間。

在LCP(Largest Contentful Paint)產生之前,其實有另一個指標叫做FCP(First Contentful Paint),FCP 是觀測網站中的第一個元素的載入時間,Google發現只單純觀測第一個元素並不準確,因為有可能第一個元素秒載入,其他卻慢得要死;這才出現這新版的LCP,觀測網站中,最主要元素的載入時間。

FCP:首元素載入時間|LCP:最主要元素載入時間

如何判定最主要元素?

最大載入元素

圖片載入速度
圖片來源:web.dev

從上面兩張圖就可以看出,LCP的判定元素會依據網頁的不同而改變,他就是抓取可視區域中最大的內容元素

第一張CNN的網頁,因為圖片是可視範圍中的最大內容元件,因此本頁的計算,就是以這張圖片載入所需要的時間作為依據;而第二張圖則是那段文字為最大內容,所以就以它來計算。

下列的元素都會被列入參考:

  • 圖片img
  • 向量圖片Svg
  • 影片的預覽圖
  • 透過CSS載入背景圖片的元素
  • 包含文字的區塊級元素 (block-level elements) 或行內元素 (inline elements)

何謂好的LCP和如何優化?

LCP網站載入速度
Google為LCP設下的門檻是2.5秒,只要能小於這個數字就算過關了(不會被懲罰)。

至於如何優化,以下有幾點建議:

  • 使用較好的主機(避免使用共享主機)
  • 使用網頁快取
  • 圖片優化(避免大於1mb以上的圖片)
  • 讓第三方的資源提早載入
  • 預先載入重要資源
  • 根據使用者的網路狀態提供不同的內容

實際操作上,若不碰工程端,最可以調整的元素就是圖片,優化和壓縮圖片通常就能大幅改善你的網站載入速度,因為對大多網站來說,可視範圍中最大的元素通常就是圖片,無論是網頁的Banner、Slider或是文章的首圖。

關於圖片優化,你可以:

  1. 減少與內容不相關的圖片
  2. 使用Tinypng等工具優先壓縮圖片
  3. 將圖片轉換成載入較快的格式(Jpg2000 or Webp) 轉換工具:Convertio
  4. 使用行動裝置相容的圖片大小

更多LCP優化細節,你可以參考這篇文章:Optimize Largest Contentful Paint

網頁互動性FID

大多數的網頁,都會有與用戶互動的元素,像是點擊文章或填寫表格等等,你一定有過經驗,就是進到某個網頁,以為已經讀取完畢,結果一按網頁上的連結都沒反應,這肯定就會大大影響你的體驗吧。

什麼是FID?

首次輸入延遲(First Input Delay),Google計算用戶第一次與網頁互動時的延遲時間

互動包含:點連結、選單或填表格等等,這指標就是代表了網頁的互動性與反應時間,觀測用戶互動時是否能馬上得到回應。

上圖黃色的 FID 所代表的就是網頁輸入延遲的狀況。這種情況通常發生在瀏覽器忙於解析和執行網頁中的大型JavaScript文件,因為資源都被拿去執行這個操作,導致它無法同時運行網頁中的其他功能與事件。

用戶必須等到主線程忙完,瀏覽器才能產生順暢的互動;若延遲時間太久,就會大大破壞使用者體驗。

常見輸入延遲有:

  • 點選連結延遲
  • 表格無法立即輸入文字
  • 打開選單延遲
  • 無法勾選對話方塊 

何謂好的FID和如何優化FID?

首次輸入延遲

為了不讓用戶感覺受到冷落,網頁應努力讓首次輸入延遲小於0.1。要注意的是FID僅在事件處理中測量「延遲」,不代表事件處理時間本身;所以若要針對性的優化,你的目標便是讓延遲時間縮短。

至於如何優化,以下有幾點建議:

  • 減少JavaScript運作的時間
  • 降低網站的request數並降低檔案大小
  • 減少主執行序的工作
  • 降低第三方程式碼的影響

Google為了鼓勵大家提升網頁速度 ,特別開發了能追蹤FID的Javascript函式庫,提供大家使用,追蹤到的 FID 事件,也能透用追蹤碼傳送到GA做檢視與分析。

更多FID優化細節,你可以參考這篇文章:Optimize First Input Delay

視覺穩定性CLS

上面的短影片就清楚顯示累積版面移動CLS這指標是在談論什麼,你大概遇過這種情況,你正準備要點擊連結或按鈕,但在手指落下的瞬間,按鈕移開了!這種經歷很討厭,而且在某些特殊情況下,你還會因此造成真正的損失。(誤觸結帳、註冊等等)

什麼是CLS?

CLS是衡量用戶視覺穩定性的重要指標,因為它有助於量化用戶經歷意外移位的頻率,避免使用者被一些非必要的位移混淆,導致點錯按鈕或連到錯誤的頁面。

CLS的計算方式就是使用者瀏覽網頁時,每次非預期性的元件移位分數加總

何謂好的CLS和如何優化CLS?

一個好的網頁體驗,CLS分數要小於0.1;網頁元件移位的分數(Layout Shift Score)是一個介於0~1的值,而CLS就是這些分數的加總

那我們就要了解Layout Shift Score是怎麼計算的;

網頁元件移位分數=移位的影響層面x實際移動距離

板塊位移

以上圖的例子來說,這次網頁元件移位分數=(影響層面)0.75*(移動距離)0.25=0.1875。光是這樣子的位移,就超過0.1了,所以請盡量避免在你網頁上有任何元件的跳動。

至於如何優化,以下有幾點建議:

  • 賦予每張圖片確切的大小(Width, Height)
  • 賦予廣告(Ads)、崁入影片(iframe, embeds)確切的大小
  • 盡量避免字型載入
  • 使用CSS語法為網頁中元素預留空位,避免載入後導致頁面中的內容移動

更多CLS優化細節,你可以參考這篇文章:Optimize Cumulative Layout Shift

結語

希望這篇文章能讓你理解Core Web Vitals的精髓在哪,以及你可以做哪些事情來提升自己網站的使用者體驗,如果你對其他SEO有興趣,請務必要參加我們舉辦的SEO重點極速整理,讓你一堂課就急速升級。

報名連結:https://morepower.club/seo/

其他人還看了這些文章...

Responses

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *