Source

https://www.youtube.com/watch?v=0fONene3OIA 6:42

Summary

• LCP: short for Largest Content Paint, measure loading performance
  • 2.5s is good, 4s is bad
  • 最大的元素 loading time，例如圖片、文字
  • 用 console 的 waterfall 查看
  • 使用 CDN 或縮圖技術優化
• FID: short for First Input Delay, measure interactivity performance
  • 100ms is good, 300ms is bad
  • 第一次與網頁互動的延遲，互動指的是觸發 event listener
  • 優化 js 的執行時間，lazy loading(qwik) 或使用 web worker 讓 js 在不同的 thread 上跑
• CLS: short for Cumulative Layout Shift, measure visual stability performance
  • 0.1 is good, 0.25 is bad
  • 每次畫面變化時元素的位移，例如結帳確認頁跳到結帳完成頁的訂單資訊位置變化
  • 使用 image 時設定 aspect ratio 以及 srcset 讓其變化的比較自然
  • 避免塞太多廣告
• 推薦的工具有
  • web vital chrome extension: 可以 measure 上述三點
  • unlighthouse: 可以 by page 測量你的 light house 結果
    • npx unlighthouse --site <your-site>