Skip to main content

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
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]);
}