主题
Chrome Lighthouse
Lighthouse 是 Chrome 提供的自动化网页质量审计工具。它会在受控环境中加载页面，输出性能、无障碍、最佳实践和 SEO 等分类的报告。
报告反映的是一次实验室测试结果，适合定位问题和防止回归；真实用户体验还会受设备、网络、缓存、第三方脚本和页面内容变化影响。
使用方式
最常用的方式是在 Chrome DevTools 的 Lighthouse 面板中运行：选择设备、模式和审计分类后，执行 Analyze page load。
- 移动端模式使用移动设备模拟条件，适合发现弱网和低性能设备上的问题。
- 桌面端模式适合排查桌面场景，但不能代表移动端体验。
- 本地页面或需要登录的页面优先在 DevTools 中审计。
- 命令行和 Node API 适合自动化；Lighthouse CI 可将预算或阈值接入持续集成，防止性能回退。
报告分类
- Performance：页面加载和交互期间的实验室性能指标、优化建议与诊断。
- Accessibility：常见无障碍问题，例如可访问名称、对比度和表单标签；通过不等于已完成完整人工无障碍测试。
- Best Practices：代码健康与安全相关检查。
- SEO：基础的可抓取性与搜索优化检查，不等同于搜索排名评估。
Performance 指标
FCP：首次内容绘制
First Contentful Paint 表示浏览器首次绘制文本、图片、SVG 或非白色 Canvas 内容的时间。它反映用户何时看到第一个页面内容。
FCP 偏慢时，优先检查关键 CSS、阻塞渲染的脚本、服务器响应和首屏资源加载。
LCP：最大内容绘制
Largest Contentful Paint 表示视口内最大内容元素完成绘制的时间，通常更接近用户感知到主要内容出现的时刻。
常见影响因素：
- 文档请求或服务器响应慢。
- 首屏图片、字体或关键资源下载慢。
- 大量 CSS、JavaScript 执行延迟了元素渲染。
- LCP 图片未正确设置尺寸、优先级或预加载策略。
CLS：累计布局偏移
Cumulative Layout Shift 衡量页面可见内容发生意外位移的程度。用户主动触发的动画和交互引起的合理位移不应被视为同类问题。
常见原因：
- 图片、广告、iframe 未预留尺寸。
- Web 字体加载后替换回退字体。
- 异步插入横幅、提示或动态内容。
优先为媒体和嵌入内容声明尺寸或宽高比，并为动态区域预留空间。
TBT：总阻塞时间
Total Blocking Time 统计 FCP 到可交互阶段之间，主线程被长任务阻塞超过 50ms 的累计时长。它是实验室指标，用于反映加载期间 JavaScript 造成的交互延迟风险。
常见优化方向：拆分长任务、减少未使用的 JavaScript、延后非关键第三方脚本，并将重计算移出主线程。
Speed Index：速度指数
Speed Index 估算页面可见部分填充完成的速度。数值越小，表示页面在加载过程中的视觉完成度提升越快。
它适合辅助观察首屏呈现过程；定位具体问题时应结合 FCP、LCP、网络瀑布图与 Performance trace。
分数与诊断的关系
Performance 总分是多个实验室指标的加权结果，而不是“优化建议”或“诊断”条目的简单汇总。Lighthouse 10 的权重为：
| 指标 | 权重 |
|---|---|
| FCP | 10% |
| Speed Index | 10% |
| LCP | 25% |
| TBT | 30% |
| CLS | 25% |
分数会受测试条件影响而波动，不应以单次结果或追求 100 分作为唯一目标。报告中的 Opportunities 和 Diagnostics 不直接计入总分，但修复其中的问题通常能改善指标。
解读与排查顺序
- 固定设备、网络、登录状态和测试页面，重复运行几次，观察趋势而不是单次分数。
- 先看 LCP、CLS、TBT，确定主要体验瓶颈属于加载、视觉稳定性还是主线程阻塞。
- 在 Lighthouse 中找到关联的 Opportunities 与 Diagnostics；需要深入分析时转到 Performance 面板查看 trace、长任务和网络请求。
- 每次只验证一类改动，并同时关注真实用户数据，避免为了实验室分数牺牲实际体验。