web前端應用效能指標測量工具有哪些？

csuwujing發表於2024-07-03
Web前端指標

接上一篇介紹前端效能指標的內容，本文主要總結下一般使用的效能測量工具。
1、可以藉助 Gooogle 開源的 web-vitals 庫來測量一些效能指標：

import {onCLS, onINP, onLCP, onFCP, onFID, onTTFB} from 'web-vitals';
onCLS(console.log);
onINP(console.log);
onLCP(console.log);
onFCP(console.log);
onFID(console.log);
onTTFB(console.log);

2、使用 Google 提供免費的 PageSpeed Insights (PSI) 工具來測試網站的效能：
image

3、使用 Chrome Devtools 的 Lighthouse 選項卡測試效能指標：
image
image

4、可以使用瀏覽器的web-vitals 外掛
image
image

相關文章