什麼是以使用者為中心的效能測量指標?

說明常用的效能測量指標。

First Paint(FP)與 First Contentful Paint(FCP)

First Paint(FP)是指瀏覽器將像素渲染到螢幕上的開始時間,通常使用者會在此時看到白屏。

First Contentful Paint(FCP)是指瀏覽器將使用者看得見的內容渲染到螢幕上的開始時間,例如:文字、圖片。

優化 FP 與 FCP 的方式有:移除禁止轉譯的資源;檢視資源下載的時間,使用壓縮技術減小檔案體積以減少下載時間等。

First Meaningful Paint(FMP)

First Meaningful Paint(FMP)是指頁面主要內容出現在螢幕上的開始時間,例如:標題、內文、Hero 圖,可說是最可能會影響版面配置的因素。

Time to Interactive(TTI)

使用者是否可與畫面互動,白話說就是使用者除了可看到畫面渲染完成外,還可進行輸入的動作。這代表頁面的 JavaScript 是否下載完成、Main Thread 是否被阻塞。優化方式是避免使用者下載與解析用不到的 JavaScript 檔案,可透過打包工具適當的拆分程式碼並調整下載順序。

Long Tasks

執行超過 50ms 的工作都可稱為 Long Tasks。

References

推薦閱讀


Web Vitals 效能調校 加載效能 Loading Performance 前端效能 系列文