利用 Lighthouse 发现效果提升机会

Lighthouse 是一款工具,可以帮助您衡量和寻找提高网页性能的方法。以下是有关如何使用 Lighthouse 的一般工作流:

  1. 您需要告诉 Lighthouse 要审核哪个页面。
  2. Lighthouse 会加载该网页,并记录该网页达到各种性能里程碑所需的时间。这些重大事件称为“指标”。metrics
  3. Lighthouse 会为您提供有关页面运行情况的报告。该报告会提供每项指标的得分以及一系列优化建议,如果您实施这些优化建议,应该会加快网页加载速度。

您的任务是随着时间的推移提高指标得分,或者至少确保指标分数不会变差。不过,您无法直接处理指标。而是会遵循 Lighthouse 提供的优化建议。抓住这些机会往往可以提高您的指标得分。

从您的 web.dev 配置文件页面运行 Lighthouse:

  1. 您只需提供任意网址,Lighthouse 就会运行一系列审核,以生成有关页面性能的报告。

  2. 查看审核报告,找出您的网页有待改进的方面。

  3. 对于每项评估,您都能找到提高分数的相应指导和立即采取的措施。

从 Chrome 开发者工具运行 Lighthouse

Chrome 开发者工具是一套直接内置于 Google Chrome 浏览器的 Web 开发者工具。您无需下载任何内容即可获取开发者工具。 如果您有 Chrome,则可以使用开发者工具。

  1. 在 Chrome 中,前往您要审核的网页。
  2. 按 `Control+Shift+J`(在 Mac 上,则按 `Command+Option+J`)打开开发者工具。

开发者工具已打开并停靠在屏幕右侧。

点击审核标签页。如果您没有看到此标签页,请点击 » 符号,然后从列表中选择审核。Lighthouse 是为 Audits 面板提供支持的引擎。这就是您能看到灯塔的图片的原因。

开发者工具已打开,并进入了 Lighthouse 审核面板。

  1. 确保选中移动设备单选按钮。Lighthouse 在审核您的页面时,会模拟移动设备的视口和用户代理字符串。
  2. 确保已选中性能复选框。您可以在审核部分中启用或停用其余复选框。如果您启用这些链接,则系统将为您提供大量改进网页其他方面的优化建议。
  3. 确保选中 Simulated Fast 3G, 4x CPU Slowdown 单选按钮。Lighthouse 在加载页面时实际上不会限制您的网络或 CPU。而是会关注网页在正常情况下的加载时间,然后估算在 CPU 功能仅是机器性能的 4 倍的情况下,快速 3G 网络需要多长时间。
  4. 确保已启用清除存储空间复选框。此选项会强制 Lighthouse 针对每个页面资源转到网络,这正是初访者体验该页面的方式。
  5. 点击运行审核。5 到 10 秒后,Lighthouse 会显示一份报告。

显示 Lighthouse 审核结果报告的开发者工具。

例如,如果您在模拟快速 3G启用 4 倍 CPU 慢速节流的情况下运行某些审核,然后在其他时间在停用节流功能的情况下运行审核,则在启用节流功能后,您的指标得分会显著降低。您可能需要花费大量时间来试图找出网页速度这么慢的原因,但实际上,唯一发生变化的就是您的配置。

解读报告

报告的右上角列出了您的总体效果得分。满分为 100 分。总分下方是指标得分。 Lighthouse v3 评分指南介绍了每个指标得分对总体得分的影响。

Lighthouse 指标分数显示绿色、及格分数以及黄色警告分数。

将鼠标悬停在指标上可详细了解该指标。点击了解详情以阅读相关文档。

在您的指标得分下方,您会看到网页在加载时的外观的屏幕截图。

开发者工具的幻灯影片视图,显示网页加载情况。

在屏幕截图下方,您会看到改进网页性能的优化建议。

点击优化建议可详细了解。

标题为“推迟屏幕外图片”的展开审核会显示许多可优化的图片路径。

后续步骤

请尝试使用 Lighthouse 从您的个人资料页面或 Chrome 开发者工具中审核您的页面。实施其中某个优化建议,然后再次审核您的网页,以了解相应更改对您的报告有何影响。理想情况下,您的指标得分应该稍微好一点,而 Lighthouse 不应再将这个机会标记为需要处理。

自行运行 Lighthouse 非常适合抽查问题,但最终您需要设置持续监控以确保您的网站保持正常运行。如需跟踪 Lighthouse 一段时间内的进度,请将您的网站添加到您的配置文件中。