Lighthouse（灯塔）—— Chrome 浏览器性能测试工具

1.认识 Lighthouse

  Lighthouse 是 Google 开发的一款开源性能测试工具，用于分析网页或 Web 应用的性能、可访问性、最佳实践、安全性以及 SEO 等关键指标。开发人员可以通过 Lighthouse 快速了解网页的性能瓶颈，并基于优化建议进行改进。

核心功能：

• 对页面性能进行全面分析
• 提供优化建议和评分
• 支持多种测试维度，如性能、可访问性、SEO、PWA 等
• 自动化生成测试报告

---

使用的谷歌浏览器版本：

2.Lighthouse 的三种模式

  Lighthouse 提供三种测试模式，每个模式适用于不同场景。以下是每种模式的说明：

模式名称	说明	局限性
导航模式（默认）	获取页面性能分数与指标。 评估渐进式 Web 应用功能。 分析页面加载后的可访问性。	无法分析表单提交或单页应用的转换。
时间跨度模式	测量特定时间范围内的性能（如布局偏移、JS 执行时间）。 适合评估长时间使用的页面或 SPA。	不提供总分。 无法分析瞬时性能指标，如最大内容绘制 (LCP)。
快照模式	分析页面当前状态，适用于查找深层次表单或隐藏菜单的可访问性问题。	不提供总分。 无法分析 DOM 之外的问题。

测试设备选择

  Lighthouse 支持两种设备类型：

1. 移动设备模拟（默认）
2. 桌面设备模拟

---

3.主要监测指标

  Lighthouse 监测多个维度的性能指标，以下是最重要的性能指标说明：

性能（Performance）

指标名称	说明
首次内容绘制 (FCP)	页面首次绘制 DOM 内容的时间，表示用户第一次看到页面内容的时间点。
最大内容绘制 (LCP)	可视区域中最大内容元素呈现的时间，用于衡量主要内容的加载速度。
可交互时间 (TTI)	页面完全可交互的时间点，表示浏览器可以快速响应用户操作的时刻。
总阻塞时间 (TBT)	页面从首次内容绘制到完全可交互期间的总阻塞时间。
累积布局偏移 (CLS)	页面布局的稳定性指标，衡量意外布局偏移对用户体验的影响。
速度指标 (SI)	衡量页面内容在首屏可见的速度，值越小越佳。

可访问性（Accessibility）

检测网页的无障碍设计，包括对屏幕阅读器支持、颜色对比度、表单标签等。

最佳实践（Best Practices）

检测网页安全性和开发实践，例如是否启用 HTTPS，是否存在安全漏洞等。

SEO（Search Engine Optimisation）

评估网页的搜索引擎友好性，比如标题、元描述是否优化，页面是否允许爬取等。

渐进式 Web 应用（PWA）

验证网页是否符合 PWA 标准，如离线支持、安装性等。

---

4.如何使用 Lighthouse

  Lighthouse 可以通过多种方式运行：

1. Chrome DevTools
   打开 Chrome 浏览器，右键点击页面 -> 检查 -> 切换到 Lighthouse 面板，选择测试选项，点击 分析页面加载。

2. CLI 命令行工具
3. Chrome 插件
   在 Chrome 网上应用商店搜索 Lighthouse 插件，安装后直接在浏览器中生成报告。

4. 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.性能优化建议

根据报告中提供的优化建议，可以从以下几个方面提升性能：

1. 减少未使用的 JS 和 CSS
   • 使用代码分割和按需加载技术。
   • 删除无用的 CSS 和 JS 文件。
2. 启用文本压缩
   • 配置服务器支持 gzip 或 Brotli 压缩。
3. 优化图片加载
   • 使用下一代图片格式（如 WebP）。
   • 启用懒加载（Lazy Loading）。
4. 消除渲染阻塞资源
   • 将关键 CSS 内联到 HTML 中。
   • 为非关键资源添加 async 或 defer 属性。
5. 开启 HTTP/2
   • 改用 HTTP/2 协议，提高请求效率。
6. 优化服务器响应时间
   • 使用 CDN 缓存静态资源。
   • 减少重定向请求。

……

---

总结

  Lighthouse 是前端性能优化的强大工具，通过全面的分析和详细的优化建议，开发者可以发现网页性能问题并进行改进。

参考资料：

• Google Developers 文档
• CSDN 博客