網站核心指標將影響SEO排名!這是怎麼回事呢?
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)」？
SEO 們檢視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 的衡量指標
Good（速度良好） |
Needs improvement（需要改善) | Poor（速度低落) |
|
| LCP | <=2.5s | <=4s | >4s |
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的衡量指標
| Good（速度良好） | Needs improvement（需要改善) | Poor (速度低落) | |
| FID | <=100ms | <=300ms | >300ms |
如何優化 FID？
過多的 JavaScript 執行，是造成 FID 延遲的主因：當瀏覽器的主執行緒（main thread）在忙著執行 JavaScript 時，是無法回應大多數的網頁互動。所以 SEO 可以藉著優化 JavaScript 在網頁上的解析、編譯和執行方式將直接減少 FID：
- 分割 long tasks（指執行 JavaScript 時網頁介面無法與用戶互動的期間） 成較小的非同步工作（asynchronous tasks）
- 降低第一、三方的腳本執行與資料截取
- 使用 Ｗeb Ｗorker API，讓 JavaScript 可在背景執行
- 減少 JavaScript 執行時間
本文為該系列的上篇，下篇（關於CLS 的解釋與實例、還有檢測工具 ）連結點此。
相關文章: