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或是文章的首圖。
關於圖片優化，你可以：
更多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重點極速整理，讓你一堂課就急速升級。
