前端效能優化及指標

閱讀範圍

• Chapter 1

作者的觀點 or 知識點

• 前端的效能優化會影響使用者體驗以及 SEO，間接影響了企業的營收，但是過早的優化絕對不是好事

• Core Web Vitals

  • LCP (Largest Contentful Paint).md

  • FID (First Input Delay).md (2024/9/9 被 INP 取代）

  • CLS (Cumulative Layout Shift) .md

  • INP (Interaction to Next Paint ).md

• RAIL Model

  • Response： 50ms 內處理事件

  • Animation：每一幀任務壓在 10ms

    • 瀏覽器平均需要 6ms 來渲染一幀，60 hz 的螢幕代表一幀 16ms

  • Idle：最大化 idle time

    • 使用者輸入事件在 50ms 內得到回應

      • 一開始載入少量資源，剩下的利用 idle time 載入

      • 使用者在 idle time 的工作時間內互動則需要中斷 idle itme 的工作

  • Load：頁面在 5 秒內載入完畢並且有互動性

作者的舉例

網頁的載入速度每增加 100ms，營收就有可能減少約 1％ —— Amazon 內部研究

網站沒有在三秒內顯示完畢，40% 的消費者會選擇直接跳離網站 —— Akamai

• 監測工具

  • Google PageSpeed Insights

  • WebPage Test

  • Lighthouse

試著用一段簡短文字描述此次閱讀的內容

作者在這本書第一章用各方研究結果證明了效能優化對於企業最直接的影響，並且介紹了幾種監測前端效能的工具，最後再以各個效能指標作為結尾，不但介紹了這些只標指標的目的，同時也介紹了他們的優化方式

補充資料