網頁使用者體驗（Page Experience）一直是 Google 長期致力提升並優化的項目， 從「行動裝置友善（Mobile-friendly）」、「安全性瀏覽（Safe-browsing）」到「HTTPS 安全傳輸協定（HTTPS）」，都顯示出 Google 在評估網頁使用者體驗上的企圖心與願景。 近日，Google 開啟的 Web Vitals 計畫更導入了新的衡量指標「Core Web Vitals」為網站使用體驗開啟了新的里程碑！
透過此份報告，品牌能了解網頁使用者體驗的更新方向、檢測方式及優化建議。由於今年搜尋趨勢受到 COVID-19 的劇烈影響，Google 表示 Core Web Vitals 指標將於 2021 年 5 月開始實施。品牌不妨趁這一段時間好好評估網頁的狀況，即早找出優化的利基點，以便為明年到來的新指標做準備！
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)
▲ 資料來源：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)
▲ 圖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
LCP 主要用於測量網頁上「最大元素」的載入時間。如圖 2 所示，在載入的過程中，系統判定最右邊的圖為該頁最大元素，故 LCP 會以該圖的載入時間作為標準。使用者若需要長時間等待，才能看到網頁上的內容，容易造成體驗不佳，而 LCP 即是計算網頁中最大元素的載入時間，如下方最右側中間圖片即為Google檢測該網頁中的最大元素。
▲ 圖2：LCP 示意圖
註：爬蟲偵測最右側中間圖片為網頁中最大元素
資料來源：Philip Walton. (2020, May 29). Largest Contentful Paint (LCP)[w eb.dev]. Retrieved from https://web.dev/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 等) 的載入狀況與讀取時間，以確保網頁元素能夠被有效率地載入。
FID 用於測量使用者第一次對網站進行互動時間( 僅包含點擊等單次互動；不包含滾動滑鼠、畫面放大縮小等連續性動作）。輸入延遲(Input delay) 通常發生在瀏覽器在執行主線任務(main thread) 的繁忙階段，意即使用者進入網頁後的第一次互動都是在「瀏覽器還沒將網站完全讀取完」的時候發生，導致瀏覽器需要花較長的時間來處理使用者提出的互動需求。
圖4：FID 評估標準示意圖
資料來源：Philip Walton. (2020, May 27). First Input Delay (FID) [web.dev ]. Retrieved from https://web.dev/fid/
FID 優化方向
首次輸入延遲較常發生在瀏覽器執行主線任務(main thread) 的繁忙階段，因此建議品牌可最小化瀏覽器的主線任務工作(Minimize main thread work)、縮短 JavaScript 的執行時間，同時減少會影響網頁載入表現的第三方程式碼(Third-party code) 以降低首次輸入的延遲時間。
CLS(Cumulative Layout Shift) 為累計版面配置轉移，主要用於測量網頁在加載中的「版面配置的轉移比例」。當使用者想要點擊網頁上的某物件時，會因為網站加載未完成或其他因素，導致版面發生位移，進而出現使用者點擊不到預期的物件，造成使用者體驗不佳，請參考下方位移範例。
▲ 圖5：CLS 版面配置轉移示意圖
資料來源：Google. (2020). Evaluating page experience for a better web. Re trieved from https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
▲ 圖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 影片)是否會在推送、載入時改變網頁的版面配置。
▲ 資料來源：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 供品牌檢視自身的指標表現。
▲ 資料來源：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)。
▲ 圖7：Google Search Console 檢測示意圖
資料來源：Google Search Console
▲ 圖8：Google Search Console 檢測示意圖
資料來源：Google Search Console
2. PageSpeed Insights
Google 提供的網站速度檢測工具 PageSpeed Insights，也已經出現對應的檢測欄位提供說明( 圖9 )。 PageSpeed Insights 會針對 3 項指標結合過往資訊，提供一個平均的數值，以供品牌確認網站表現。
▲ 圖9：PageSpeed Insight 檢測示意圖
資料來源：PageSpeed Insights
結語
使用者網頁體驗一直是網頁建置和 SEO 上重要的議題，透過 Core Web Vitals 指標能夠以較客觀、可量化的方式來了解網站速度、網頁版面等等如何影響使用者體驗，有助於品牌思考如何提升使用者體驗和 SEO 表現，為網頁建置提供更多元的優化方向。
立即下載用戶體驗新趨勢！「網站使用體驗核心指標」(Core Web Vitals) 完整版報告。
