掌握好網站核心指標!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)
SEO如何檢視Google網站核心指標 (LCP、FID、CLS)？
去年 11 月 Google 官方表示同年五月推出的「網站核心指標(LCP、FID、CLS)」，在 2021 年五月會納入 Google 的演算法，正式列為排名因素。所以現在正是 SEO 們檢視 Google 網站核心指標 (LCP、FID、CLS)、並可以優化網站的使用者體驗 UX 的時機了！
推薦閱讀：SEO快訊-Google放寬Search Console網站使用體驗核心指標的標準
何謂「Google網站核心指標 (LCP、FID、CLS)」？
Google 網站核心指標 (LCP、FID、CLS) 是用於衡量網站的載入效率、互動性和頁面穩定性的一組指標。這三個指標都與網站速度相關，長期以來對搜尋引擎及使用者而言可以說是非常重要的。以下是三個 Google 網站核心指標的介紹：
顯示最大內容元素所需時間 (LCP)
何謂LCP?
LCP，Largest Contentful Paint 是「顯示最大內容元素所需時間」，計算網頁可視範圍內最大的內容元件需花多少時間載入。這項指標的意義是：網頁上的主要內容需花多少時間才會被使用者看到，相當於網頁給人的第一印象。
當頁面被載入時，Google 會抓取頁面中最大元素的載入時間作為 LCP，而且 LCP 會隨著載入的內容越來越多而改變，直到頁面完全載入後，最大元素即被確定為「真正的」LCP。
如下圖 TechCrunch 新聞網頁載入的例子中，可以看到前兩張圖的 LCP 是綠色框框裡的新聞標題「E3’s organizer⋯⋯」；在第三～四張圖中，所判定的 LCP 是另一個新聞標題「StockX was hacker,⋯⋯」；然後最後一張圖的 LCP 是標題下方的圖片，在載入完畢後就沒有出現更大的元件。因此本網頁「真正」的 LCP 為載入該圖片所需的時間。
LCP 的衡量指標
LCP 會偵測哪些內容元素？
各種格式的圖片，除了 .jpg、.png 等格式外亦包涵 svg 向量圖、影片預覽大圖等等
CSS 中的 url() 函數載入的背景圖元素
含有文字的區塊元素或行內元素
如何優化 LCP？
常見的 LCP 優化項目如下：
減少網站主機回應時間
針對主機效能優化
引導用戶到最近的 CDN 主機
使用網頁快取
提早載入第三方資源
盡量排除禁止轉譯（Render-blocking）的 CSS 與 JavaScript
降低 JavaScript 的阻擋時間
降低 CSS 的阻擋時間
加速資源載入時間
圖片大小優化
預先載入重要資源
壓縮文字檔案
根據使用者的網路狀態提供不同資源（adaptive serving）
使用 service worker 來快取內容
避免使用前端（用戶端）渲染（CSR）
盡量在後端（伺服器端）完成頁面渲染，讓用戶端取得已渲染好的內容。若必須使用 CSR 的話，建議優化項目如下：
將重要的 JavaScript 最小化
使用網站預渲染（pre-rendering）
首次輸入延遲時間 (FID)
何謂FID?
你是否曾經點入一個網站，雖然有內容顯示，但不管你怎樣與網頁互動，網頁都沒有任何反應？ Google 針對這樣的情形制定了 First Input Delay （FID，首次輸入延遲時間）這個指標。
FID，First Input Delay 是「首次輸入延遲時間」，計算使用者第一次與網頁互動（例如點擊連結或按鈕、打開式下拉選單、在文字對話框輸入文字等) 時的延遲時間。這項指標代表了網頁的互動與回應程度：在使用者嘗試與網頁互動時，網頁是否就能馬上回應。
FID的衡量指標
如何優化 FID？
太多的 JavaScript 執行，是造成 FID 延遲的主要原因：當瀏覽器的主執行緒（main thread）在忙著執行 JavaScript 時，是沒辦法回應大多數的網頁互動。所以 SEO 可以藉著優化 JavaScript 在網頁上的解析、編譯和執行方式將會直接減少 FID：
分割 long tasks（指執行 JavaScript 時網頁介面無法與用戶互動的期間） 成較小的非同步工作（asynchronous tasks）
降低第一、三方的腳本執行與資料截取
使用 Ｗeb Ｗorker API，讓 JavaScript 可在背景執行
減少 JavaScript 執行時間
本文為該系列的上篇，下篇（關於CLS 的解釋與實例、還有檢測工具）請點此連結
更多閱讀:
SEO快訊-Google放寬Search Console網站使用體驗核心指標的標準
