1.认识 Lighthouse
Lighthouse 是 Google 开发的一款开源性能测试工具，用于分析网页或 Web 应用的性能、可访问性、最佳实践、安全性以及 SEO 等关键指标。开发人员可以通过 Lighthouse 快速了解网页的性能瓶颈，并基于优化建议进行改进。
核心功能：
- 对页面性能进行全面分析
- 提供优化建议和评分
- 支持多种测试维度，如性能、可访问性、SEO、PWA 等
- 自动化生成测试报告
使用的谷歌浏览器版本：
2.Lighthouse 的三种模式
Lighthouse 提供三种测试模式，每个模式适用于不同场景。以下是每种模式的说明：
| 模式名称 | 说明 | 局限性 |
|---|---|---|
| 导航模式（默认） | 获取页面性能分数与指标。 评估渐进式 Web 应用功能。 分析页面加载后的可访问性。 | 无法分析表单提交或单页应用的转换。 |
| 时间跨度模式 | 测量特定时间范围内的性能（如布局偏移、JS 执行时间）。 适合评估长时间使用的页面或 SPA。 | 不提供总分。 无法分析瞬时性能指标，如最大内容绘制 (LCP)。 |
| 快照模式 | 分析页面当前状态，适用于查找深层次表单或隐藏菜单的可访问性问题。 | 不提供总分。 无法分析 DOM 之外的问题。 |
测试设备选择
Lighthouse 支持两种设备类型：
- 移动设备模拟（默认）
- 桌面设备模拟
3.主要监测指标
Lighthouse 监测多个维度的性能指标，以下是最重要的性能指标说明：
性能（Performance）
| 指标名称 | 说明 |
|---|---|
| 首次内容绘制 (FCP) | 页面首次绘制 DOM 内容的时间，表示用户第一次看到页面内容的时间点。 |
| 最大内容绘制 (LCP) | 可视区域中最大内容元素呈现的时间，用于衡量主要内容的加载速度。 |
| 可交互时间 (TTI) | 页面完全可交互的时间点，表示浏览器可以快速响应用户操作的时刻。 |
| 总阻塞时间 (TBT) | 页面从首次内容绘制到完全可交互期间的总阻塞时间。 |
| 累积布局偏移 (CLS) | 页面布局的稳定性指标，衡量意外布局偏移对用户体验的影响。 |
| 速度指标 (SI) | 衡量页面内容在首屏可见的速度，值越小越佳。 |
可访问性（Accessibility）
检测网页的无障碍设计，包括对屏幕阅读器支持、颜色对比度、表单标签等。
最佳实践（Best Practices）
检测网页安全性和开发实践，例如是否启用 HTTPS，是否存在安全漏洞等。
SEO（Search Engine Optimisation）
评估网页的搜索引擎友好性，比如标题、元描述是否优化，页面是否允许爬取等。
渐进式 Web 应用（PWA）
验证网页是否符合 PWA 标准，如离线支持、安装性等。
4.如何使用 Lighthouse
Lighthouse 可以通过多种方式运行：
- Chrome DevTools
打开 Chrome 浏览器，右键点击页面 -> 检查 -> 切换到 Lighthouse 面板，选择测试选项，点击 分析页面加载。
- CLI 命令行工具
- Chrome 插件
在 Chrome 网上应用商店搜索 Lighthouse 插件，安装后直接在浏览器中生成报告。
- Node.js API
使用 Node.js 脚本运行 Lighthouse 测试，适合高级开发者(官方介绍的，没用过)。
5.Lighthouse 报告解读
Lighthouse 报告为每个维度生成 0--100 的评分，并用颜色标识：
- 绿色（90--100）：表现优秀
- 橙色（50--89）：表现中等
- 红色（0--49）：表现较差
下面是关键性能指标的理想范围：
| 指标名称 | 绿色（优秀） | 橙色（中等） | 红色（较差） |
|---|---|---|---|
| 首次内容绘制 (FCP) | 0--1.8 秒 | 1.8--3 秒 | >3 秒 |
| 最大内容绘制 (LCP) | 0--2.5 秒 | 2.5--4 秒 | >4 秒 |
| 可交互时间 (TTI) | 0--3.8 秒 | 3.9--7.3 秒 | >7.3 秒 |
| 总阻塞时间 (TBT) | 0--200 毫秒 | 200--600 毫秒 | >600 毫秒 |
| 累积布局偏移 (CLS) | 0--0.1 | 0.1--0.25 | >0.25 |
6.性能优化建议
根据报告中提供的优化建议，可以从以下几个方面提升性能：
- 减少未使用的 JS 和 CSS
- 使用代码分割和按需加载技术。
- 删除无用的 CSS 和 JS 文件。
- 启用文本压缩
- 配置服务器支持 gzip 或 Brotli 压缩。
- 优化图片加载
- 使用下一代图片格式（如 WebP）。
- 启用懒加载（Lazy Loading）。
- 消除渲染阻塞资源
- 将关键 CSS 内联到 HTML 中。
- 为非关键资源添加
async或defer属性。
- 开启 HTTP/2
- 改用 HTTP/2 协议，提高请求效率。
- 优化服务器响应时间
- 使用 CDN 缓存静态资源。
- 减少重定向请求。
......
总结
Lighthouse 是前端性能优化的强大工具，通过全面的分析和详细的优化建议，开发者可以发现网页性能问题并进行改进。
参考资料：