Lighthouse 是一款工具,可以帮助您衡量和寻找提高网页性能的方法。以下是有关如何使用 Lighthouse 的一般工作流:
- 您需要告诉 Lighthouse 要审核哪个页面。
- Lighthouse 会加载该网页,并记录该网页达到各种性能里程碑所需的时间。这些重大事件称为“指标”。metrics
- Lighthouse 会为您提供有关页面运行情况的报告。该报告会提供每项指标的得分以及一系列优化建议,如果您实施这些优化建议,应该会加快网页加载速度。
您的任务是随着时间的推移提高指标得分,或者至少确保指标分数不会变差。不过,您无法直接处理指标。而是会遵循 Lighthouse 提供的优化建议。抓住这些机会往往可以提高您的指标得分。
从个人资料页面运行 Lighthouse
从您的 web.dev 配置文件页面运行 Lighthouse:
您只需提供任意网址,Lighthouse 就会运行一系列审核,以生成有关页面性能的报告。
查看审核报告,找出您的网页有待改进的方面。
对于每项评估,您都能找到提高分数的相应指导和立即采取的措施。
从 Chrome 开发者工具运行 Lighthouse
Chrome 开发者工具是一套直接内置于 Google Chrome 浏览器的 Web 开发者工具。您无需下载任何内容即可获取开发者工具。 如果您有 Chrome,则可以使用开发者工具。
- 在 Chrome 中,前往您要审核的网页。
- 按 `Control+Shift+J`(在 Mac 上,则按 `Command+Option+J`)打开开发者工具。
点击审核标签页。如果您没有看到此标签页,请点击 » 符号,然后从列表中选择审核。Lighthouse 是为 Audits 面板提供支持的引擎。这就是您能看到灯塔的图片的原因。
- 确保选中移动设备单选按钮。Lighthouse 在审核您的页面时,会模拟移动设备的视口和用户代理字符串。
- 确保已选中性能复选框。您可以在审核部分中启用或停用其余复选框。如果您启用这些链接,则系统将为您提供大量改进网页其他方面的优化建议。
- 确保选中 Simulated Fast 3G, 4x CPU Slowdown 单选按钮。Lighthouse 在加载页面时实际上不会限制您的网络或 CPU。而是会关注网页在正常情况下的加载时间,然后估算在 CPU 功能仅是机器性能的 4 倍的情况下,快速 3G 网络需要多长时间。
- 确保已启用清除存储空间复选框。此选项会强制 Lighthouse 针对每个页面资源转到网络,这正是初访者体验该页面的方式。
- 点击运行审核。5 到 10 秒后,Lighthouse 会显示一份报告。
例如,如果您在模拟快速 3G、启用 4 倍 CPU 慢速节流的情况下运行某些审核,然后在其他时间在停用节流功能的情况下运行审核,则在启用节流功能后,您的指标得分会显著降低。您可能需要花费大量时间来试图找出网页速度这么慢的原因,但实际上,唯一发生变化的就是您的配置。
解读报告
报告的右上角列出了您的总体效果得分。满分为 100 分。总分下方是指标得分。 Lighthouse v3 评分指南介绍了每个指标得分对总体得分的影响。
将鼠标悬停在指标上可详细了解该指标。点击了解详情以阅读相关文档。
在您的指标得分下方,您会看到网页在加载时的外观的屏幕截图。
在屏幕截图下方,您会看到改进网页性能的优化建议。
点击优化建议可详细了解。
后续步骤
请尝试使用 Lighthouse 从您的个人资料页面或 Chrome 开发者工具中审核您的页面。实施其中某个优化建议,然后再次审核您的网页,以了解相应更改对您的报告有何影响。理想情况下,您的指标得分应该稍微好一点,而 Lighthouse 不应再将这个机会标记为需要处理。
自行运行 Lighthouse 非常适合抽查问题,但最终您需要设置持续监控以确保您的网站保持正常运行。如需跟踪 Lighthouse 一段时间内的进度,请将您的网站添加到您的配置文件中。