SEO怎麼做？SEO優化必備要素，Google最新推出的Core Web Vitals 網站核心指標！｜言己,日常生活

9 min readSep 14, 2020

生活裡總是有多個角色，除了看起來每天好像都在玩的Youtuber之外(我真的沒有每天都在玩！)，其實我還有一個身份，就是需要工作領薪水的上班族。最近來了個案子，讓我有個機會，可以久違的從0開始慢慢學SEO優化的技巧，腦袋很小、記憶不好，也順便把這段歷程記錄下來，給未來的自己看，也讓剛好需要的你一起看。 — 趴踢 pa-ty

2020年的年中，Google發表了一篇部落格文章，主要是發佈Google新的衡量使用者體驗的核心指標Core Web Vitals，而過不久也宣布這項指標要列入Google的排名要素之一。也因為這樣，沒錯我的SEO優化工作，又多了一個指標了，那就是要讓網站盡可能地滿足Google的Core Web Vitals規則，而這次的內容，就是把我這幾天努力認識Core Web Vitals後，將這些內容記錄下來的筆記。

那什麼網站使用體驗核心指標 Core Web Vitals?

Core Web Vitals 是由三個使用者體驗指標組成，分別是由LCP、FID、CLS三個要素所組成，想要做好SEO優化，絕對要知道他們各代表什麼意思！

LCP(Largest Contentful Paint) 最大內容區塊載入

這個意思是指使用者所在的網頁可視範圍，最大內容區塊的載入速度。就官方提供的說明，會被最為最大內容區塊的考慮範圍有：

圖片<img>
內含<image>的<svg>
影片
透過url()載入的背景圖片
文字區塊

而網頁在讀取的時候，總是會有延遲載入的區塊，那Google到底是怎麼判定，哪個區域是當下的最大內容區塊呢？參考web.dev說明，當頁面有出現延遲載入的情況是，LCP是有可能被重新計算的。以下圖為例，一開始載入的是Logo的圖片，接著因為延遲載入的標題大於Logo，因此LCP變更為標題，最後圖片Loading出來了，則LCP最終以圖片計算，也就是這張圖片的最終載入時間，就是這個區域的「最大內容區塊載入」時間。

而一旦使用者與這個頁面開始進行互動(例如點擊按鈕或滾動螢幕)，LCP就會停止計算。那我們可以從哪裡來找到網頁的LCP是被計算在哪個區塊上呢？這時候你就可以打開你的chrome瀏覽器，點擊右鍵按上檢查，在Performance中，就可以查看到該頁面的LCP是被計算在哪一區塊，且載入的時間為何。

FID(Frist Input Delay) 用戶首次輸入的延遲時間

FID所代表的意思就是，當使用者來到某個網頁執行第一個動作時的回饋速度，其中包含點擊連結、點擊按鈕或是打字…等(滾動跟放大網頁不算)，而回饋的內容，有可能是換頁或是跳出提示視窗…等，總之要讓FID的表現較好，就需要注意網頁中每一個互動，是否能順暢的使用囉～

CLS(Cumulative Layout Shift) 版面配置轉移

是不是曾經有過這樣的經驗：正在開心地看著某一篇文章介紹，但是延後載入的圖片不斷的出現，讓你到最後根本找不到剛剛看到的段落了？而這樣子的網頁，就會讓你的CLS的分數偏低，進而影響到SEO優化。

而CLS是怎麼計算出來的呢？官方的公式是：Layout shift score = impact fraction * distance fraction，一樣拿web.dev的範例做說明，參考下圖，本來「Click Me!」的橘色按鈕，沒有在第一時間被載入到畫面上，過了一段時間才跑出來，進而導致綠色區塊位移。

impact fraction：表示影響的區域範圍，綠色區塊佔可視區域的50％，因此這部分的分數為0.5

distance fraction：表示位移的距離範圍，以上圖為例，橘色的按鈕大約讓綠色區塊下移14%的距離，因此該分數為0.14

而「Layout shift score = impact fraction * distance fraction」的情況下，0.5*0.14=0.07，表示這個CLS的分數為0.07分，Google會依據該分數來評估該網站是否符合使用者體驗最佳化！而依據Google的官方建議，分數大於0.25就是一個比較差的網頁了。

要怎麼確定Core Web Vitals是否符合規範？

SEO優化的最大目的，就是希望網站上的內容可以在搜尋結果的排名上有比較好的成績。但是我們無法控制這個結果的判定，因此我們只能盡可能地符合搜尋引擎的規範，讓網頁的分數高一點，盡可能地往高排名的目標前進。

而網站使用體驗核心指標 Core Web Vitals應該要怎麼做才能符合規範呢？以下內容會將官方提供的標準、怎麼驗證網站目前的「使用者體驗指標」的狀況，也將這次運用到的優化方法都記錄下來，希望能幫到有需要的你。

Google建議的合格標準

參考web.dev的說明，可以發現Google官方，針對網站使用體驗核心指標 Core Web Vitals 有定義清楚的標準值，而為了達到網頁的SEO優化目的，建議最好是符合官方規定，盡可能地將網頁的每項指標，都達到官方所建議的標準值，我想就能為SEO優化盡一份力。

而以下就是官方所建議的標準值：

怎麼驗證網站目前的網站使用體驗核心指標狀況

當我們已經知道官方的標準了，那有沒有什麼工具可以幫助我們進行相關指標的檢測，以利進行後續的調整與測試呢？有的，Google其實提供了蠻多工具，讓需要的使用者，可以透過這些工具，來檢測自己的網站是否合乎規範。

然後web.dev推薦的工具蠻多的，而以下只記錄那些平常我比較常用的，如果官方推薦的工具，你有覺得哪個部分特別好用的，也歡迎你留言跟我說～感謝！

Google Search Console

我想這個工具，大家應該都不陌生，而自從Google推出了網站使用體驗核心指標 Core Web Vitals後，也在左側的功能列表中，新增了「Core Web Vitals(網站使用體驗核心指標)」的項目，點擊後Google會提供網站Core Web Vitals的狀態，讓你知道有多少網頁是表現不好的，幫助我們可以進行相關調整。