2020 Chrome Web.Dev Recap - laiyenju/dev-learn GitHub Wiki

怎樣才算是好的使用者體驗？Google 優化網站的指標：Web Vitals Web Vitals 是由 Google 發起的網站指南，簡化現有的網站優化指標，每年會收集開發者的回饋，調整優化指標。

Web Vitals 指標介紹

訂定 Web Vitals 指標的重要原則（Pillars of UX）

1. Loading 讀取速度
2. Interactivity 互動回饋
3. Visual Stability 視覺穩定性

根據以上三種原則，推出三種 RUM 指標

1. Largest Contentful Paint, LCP，檢測讀取速度，要在 2.5 以下。

   主要拿網站中最大塊、最顯眼的網頁物件，檢測該物件的讀取速度

2. First Input Delay, FID, 檢測使用者執行後獲得回饋的速度，100 ms 以下。
3. Cumulative Layout Shift, CLS, 檢測視覺穩定性。

   計算既存物件與 pop-up 物件間的距離。

以上三個指標都屬於 RUM 指標，檢測的是所有使用者中的 75% 人數的平均回饋。

什麼是 RUM 指標？ Lighthouse 是 lab data，使用的是模擬使用者情境下的資料。建議在網頁開發階段檢測。RUM 是 field data，會搜集真實使用者的資料。建議在網站上線前檢測。

延伸閱讀

• Web Vitals
• Understanding page experience in Google Search results
• Optimize Website – Page Experience – Core Web Vitals

---

如何檢測？

以下是 Google 推薦的網站指標檢測工具

1. Lighthouse，有 extension。Lighthouse 無法測到 FID，因此要檢測 FID 就建議使用 TBT。
2. Chrome DevTools，會抓出 LCP 是讀取哪個物件的速度。有 extension
3. CrUX，只要使用者用 Chrome 就能搜集使用資料。給不熟悉 chrome 開發者工具的人，可用 Google data studio 的 CrUX Dashboard，需要一定的數據量，才有辦法產生報表。
4. PageSpeed Insights 可同時瀏覽模擬資料跟真實資料。

檢測工具在開發過程中的使用流程

1. Search console
2. 網站剛上線：PageSpeed Insights
3. 定期優化：lighthouse, chrome dev tools
4. 依據 web vitals 指標進行優化
5. Lighthouse CLI 包在開發流程內，檢測因新增功能導致的速率變慢
6. CrUX 規律檢測

延伸閱讀

• What’s New in Speed Tooling
• Mastering the Chrome UX Report on BigQuery
• Core Web Vitals in the DevTools Timeline

---

幾個有趣的技術介紹

Google Chrome Labs

• GitHub
• Chrome Music Lab

Tooling.Report

類似 web vitals 的指標，會推薦適合專案開發的工具：

• browserify
• parcel
• Rollup
• Webpack

Chrome Dev Tools 新增功能

• 新增 issues tab，詳細彙整可能有的問題與解決指南。
• color vision deficiency emulation，能模擬視障者見到的網頁效果，協助無障礙網頁設計。

Web Stories

用網站技術作出類似現實動態的東西，可選擇使用 AMP、wordpress plugin 或 css 達成。