網站體驗核心指標： LCP、FID、CLS，優化使用者體驗

使用者體驗 (User Experience)

使用者體驗，或 UX(User Experience)，即「任何產品、生活形式經過人為的設計後，使用上感受到的體驗」因此 UX 無所不在。從我們使用的浴廁設施、家具、到你喝的早餐店奶茶、滑的手機都是經過設計而成。

用戶體驗的設計師關心產品「何時」被使用，「如何」吸引人購買，以及購買後「如何」被使用。延伸到網站上，理所當然網站的載入速度、介面美觀、實用性、是否符合用戶的需求、用戶是否想再回訪，因此也與行銷、設計、工程和 SEO 息息相關。

網站體驗核心指標（Core Web Vitals）

2020 年 5 月 28 日， Google 在官方部落格中針對使用者體驗推出了新的 3 項 Core web vitals。用來測量訪客在頁面的瀏覽體驗狀況。每項指標皆代表使用者體驗不同的面相，並反映出以使用者為中心的真實體驗。

良好 需要改善 低落
LCP ≤2500ms >4000ms 75
FID ≤100ms >300ms 75
CLS ≤0.1 >0.25 75

每個核心指標的檢查結果都有良好、需要改善、不良三個區間

LCP (Largest Contentful Paint) — 顯示最大內容元素所需時間 [速度指標]

LCP 注重於頁面中最大元素的載入速度，簡言之就是網頁從開始等待畫面載入，直到主要畫面載入完成，Google 建議於開始載入網頁的 2.5 秒內完成 LCP。

LCP 會偵測那些項目？

  • <img> elements
  • 包在 <svg> element 裡面的 <image> elements
  • <video> elements
  • 透過 url() 的 CSS 功能 載入 background-image 的 element
  • 包含 text node 或是 inline-level text elements children 的 block-level element

LCP 該如何進行優化？

通常 LCP 可以針對以下 4 大點來進行優化

  • 減少伺服器回應時間
    • 針對主機進行優化
    • 使用較近的 CDN 主機
    • 使用網頁快取
    • 讓第三方的資源提早載入
  • 排除禁止轉譯的資源
    • 降低 JavaScript 阻擋時間
    • 降低 CSS 阻擋時間
  • 加快資源載入的時間
    • 圖片大小優化
    • 預先載入重要資源
    • 將文字檔案進行壓縮
    • 根據使用者的網路狀態提供不同的內容
    • 使用 service worker
  • 避免使用客戶端渲染(CSR)
    • 若必須使用 CSR ，建議優化 JavaScript ，避免渲染時使用太多資源
    • 盡量在伺服器端完成頁面渲染，讓用戶端取得已渲染好的內容

LCP 如何檢測

可以使用 Google PageSpeed Insights 檢查整體網站的 LCP 分數。如：

FID — First Input Delay 首次輸入延遲/封鎖時間總計 [互動性指標]

當使用者第一次與頁面進行互動，行為完成到瀏覽器成功回應給使用者的時間，根據 Google 的研究，100 ms 為「良好」的最低標準：如果處理輸入的延遲超過 100 ms，那麼其他處理和渲染步驟就沒有機會及時完成。

首次輸入 (First Input) 與頁面上的響應元件 (responsive elements) 息息相關。這些響應元件可能是連結、按鈕或是跳出式元素 (pop-ups)。

輸入延遲 (Input Delay) 通常發生於瀏覽器的主執行序過度繁忙，而導致頁面內容無法正確地與使用者進行互動。舉例來說，可能瀏覽器正在載入一支相當肥大的 JavaScript 檔案，導致其他元素不能被載入而延遲可互動的時間。 常見延遲的問題有：

  • 點選連結或按鈕載入內容延遲
  • 文字對話框無法立即輸入文字
  • 打開下拉式選單畫面延遲
  • 無法勾選對話方塊

如何優化 FID

CLS — Cumulative Layout Shift 累計版面配置轉移 [穩定性指標]

指網站在 Loading 讀取時有時會導致物件位移，會導致使用者點不到想點擊的區塊。CLS 就是用來評估這部分的反應時間及網站的穩定度。應將 CLS 控制在0.1 或以下

版面位移分數 (layout shift score) = 影響分數 (impact fraction) * 距離分數 (distance fraction)

影響分數：造成偏移區塊＋原本區塊所佔螢幕（viewport）比例

頁面內容的意外移動通常是由於：

  • 圖片缺少初始尺寸，所以等載入後寬高才會長出來
  • 缺少尺寸的廣告、內嵌（embed）以及 iframe
  • 動態置入內容
  • 下載網站字體有機會造成頁面閃爍 FOIT(Flash of Invisible Text)、FOUT(Flash of Unstyled Text)
  • 更新 DOM 前等待網路回應的動作

如何優化 CLS

  • 圖片元素使用固定尺寸或設定寬高比 CSS
  • 外部嵌入資源設定尺寸 (Ads, embeds, iframes)
  • 避免使用動態插入內容
  • Preload 載入外部字體樣式

https://web.dev/i18n/zh/optimize-cls/

CLS 檢測

同樣可以使用 Google PageSpeed Insights 或 Lighthouse

或是 Chrome DevTools 的 Layout Shift 中查看：