網站核心指標搞定好,SEO變得好簡單!(上)

原來要搞定SEO其實不難,前提是要知道網站核心指標有哪些!(上)

目錄

1. SEO如何檢視Google網站核心指標 (LCP、FID、CLS)?

2. 何謂「Google網站核心指標 (LCP、FID、CLS)」?

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

3-1 何謂LCP?

3-2 LCP 的衡量指標

3-3 LCP 會偵測哪些內容元素?

3-4 如何優化 LCP?

4. 首次輸入延遲時間 (FID)

4-1 何謂FID?

4-2 FID的衡量指標

4-3 如何優化 FID?

5. 累計版面配置轉移 (CLS)

5-1 何謂 CLS?

5-2 CLS的衡量指標

5-3 造成 CLS 不良的原因

6. 可用來檢視 LCP、FID、CLS 的 SEO 工具

6-1 Lighthouse 與 Page Speed Insights

6-2 Chrome 開發者工具 (Chrome DevTools)

6-3 Google Search Console

 

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-1.jpg

何謂LCP?

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

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

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

TC-LCP-768x297-2.png

LCP 的衡量指標

LCP-11.JPG

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-3.jpg

何謂FID?

你是否曾經點入一個網站,雖然有內容顯示,但不管你怎樣與網頁互動,網頁都沒有任何反應? Google 針對這樣的情形制定了 First Input Delay (FID,首次輸入延遲時間)這個指標。

FID,First Input Delay 是「首次輸入延遲時間」,計算使用者第一次與網頁互動(例如點擊連結或按鈕、打開式下拉選單、在文字對話框輸入文字等) 時的延遲時間。這項指標代表了網頁的互動與回應程度:在使用者嘗試與網頁互動時,網頁是否就能馬上回應。

FID的衡量指標

FID-33.JPG

如何優化 FID?

太多的 JavaScript 執行,是造成 FID 延遲的主要原因:當瀏覽器的主執行緒(main thread)在忙著執行 JavaScript 時,是沒辦法回應大多數的網頁互動。所以 SEO 可以藉著優化 JavaScript 在網頁上的解析、編譯和執行方式將會直接減少 FID:

分割 long tasks(指執行 JavaScript 時網頁介面無法與用戶互動的期間) 成較小的非同步工作(asynchronous tasks)

降低第一、三方的腳本執行與資料截取

使用 Web Worker API,讓 JavaScript 可在背景執行

減少 JavaScript 執行時間

 

本文為該系列的上篇,下篇(關於CLS 的解釋與實例、還有檢測工具)請點此連結

 

 


推薦閱讀:
SEO快訊-Google放寬Search Console網站使用體驗核心指標的標準


SEO快訊-Google 搜尋可能會更少顯示「精選摘要」


SEM快訊-Google Ads將於四月停用展示型購物廣告


Google 推出搜尋結果新功能!SEO可能會變更複雜⋯⋯


想無痛就學會SEO嗎?先了解它跟PPC關鍵字廣告差在哪!


人人都想去的IT工作!NVIDIA竟排行第一名?!(上)


榮登前十個神級好用的Python函式庫,你知道幾個?(1)

arrow
arrow

    jimchen19901212 發表在 痞客邦 留言(0) 人氣()