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

最新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自己網頁所顯示的數據,連自己的網站都無法通過考驗…

2020 08 06 下午12.03.48
LCP FID CLS,看到這些關鍵字了嗎?

2. Google search console

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

2020 08 06 下午12.12.47

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

3. Web Vitals /Chrome擴充功能

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

2020 08 06 下午12.31.14
單就這個指標來說最方便的工具

4. Web Page Test

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

2020 08 06 下午4.41.00
目前還未顯示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或是文章的首圖。

image largest element 1

關於圖片優化,你可以:

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

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

網頁互動性FID

fid 8x2 1

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

什麼是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

Cumulative Layout Shift 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重點極速整理,讓你一堂課就急速升級。

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

相關文章

訂閱
通知關於
guest
0 回覆
Inline Feedbacks
View all comments

接收修煉筆記!

每天都比昨天的自己更強