掌握好網站核心指標!SEO再也不用煩!(下)
真的不用再擔心如何搞定SEO了!只要掌握好網站核心指標的關鍵,你也可以事半功倍!(下)
目錄
1. SEO如何檢視Google網站核心指標 (LCP、FID、CLS)？
2. 何謂「Google網站核心指標 (LCP、FID、CLS)」？
3-1 何謂LCP?
3-2 LCP 的衡量指標
3-3 LCP 會偵測哪些內容元素？
3-4 如何優化 LCP？
4-1 何謂FID?
4-2 FID的衡量指標
4-3 如何優化 FID？
5-1 何謂 CLS?
5-2 CLS的衡量指標
5-3 造成 CLS 不良的原因
6-1 Lighthouse 與 Page Speed Insights
6-2 Chrome 開發者工具 (Chrome DevTools)
本文為該系列的下篇，上篇（關於 LCP 與 FID 的解釋與實例）請點此連結
累計版面配置轉移 (CLS)
何謂 CLS?
你是否曾經使用手機進入痞客邦部落格，部落格雖然已經出現主要內容，但你正要開始閱讀內容時，網頁上又突然跳進某個廣告圖文，將你正要看的內容往下擠？這種被插隊的感覺，想必一定帶給你不良的使用者體驗（UX）吧！Google 針對這樣的情形制定了 Cumulative Layout Shift （CLS，累計版面配置轉移）這個指標。
CLS，Cumulative Layout Shift 是「累計版面配置轉移」，計算網頁載入時，已經出現的圖會是否會因某個元件突然載入就被往下擠。CLS 的計算方式為：影響範圍（佔可視範圍的百分比）*移動距離 = 元件移位分數，假設你有 75% 的文字內容被插入的元件下移了 25%，那就是「0.75*0.25=0.1875」(如下圖所示)。
網站使用體驗核心指標CLS指標的計算示意圖
CLS的衡量指標
造成 CLS 不良的原因
圖片、影片沒有指定尺寸（沒下 width、height 尺寸）
廣告、嵌入元素、iframe 沒有指定尺寸（沒下 width、height 尺寸）
突然插入在主內容之上的動態內容（如訂閱電子報、安裝 APP 等行動呼籲或相關文章列表等區塊突然出現在主內容之上，如以下影片所示）:
SEO 能做的優化方法：
如果真的要在網頁上安插這些動態內容的話，就先在網頁上預留該內容的區塊，如此一來，等到動態內容「跳」進來時，就不會讓將已載入的內容往其他地方「推」動。
網頁加載字體太慢，導致字跑不出來、或是瀏覽器先套用其他字體替代，到正確的字體載入時，文字會出現閃爍一下的狀況
SEO 能做的優化方法：
在主要的 Web 字體上加上 HTML 標記 <link rel=preload>：這樣的做法就是告訴瀏覽器要提前將字型載入，讓正確的字體能在第一時間出現、更不會有「閃一下」的狀況。
使用 HTML 標記 <font-display: swap;>：告訴瀏覽器要用替代字型，等真正的字型下載完畢再換上！
把字型存在本地端（self-hosted fonts），就是把字型下載下來後直接放在自己的網站，就可以省去連到別的網站存取的時間、再來是假設使用者曾經造訪過使用相同字型的網站，而瀏覽器快取了這個字型，這樣的話就能更加速字型存取。
可用來檢視 LCP、FID、CLS 的 SEO 工具
目前 Google 官方有推出多種監測 Core web vitals 的輔助工具，大家可以到 Chrome 線上應用程式商店下載以下工具並安裝：
Lighthouse 與 Page Speed Insights
Lighthouse 與 Page Speed Insights 測速工具不只能為網站進行評分，更能提供 SEO 的網站優化項目，為網站的優化提供明確的方向。
Lighthouse 與 Page Speed 都能為網站進行評分
Lighthouse 與 Page Speed Insights 都能為網站提出改善建議
Chrome 開發者工具 (Chrome DevTools)
SEO 可以藉由 Chrome DevTools 來觀看 Core Web Vitals 所參照的指標是在網頁載入的哪個時間點發生，藉以方便 SEO 進行網站優化。
Google Search Console
隨著此次的網站體驗指標更新之後，Google 同時於 GSC (Google Search Console) 站長工具中更新指標，提供站內所有頁面針對指標的評分，就能更方便 SEO 優化。
更多閱讀:
SEO快訊-Google放寬Search Console網站使用體驗核心指標的標準
大學新鮮人讓Python程式碼”可視化”!寫程式變得超簡單!
