Lighthouse：测量网站速度并查找改进方向
Lighthouse 是一个自动审计工具，可识别网页在性能、可访问性、最佳实践和搜索引擎优化（SEO）方面的问题和可能的改进。使用 Chrome 开发者工具分析页面加载情况，追踪慢速指标对应的请求、文件或执行任务，修改一个内容，然后在相同条件下再次测量。单一分数不能代表每位访客的体验，也不能决定页面的搜索排名。
Lighthouse 与 PageSpeed Insights：有什么区别？
官方 Lighthouse 概述 描述了通过 Chrome DevTools、命令行或 Node 模块运行审计。初学者可以从桌面版 Chrome 中包含的面板开始，无需安装扩展。这种方式对于已登录的页面或本地开发页面也很有用。
PageSpeed Insights 文档 区分实验室数据和现场数据。实验室数据是在特定条件下由 Lighthouse 生成的诊断数据。真实用户体验数据来自 Chrome 用户体验报告（CrUX），涵盖前 28 天的收集周期。如果页面样本过少，服务可能会显示该源（Origin，相同的 URL 协议、主机和端口）的数据，或者不显示真实用户数据。拥有实验室结果并不意味着该页面有真实访问者的统计数据。
要快速检查公共 URL，请在 PageSpeed Insights 中输入 URL，进行分析，并分别选择移动端和桌面端结果。对于只能在登录后可见的页面，或无法从外部访问的本地 URL，请使用本地开发者工具而不是外部服务。不要向外部分析服务提交私人 URL 或访问令牌。
报告的测量描述了其目标 URL 和运行条件。使用公共示例 URL 进行演示并不会测量发布指南的网站或您自己的网站。在阅读报告时，将真实用户体验部分与 Lighthouse 诊断部分分开。
首先选择页面和测量条件
- 目标：指定要测试的 URL，包括具有代表性的文章、列表或产品页面，而不仅仅是主页。不要将不同的模板组合在一起，好像它们是同一页面的前后结果。
- 状态：记录这是第一次访问还是重复访问，登录状态以及如何处理同意横幅。对于不需要登录的公共页面，使用单独的配置文件或隐身窗口可以帮助减少扩展的影响。
- 环境：记录 Chrome 和 Lighthouse 版本、移动或桌面选择、网络和 CPU 节流方法以及测量时间。避免同时运行大文件下载或其他繁重任务。
- 存储：清除存储会移除站点存储，以模拟首次访问。这可能会影响登录和同意状态，因此在包含重要工作内容的会话中不要随意启用。在审核已登录页面时，选择能够保留所需状态的设置，并在后续比较中一致使用这些设置。
以管理员身份登录时进行审核可能会加载与匿名访问者不同的脚本、工具栏和缓存策略。当问题涉及普通读者时，请单独测量公共页面。如果目标是针对已登录用户的功能，请明确记录该状态。
在 Chrome 开发者工具中分析页面加载
- 在桌面版 Chrome 中打开页面。验证公共地址是否正确，例如，并确保页面没有重定向到错误屏幕。
- 打开开发者工具，例如在 Windows 上使用 F12 或 Ctrl+Shift+I。如果 Lighthouse 标签隐藏，请通过标签溢出菜单或开发者工具菜单中的“更多工具”找到它。菜单名称可能随浏览器语言和版本不同而有所差异。
- 对于初始页面加载审核，在“模式”下选择“导航”。在“设备”下选择“移动”或“桌面”。移动模式是带有特定约束的实验室测试，而不是重新呈现每部真实手机的性能。
- 在类别下选择性能，需要时添加可访问性、最佳实践或 SEO。检查存储清理和限制设置，并在比较期间保持其值不变。
- 选择分析页面加载，或你版本中的相应开始按钮。页面会重新加载，因此请提前保存未完成的表单或其他未保存的工作。在分析期间避免与页面交互，并等待报告。
- 检查请求的 URL、最终 URL、设置和版本。将报告保存为 HTML 或 JSON，如果导出菜单提供选择，请选择所需的格式。报告可能包含内部地址或诊断信息，因此在分享前考虑其内容。
对于基本页面加载审核以外的场景，选择不同的模式。Lighthouse 用户流程文档 区分了导航（Navigation）表示一次导航，时间段（Timespan）表示包含交互的期间，以及快照（Snapshot）表示当前页面状态。不要把时间段或快照的结果当作导航模式的完整性能得分来比较。当问题涉及特定状态时（例如菜单打开时的可访问性），可考虑快照。
在查看评分之前，请先阅读指标和诊断线索
性能评分说明将分数描述为经过转换的指标值的加权平均。减少诊断警告的数量不会按相应的数量增加分数。90–100 的分数显示为良好，50–89 显示为需要改进，0–49 显示为差。 这些区间解释了一次运行的分数；它们并未定义真实用户每个可接受延迟的标准。
| 指标 | 测量内容 | 首先查看的线索 |
|---|---|---|
| FCP：首次内容绘制 | 直到首次内容显示的时间。 | 初始服务器响应和阻塞渲染的样式或脚本。 |
| LCP：最大内容绘制 | 当视口中的大主体内容显示时。 | 报告中识别的元素，以及其图像请求在启动、传输或显示时的延迟。 |
| TBT：总阻塞时间 | 加载过程中长主线程任务的阻塞部分的总和。 | 长时间的 JavaScript 执行、不必要的启动脚本和第三方代码。 |
| CLS：累计布局偏移 | 意外布局移动的量。 | 没有预留空间的图片或广告，以及后期插入的元素。 |
| Speed Index（速度指数） | 可见内容填充的速度。 | 初始显示延迟的时期，同时结合视觉记录来考虑。 |
TBT 文档将超过 50 毫秒的任务定义为长任务，并把超出 50 毫秒的部分计入阻塞时间。TBT 与 Interaction to Next Paint（INP，交互到下一次绘制）不同；INP 关注用户交互的响应性。应在真实用户的现场数据中，分别查看核心网页指标（Core Web Vitals）的 LCP、INP 和 CLS。
展开报告的洞察和诊断，以查找受影响的元素和资源。如果 LCP 元素是初始视口中的图像，则从其传输大小和请求时间开始。对于较大的布局移动，请检查是否为图像和广告预留了空间。仅对重要的首屏图像使用懒加载或者以相同方式延迟所有脚本，可能会影响必要的显示或功能，因此应首先确定原因和使用情况。
如需更深入的调查，请按照 Chrome 的 Lighthouse 和性能面板指南 中的说明，在性能面板中继续使用录制和洞察功能。较高的可访问性或SEO得分并不能保证完全符合可访问性要求或获得高搜索排名。键盘使用情况和实际内容质量等自动检查之外的事项仍需进行审查。
改变一项内容并在相同条件下再次测量
- 选择一个对用户影响较大且有具体原因的问题。例如，对于初始视口中尺寸过大的图片，首先尝试使用与其显示尺寸相符的图片。
- 保留原始文件、设置和报告。在本地或测试环境中进行更改，并在部署后验证缓存是否提供新的文件。不要隐藏必要的功能，也不要为了追求更高的得分而仅向审核提供不同的页面。
- 使用相同的 URL、登录状态、设备模式和网络与 CPU 限制设置重复测量。比较原始指标以及重复运行的范围和中位数，而不是仅比较一个最佳分数。例如，如果你选择每个条件五次运行，请在修改前后都使用该次数。
- 检查目标指标是否有所改善，以及布局、按钮、表单和键盘交互是否仍然正常工作。如果更改没有帮助或破坏功能，请恢复保存的文件和设置，并调查其他原因。
测量变异性指南解释说，网络、设备、服务器和页面的更改可以在不更改代码的情况下改变分数。广告和同意横幅状态也是比较条件。在报告中记录日期、URL、工具版本、设置、指标和变化，并在收集到足够的时间和样本后评估真实用户指标。
当分析失败或结果差异很大时
如果页面加载失败、访问被阻止或重定向失败，在解读分数之前，请检查最终 URL 和正常的 HTTP 响应。不要移除身份验证以将私人页面暴露给外部测试。对于本地测量，请检查登录和清除存储的设置。如果可能涉及扩展程序，请在扩展影响较小的环境中重复相同目标。
PageSpeed Insights 与您电脑上的分数之间的差异并不意味着自动失败。首先比较 Lighthouse 版本、服务器访问路径、设备和网络与 CPU 限制设置以及 cookie 状态。不要尝试使移动端和桌面端分数匹配；应在每种条件下比较前后变化，并考虑真实访问者的指标。
