Devices

Google網站體驗核心指標 Core Web Vitals (LCP、FID、CLS),使用者體驗新趨勢

網頁使用者體驗(Page Experience)一直是 Google 長期致力提升並優化的項目, 從「行動裝置友善(Mobile-friendly)」、「安全性瀏覽(Safe-browsing)」到「HTTPS 安全傳輸協定(HTTPS)」,都顯示出 Google 在評估網頁使用者體驗上的企圖心與願景。  近日,Google 開啟的 Web Vitals 計畫更導入了新的衡量指標「Core Web Vitals」為網站使用體驗開啟了新的里程碑!

透過此份報告,品牌能了解網頁使用者體驗的更新方向、檢測方式及優化建議。由於今年搜尋趨勢受到 COVID-19 的劇烈影響,Google 表示 Core Web Vitals 指標將於 2021 年開始實施。品牌不妨趁這一段時間好好評估網頁的狀況,即早找出優化的利基點,以便為明年到來的新指標做準備!

 

 

Index
     1. 什麼是網頁使用者體驗(Page Experience) ?
     2. 什麼是網站使用體驗核心指標(Core Web Vitals)?
     3. Core Web Vitals 三大指標:LCP、FID、CLS
              a. LCP (Largest Contentful Paint) – 最大內容繪製
              b. FID (First Input Delay) – 首次輸入延遲
              c. CLS (Cumulative Layout Shift) – 累計版面配置轉移
     4. 品牌該如何檢視 Core Web Vitals 指標?
     5. 結語

 


什麼是網頁使用者體驗 (Page Experience) ?

 

「Page Experience」是一套用來「判斷網頁資訊價值」並「衡量使用者與網頁互動經驗」的指標。 在過去, Page Experience 主要由四大項目所構成, 分別為:

     1. 行動裝置友善(Mobile-friendly)

     2. 安全性瀏覽(Safe-browsing)

     3. HTTPS 安全傳輸協定(HTTPS)

     4. 無侵入式網頁(No intrusive interstitials) 

 

page-experience指標表

▲ 資料來源:Google. (2020). Understanding page experience in Google Search results. Retrieved from
https://developers.google.com/search/docs/guides/page-experience

 

而在今年 5 月,Google 新加入的網站使用體驗核心指標(Core Web Vitals) 將為網站使用體驗帶來了不同的新標準。

什麼是網站使用體驗核心指標 (Core Web Vitals)

2020 年 5 月,Google 開啟了一項名為 Web Vitals 使用者體驗優化計劃,為網站使用體驗提供統一的評估標準。 在該計畫底下, Google 發展了一套名為網站使用體驗的核心指標(Core Web Vitals),並由 3 項子指標所構成,分別為:
     1. 最大內容繪製(Largest Contentful Paint, LCP)
     2. 首次輸入延遲(First Input Delay, FID)
     3. 累計版面配置轉移(Cumulative Layout Shift, CLS)

core-web-vitals架構圖
▲ 圖1:網站使用體驗核心指標(Core Web Vitals) 架構圖
資料來源:Google. (2020). Evaluating page experience for a better web. Retrieved from https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html

因應此次更新,網站建置者已經可以在 Google Search Console、PageSpeed Insight 工具上找到 Core Web Vitals 的檢測報表,以利確認網頁在三項指標下的表現。

Core Web Vit als 三大指標:LCP、FID、CLS

1. LCP(Largest Contentful Paint) –最大內容繪製

LCP 主要用於測量網頁上「最大元素」的載入時間。如圖 2 所示,在載入的過程中,系統判定最右邊的圖為該頁最大元素,故 LCP 會以該圖的載入時間作為標準。使用者若需要長時間等待,才能看到網頁上的內容,容易造成體驗不佳,而 LCP 即是計算網頁中最大元素的載入時間,如下方最右側中間圖片即為Google檢測該網頁中的最大元素。

LCP示意圖
▲ 圖2:LCP 示意圖
註:爬蟲偵測最右側中間圖片為網頁中最大元素
資料來源:Philip Walton. (2020, May 29). Largest Contentful Paint (LCP)[w eb.dev]. Retrieved from https://web.dev/lcp/

LCP評估指標
▲ 圖3:LCP 評估標準示意圖
資料來源:Philip Walton. (2020, May 29). Largest Contentful Paint (LCP)[w eb.dev]. Retrieved from https://web.dev/lcp/

LCP 優化方向

LCP 的影響原因主要為伺服器反應時間過慢、JavaScript 與 CSS 被禁止轉譯(Render-Blocking) 與載入網頁資源過慢等問題。建議品牌重新檢視伺服器的反應時,並優化網頁資源( 如圖片、JavaScript、CSS 等) 的載入狀況與讀取時間,以確保網頁元素能夠被有效率地載入。

2. FID (First Input Delay) –首次輸入延遲

FID 用於測量使用者第一次對網站進行互動時間( 僅包含點擊等單次互動;不包含滾動滑鼠、畫面放大縮小等連續性動作)。輸入延遲(Input delay) 通常發生在瀏覽器在執行主線任務(main thread) 的繁忙階段,意即使用者進入網頁後的第一次互動都是在「瀏覽器還沒將網站完全讀取完」的時候發生,導致瀏覽器需要花較長的時間來處理使用者提出的互動需求。

FID評估指標
圖4:FID 評估標準示意圖
資料來源:Philip Walton. (2020, May 27). First Input Delay (FID) [web.dev ]. Retrieved from https://web.dev/fid/

 
相較於網頁載入速度,Google 認為「網頁的第一次互動反應時間」在使用者對網頁整體品質、可信度與形象上有顯著的影響力。

FID 優化方向

首次輸入延遲較常發生在瀏覽器執行主線任務(main thread) 的繁忙階段,因此建議品牌可最小化瀏覽器的主線任務工作(Minimize main thread work)、縮短 JavaScript 的執行時間,同時減少會影響網頁載入表現的第三方程式碼(Third-party code) 以降低首次輸入的延遲時間。

3. CLS (Cumulative Layout Shift) - 累計版面配置轉移

CLS(Cumulative Layout Shift) 為累計版面配置轉移,主要用於測量網頁在加載中的「版面配置的轉移比例」。當使用者想要點擊網頁上的某物件時,會因為網站加載未完成或其他因素,導致版面發生位移,進而出現使用者點擊不到預期的物件,造成使用者體驗不佳,請參考下方位移範例。

CLS版面配置轉移示意圖
▲ 圖5:CLS 版面配置轉移示意圖
資料來源:Google. (2020). Evaluating page experience for a better web. Re trieved from https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html

CLS評估標準
▲ 圖6:CLS 評估標準示意圖
資料來源:Philip Walton, Milica Mihajlija. (2020, May 27). Cumulative Lay out Shift (CLS) [web.dev]. Re -trieved from https://web.dev/cls/

CLS 優化方向

網頁加載時,除了因網站本身程式架構外,圖片、嵌入式內容、廣告、動態載入內容等,也都會影響到網頁版位的變動。建議品牌重新審視網站本身程式碼的穩定性,並檢視網頁上顯示的圖片、影片是否有針對版面配置設置最適合的尺寸;同時,也建議確認目前頁面上的廣告或嵌入式內容( 如:YouTube 影片)是否會在推送、載入時改變網頁的版面配置。

Core-Web-Vitals狀態檢核表
▲ 資料來源:Google. (2020). Core Web Vitals report. Retrieved from https://support.google.com/webmasters/answer/9205520?hl=en

 

品牌該如何檢視 Core Web Vitals 指標?

目前品牌可利用六項工具對 Core Web Vitals 進行偵測;下方說明兩項工具:Google Search Console、PageSpeed Insights 供品牌檢視自身的指標表現。

Core-Web-Vitals指標檢測資源表
▲ 資料來源:Addy Osmani, Elizabeth Sweeny. (2020 May 28). Tools to measure Core Web Vitals. Retrieved from https://web.dev/vitals- tools/
 

1. Google Search Console

目前在 Google Search Console 左方的導覽列中已經新增了「網站使用體驗核心指標」報告,點擊該項按鈕即可立即瀏覽該項報告(圖7)。

Google-Search-Console檢測示意圖
▲ 圖7:Google Search Console 檢測示意圖
資料來源:Google Search Console

 
該項報告會列出所屬網站「行動裝置」與「桌面」版本的個別表現,同時針對各項問題做統整。品牌可點擊單一指標,了解該項指標檢測出的問題及影響的對應頁面,以利品牌評估後續優化方向。
 
Google-Search-Console檢測示意圖
▲ 圖8:Google Search Console 檢測示意圖
資料來源:Google Search Console
 

2. PageSpeed Insights

Google 提供的網站速度檢測工具 PageSpeed Insights,也已經出現對應的檢測欄位提供說明( 圖9 )。 PageSpeed Insights 會針對 3 項指標結合過往資訊,提供一個平均的數值,以供品牌確認網站表現。

Google-Search-Console檢測示意圖
▲ 圖9:PageSpeed Insight 檢測示意圖
資料來源:PageSpeed Insights

 

結語

使用者網頁體驗一直是網頁建置和 SEO 上重要的議題,透過 Core Web Vitals 指標能夠以較客觀、可量化的方式來了解網站速度、網頁版面等等如何影響使用者體驗,有助於品牌思考如何提升使用者體驗和 SEO 表現,為網頁建置提供更多元的優化方向。

立即下載用戶體驗新趨勢!「網站使用體驗核心指標」(Core Web Vitals) 完整版報告。