Chrome DevTools 内置 Lighthouse 可一键测性能，支持 FCP、LCP、CLS、TBT 等指标分析；需仅选 Performance、设对设备与网络节流，点击 Analyze page load 获取报告，并依 Opportunities 优化图片、脚本、CSS 及服务端配置。
直接在 Chrome DevTools 里点一下就能跑出性能评分，不需要改代码也能立即看到关键指标——FCP、LCP、CLS、TBT 等都包含在内，报告还会明确指出哪类资源拖慢了加载。
打开 Lighthouse 面板的正确路径
新版 Chrome（≥ v110）已原生集成，无需插件：
- 打开目标网页，等地址栏旋转图标消失、Network 面板无 pending 请求，确认页面完全加载完成
- 按 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（macOS）唤出 DevTools
- 顶部标签栏找 Lighthouse；若没看到，点右上角 ⋯ → More tools → Lighthouse
性能审计的关键配置项
只关注性能时，要避免干扰项影响结果准确性：
- 左侧面板中，仅勾选 Performance，其他类别（如 Accessibility、SEO）全取消
- 设备选 Mobile 或 Desktop，取决于你最想优化的真实使用场景
- 网络节流可选 Slow 4G（模拟弱网）或 No throttling（测最优环境）
- 模式保持默认 Navigation，别选 Timespan 或 Snapshot
- 点击按钮必须是 Analyze page load（不是旧版“Generate report”）
看懂性能报告里的核心指标
报告顶部显示 0–100 分总分，往下滚动能看到具体瓶颈：
- FCP（首次内容绘制）：页面开始渲染文本、图片等可见内容的时间，理想值 ≤1.8s
- LCP（最大内容绘制）：视口内最大元素（如大图、标题）渲染完成时间，应 ≤2.5s
- CLS（累积布局偏移）：页面加载过程中元素意外位移的程度，得分高意味着布局稳定
- TBT（总阻塞时间）：主线程被长任务阻塞的总时长，反映交互响应能力
- 每项下方都有“Opportunities”和“Diagnostics”，点开能看到具体哪张图没压缩、哪个脚本没延迟加载
提升性能得分的常见修复方向
报告给出的建议大多对应可操作的 HTML/CSS/JS 调整：
- 压缩并转为现代格式（WebP/AVIF）图片，添加
width和height属性防重排 - 把非首屏 JS 加
defer或async，第三方脚本考虑用loading="lazy" - CSS 提取关键部分内联，其余异步加载；避免 @import，减少渲染阻塞
- 启用浏览器缓存（Cache-Control）、预连接（
<link rel="preconnect">） - 服务端开启 Gzip/Brotli 压缩，检查 TTFB 是否超过 200ms
