目录总结区分Web VitalsLighthouse实际开发时三个东西如何配合使用总结Performance分析工具Chrome DevTools 的性能分析面板通过 Timeline、火焰图和调用栈分析 JS 执行、网络请求、布局及绘制过程定位具体性能瓶颈。Web Vitals指标体系衡量网页用户体验。Core Web Vitals 包含 LCP加载速度 ≤2.5s、INP交互响应 ≤200ms、CLS视觉稳定性 ≤0.1真实用户体验通常依据 P75 进行评价。Lighthouse审计工具自动执行网站审计并生成性能、可访问性、SEO 等报告提供分数及优化建议。其性能审计包含部分 Web Vitals 指标但不能直接测量真实用户的 INP。应用关系Web Vitals 定义衡量标准Lighthouse 自动发现问题Performance 深入定位问题。实战流程测量指标 → 自动审计 → 性能录制与定位 → 代码优化 → 重新测量 → 上线后验证真实用户数据。区分确实都和网页性能有关也都能在 Chrome DevTools 中接触到但三者不是同一层面的东西Performance 是性能分析工具Web Vitals 是性能指标体系Lighthouse 是自动化审计工具。Performance为什么慢 分析浏览器运行过程定位具体的性能瓶颈。Web Vitals到底慢不慢 使用标准化指标衡量真实用户体验。Lighthouse网站有哪些问题 自动运行一系列测试生成性能、可访问性、SEO 等审计报告。对比PerformanceWeb VitalsLighthouse本质浏览器性能分析器用户体验衡量标准自动化网页审计工具是否是 DevTools 面板是不是独立的指标分析面板概念是主要输出Timeline、火焰图、调用栈LCP、INP、CLS 等数值分数、指标、问题及建议主要用途定位性能瓶颈量化用户体验综合检查和优化指导真实用户数据可结合现场数据可以通过 RUM/CrUX 收集单次本地审计主要是实验室数据Web Vitals区分 Web Vitals 和 Core Web Vitals。Web Vitals 是更广泛的性能指标集合Core Web Vitals核心网页指标是其中最重要的三个指标。需要重点记住LCPLargest Contentful Paint最大内容绘制时间——衡量主要内容加载速度≤ 2.5s良好阈值例如主要图片、标题区域何时完成渲染。INPInteraction to Next Paint交互到下一次绘制的延迟——衡量交互响应性。≤ 200ms良好阈值例如点击按钮后页面多久出现视觉反馈。CLSCumulative Layout Shift累积布局偏移——衡量页面视觉稳定性。≤ 0.1良好阈值例如图片加载后是否把正文和按钮突然向下挤。官方标准通常使用真实用户访问数据的第 75 百分位P75评价并区分移动端与桌面端。旧教程中的 FID 已被 INP 替代2024 年 3 月。不用再把 FID 当作当前的核心指标重点学习。LighthouseLighthouse 的 Performance 报告包含指标含义FCP首次内容绘制LCP最大内容绘制TBT总阻塞时间CLS累积布局偏移Speed Index页面内容呈现速度指标为什么没有 INP因为 Lighthouse 的常规导航审计属于实验室测试没有真实的连续用户交互无法直接测量整个页面生命周期内的 INP因此使用 TBT 作为交互响应能力的辅助诊断指标。两者不能直接等同。Lighthouse 可以测量部分 Web Vitals 指标。Performance 也可以测量和分析这些指标。Web Vitals 则定义这些指标到底是什么以及怎样判断体验好坏。它们有交集但并不重复。实际开发时三个东西如何配合使用假设你的 React 项目首屏加载很慢而且点击按钮时偶尔卡顿。推荐按照以下顺序排查确定性能问题Web Vitals先检查 LCP、INP、CLS确认具体是哪方面体验不达标。例如发现 LCP 为 4.2s说明主要内容加载偏慢。自动审计Lighthouse运行报告寻找可疑的优化项图片体积过大存在阻塞渲染的资源JavaScript 执行时间较长资源加载优先级不合理深入定位Performance录制页面加载或卡顿过程查看Main Thread 中是否存在 Long TaskJS 函数执行是否耗时过长是否频繁触发 Layout / Recalculate StyleLCP 资源请求、渲染分别耗费多少时间优化并重新验证根据具体原因优化代码重新录制 Performance Trace并运行 Lighthouse。上线后持续观察真实用户的 Core Web Vitals 数据验证优化是否确实改善用户体验。补充一个当前版本的变化Chrome 的 Performance 面板已经集成 Live Metrics 和部分与 Lighthouse 共用的 Performance Insights。官方目前也更推荐用 Performance 面板进行深入性能调试而 Lighthouse 仍适合生成综合审计报告。