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

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

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 前端效能 系列文

Summer Tang
Sponsored
Summer Tang 一對一諮詢
Summer|TSMC 主任工程師|擁有 15 年資深 Web 架構經驗,職涯歷經跨國頂尖企業與新創。專精於高流量企業級應用開發,核心技術涵蓋微前端、效能優化、測試自動化與 SEO。曾出版多本技術著作,並多次擔任 MOPCON、WebConf 等大型技術年會講者。
了解更多 →