最新SEO優化-Core Web Vitals，一篇文掌握Google使用者體驗三大核心指標LCP/FID/CLS

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

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

網站載入速度一直都是使用者體驗的核心之一，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和如何優化？

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

結語