Web前端性能指标

一、前端常用 8 大性能指标FPFirst Paint首次绘制是什么浏览器第一次在屏幕上画出像素哪怕是背景色。衡量页面从白屏 → 不再白屏的时间。优化目标越快越好。影响因素HTML 加载速度、TTFB、关键 CSS。FCPFirst Contentful Paint首次内容绘制是什么第一次渲染有内容文本、图片、svg 等。比 FP 更有意义因为 FP 可能只是个背景。优化目标1.8s 优秀3s 可接受。优化方向缩短 TTFB内联关键 CSS不阻塞渲染LCPLargest Contentful Paint最大内容绘制WebVitals 核心是什么视口中最大的那块内容渲染完成时间。通常是首屏大图、大标题、封面图。最重要的加载体验指标。目标≤2.5s 优秀2.5~4s 需优化4s 差。优化图片优化WebP、压缩、宽高比预加载 LCP 图片减少首屏 JS 阻塞TTFBTime To First Byte首字节时间是什么请求发出去 → 收到第一个字节的时间。代表服务端响应速度 网络速度。目标600ms 优秀。优化CDN服务端缓存接口优化TBTTotal Blocking Time总阻塞时间是什么主线程任务 50ms 的阻塞时间总和。例一个 210ms 长任务 → 阻塞 160ms。目标200ms 优秀。优化拆长任务懒执行非关键 JSWeb WorkerFIDFirst Input Delay首次输入延迟老核心是什么用户第一次点击 / 输入 → 浏览器开始处理事件的延迟。衡量交互是否卡。目标≤100ms。INPInteraction to Next Paint新核心交互指标必学是什么全程所有交互的响应速度取最差的那个。点击 → 页面更新 的耗时。Google 2024 新核心 Web 指标完全替代 FID。目标≤200ms 优秀。影响长任务、回流重绘、JS 执行太久。优化拆长任务防抖节流减少同步布局CLSCumulative Layout Shift累积布局偏移核心是什么页面加载过程中元素突然乱跳的总和。最影响用户体验的指标之一。目标≤0.1 优秀。罪魁祸首图片没设宽高字体闪烁动态插入广告、弹窗没给占位容器二、八大指标指标全称含义优化目标FPFirst Paint第一次像素越快越好FCPFirst Contentful Paint第一次内容 1.8sLCPLargest Contentful Paint最大内容渲染≤ 2.5sTTFBTime To First Byte服务端首字节 600msTBTTotal Blocking Time主线程阻塞总时间 200msFIDFirst Input Delay首次交互延迟≤ 100msINPInteraction to Next Paint全程交互体验≤ 200msCLSCumulative Layout Shift布局偏移≤ 0.1三、关键它们之间的顺序关系加载顺序永远是TTFB服务器响应FP第一次画FCP第一次内容LCP最大内容出来然后用户交互FID / INP全程伴随CLS布局稳不稳定主线程TBT卡不卡分类一、加载类指标FPFirst Paint首次绘制浏览器第一次在屏幕绘制像素标志页面不再白屏。FCPFirst Contentful Paint首次内容绘制第一次渲染实际内容文本、图片、SVG 等。目标1.8s 优秀。LCPLargest Contentful Paint最大内容绘制视口中最大内容渲染时间最重要加载指标。目标≤2.5s。优化图片优化、预加载、减少阻塞。TTFBTime To First Byte首字节时间请求发起到收到第一个字节代表服务端 网络速度。目标600ms。二、主线程 交互类指标TBTTotal Blocking Time总阻塞时间所有长任务50ms的阻塞时间总和。目标200ms。FIDFirst Input Delay首次输入延迟用户第一次交互到浏览器响应的时间。目标≤100ms。INPInteraction to Next Paint全程交互体验2024 新核心指标替代 FID。统计所有交互取最慢值。目标≤200ms。三、视觉稳定性指标CLSCumulative Layout Shift累积布局偏移页面元素意外跳动的总分值。目标≤0.1。常见原因图片无宽高、动态插入内容、字体闪烁、无占位。四、指标出现顺序TTFB → FP → FCP → LCP → 交互FID/INP全程CLS、TBT