21 C
Taipei
星期一, 6 12 月, 2021
Home數位行銷SEO網站核心指標 LCP、FID、CLS 五月成 SEO 排名因素!優化看這篇

網站核心指標 LCP、FID、CLS 五月成 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)」?

Google 網站核心指標 (LCP、FID、CLS) 是用於衡量網站的載入效率、互動性和頁面穩定性的一組指標。這三個指標都與網站速度相關,長期以來對搜尋引擎及使用者而言是非常重要的。以下是三個 Google 網站核心指標的介紹:

顯示最大內容元素所需時間 (LCP)

LCP

何謂LCP?

LCP,Largest Contentful Paint 是「顯示最大內容元素所需時間」,計算網頁可視範圍內最大的內容元件需花多少時間載入。這項指標的意義是:網頁上的主要內容需花多少時間才會被使用者看到,相當於網頁給人的第一印象。

當頁面被載入時,Google 會抓取頁面中最大元素的載入時間作為 LCP,而且 LCP 會隨著載入的內容越來越多而改變,直到頁面完全載入後,最大元素即被確定為「真正的」LCP。

如下圖 TechCrunch 新聞網頁載入的例子中,可以看到前兩張圖的 LCP 是綠色框框裡的新聞標題「E3’s organizer⋯⋯」;在第三~四張圖中,所判定的 LCP 是另一個新聞標題「StockX was hacker,⋯⋯」;然後最後一張圖的 LCP 是標題下方的圖片,在載入完畢後就沒有出現更大的元件。因此本網頁「真正」的 LCP 為載入該圖片所需的時間。

TC-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

何謂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)
  • 降低第一、三方的腳本執行與資料截取
  • 使用 Web Worker API,讓 JavaScript 可在背景執行
  • 減少 JavaScript 執行時間

累計版面配置轉移 (CLS)

CLS

何謂 CLS?

你是否曾使用手機進入痞客邦部落格,部落格雖已出現主要內容,但你正要開始閱讀內容時,網頁上又突然跳進某個廣告圖文,將你正要看的內容往下擠?這種被插隊的感覺,想必帶給你不良的使用者體驗(UX)!Google 針對這樣的情形制定了 Cumulative Layout Shift (CLS,累計版面配置轉移)這個指標。

CLS,Cumulative Layout Shift 是「累計版面配置轉移」,計算網頁載入時,已經出現的圖會是否會因某個元件突然載入就被往下擠。CLS 的計算方式為:影響範圍(佔可視範圍的百分比)*移動距離 = 元件移位分數,例如你有 75% 的文字內容被插入的元件下移了 25%,那就是「0.75*0.25=0.1875」(如下圖所示)。

網站使用體驗核心指標CLS指標的計算示意圖
網站使用體驗核心指標CLS指標的計算示意圖

CLS的衡量指標

  Good(速度良好) Needs improvement(需要改善) Poor (速度低落)
CLS <=0.1 <=0.25 >0.25

造成 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 線上應用程式商店下載以下工具並安裝:

core-web-vitals

Lighthouse 與 Page Speed Insights

Lighthouse 與 Page Speed Insights 測速工具不只能為網站進行評分,更能提供 SEO 的網站優化項目,為網站的優化提供明確的方向。

Lighthouse/Page Speed
Lighthouse 與 Page Speed 都能為網站進行評分

 

Page-speed-insights
Lighthouse 與 Page Speed Insights 都能為網站提出改善建議

Chrome 開發者工具 (Chrome DevTools)

SEO 可透過 Chrome DevTools 來觀看 Core Web Vitals 所參照的指標是在網頁載入的哪個時間點發生,方便 SEO 進行網站優化。

Google Search Console

GSC-Web-core-metrics

隨著此次的網站體驗指標更新之後,Google 同時於 GSC (Google Search Console) 站長工具中更新指標,提供站內所有頁面針對指標的評分,方便 SEO 優化。

最新文章

熱門文章