跳至正文
Wener Notes

vitals

约 1 分钟阅读

Core Web Vitals

abbr.stand formeantest for
LCPLargest Contentful Paint最大内容绘制加载性能
FIDFirst Input Delay首次输入延迟交互性
CLSCumulative Layout Shift累积布局偏移视觉稳定性
TTFBTime to First Byte首字节时间LCP
FCPFirst Contentful Paint首次内容绘制LCP
TBTTotal Blocking Time总阻塞时间FID
TTITime to Interactive可交互时间FID
metricfromto
LCP2.5s4.0s
FID100m300m
CLS0.10.25
TypeScript
import { useEffect } from 'react';
import { type Metric, onCLS, onFCP, onFID, onINP, onLCP, onTTFB } from 'web-vitals';

export function useReportWebVitals(reportWebVitalsFn: (metric: Metric) => void) {
  useEffect(() => {
    onCLS(reportWebVitalsFn);
    onFID(reportWebVitalsFn);
    onLCP(reportWebVitalsFn);
    onINP(reportWebVitalsFn);
    onFCP(reportWebVitalsFn);
    onTTFB(reportWebVitalsFn);
  }, [reportWebVitalsFn]);
}

关联信息

反向链接、本文链接的其他页面和外部资料。

参考资料

GitHub2 条
依赖包1 条
其他外链7 条
最近更新commit e99f734编辑