常用Web性能指标

1、FCP（First Contental Paint，首次绘制时间）

定义：浏览器从加载开始到首次渲染DOM元素的时间。

优化：

• 预加载，`<link rel="preload" href=" " >`
• 内联css，`<style></style>`
• 减少css和js文件体积，js异步加载`<script async>``<script defer>`
• 代码拆分，按需加载js模块
• 使用HTTP2/3，CDN加快静态资源分发

2、LCP（Largest Contental Paint，最大内容绘制时间）

定义：浏览器从加载开始到渲染最大DOM元素的时间。

优化：

• 优化图片、视频的大小，压缩、webp格式
• 缓存
• 服务端渲染SSR
• 懒加载

3、INP（交互到下次绘制的时间）

定义：用户交互后到页面响应更新的时间。

优化：

• 减少主线程阻塞，用web worker子线程处理大量计算
• 优化事件处理，使用 requestAnimationFrame （能够保证回调函数在屏幕刷新之前执行）或 requestIdleCallback 调度任务
• 避免频繁触发重排（Reflow）和重绘（Repaint）
• 使用代码分割和Tree Shaking减少js代码体积

4、FID（首次交互的延迟）

用户首次交互到浏览器响应的延迟。

5、DLS（累计布局偏移）

定义：出现的所有意外布局的偏移的和。

优化：

• 设置宽高
• 避免动态加入内容

6、TTI（可交互时间）

定义：页面加载开始到完全可交互的时间。（主线程空闲且事件可响应）

优化：

7、DCL（DOM内容加载完成时间）

表示 HTML 文档完全加载和解析完成的时间。

• HTML文件大小
• 优化JS加载，如异步加载JS和内联JS，减少HTTP请求
• 优化CSS、网络

常用工具：

chrome浏览器的lighthouse、performance