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

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

核心功能：

使用的谷歌浏览器版本：

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

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

Lighthouse 支持两种设备类型：

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

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

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

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

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

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

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

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

Lighthouse 报告为每个维度生成 0--100 的评分，并用颜色标识：

下面是关键性能指标的理想范围：

指标名称	绿色（优秀）	橙色（中等）	红色（较差）
首次内容绘制 (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

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

......

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

参考资料：

Google Developers 文档

CSDN 博客