Google Lighthouse：它是什么以及如何使用
Google Lighthouse 是一款免费工具，用于衡量你网页的效果、可访问性和 SEO。
什么是 Google Lighthouse？
Google Lighthouse 是 Google 推出的一款免费工具，帮助你提升网站上网页的质量。
该工具会从效果、可访问性、SEO 等方面审计你的页面，并提供改进建议，让你能够优化这些方面。
它是一款开源软件——任何人都可以在任意网页上使用它。
无论你是网页开发者、SEO 从业者还是网站所有者，Google Lighthouse 都能帮助你提升网站的整体体验与性能。
本文将介绍 Google Lighthouse 的工作原理，以及如何使用它审计网页。
下面从它的工作原理说起。
Google Lighthouse 如何工作？
Google Lighthouse 的运行方式是对五个主要的网站优化类别执行审计。
1. 效果（Performance）
在这项审计中，Lighthouse 会衡量网站加载的速度以及用户能多快访问它。
它会报告你在五项速度指标上的效果，每一项都衡量页面速度的某个方面：
- 首次内容绘制（FCP）：衡量第一段文字或图片对用户可见所需的时间
- 最大内容绘制（LCP）：计算页面为用户加载其最大元素所需的时间
- 总阻塞时间（TBT）：衡量页面被阻塞、无法对用户输入（如鼠标点击）作出反应的时间总量
- 累积布局偏移（CLS）：衡量用户在访问页面时发生的布局偏移
- 速度指数（SI）：显示页面内容的加载速度
Lighthouse 会根据你的页面在这些指标上的表现，为页面给出一个总体效果分数。分数范围可以是 0 到 100。
如果你的分数在 90 到 100 之间，说明你的页面为用户体验做了很好的优化。
低于 90 则意味着页面上有较多资源拖慢了速度，影响了整体页面体验。
Lighthouse 还会给出建议，可据此实施以提升效果。
2. 可访问性（Accessibility）
Lighthouse 的可访问性测试会分析使用辅助技术的人能多好地使用你的网站。
具体来说，它会检查按钮和链接等元素，看它们是否被很好地描述。
它还会分析图片，看是否指定了替代文本（alt text）。这样当视力有限或没有视力的用户使用屏幕阅读器时，就能理解图片的内容。
与效果审计报告类似，可访问性报告也会给出一个满分 100 的分数。分数越高越好。
该工具还会突出显示改进整体可访问性的机会。
3. 最佳实践（Best Practices）
Lighthouse 中的最佳实践审计会检查你的页面是否基于现代网页开发标准构建。
Lighthouse 会检查：
- 资源是否从使用 HTTPS 的安全服务器加载。
- 所有图片是否以正确的宽高比和合适的分辨率显示
- 所有 JavaScript 库是否安全且不存在任何漏洞。
- 页面是否有 HTML doctype
- 内容安全策略（CSP）是否能有效抵御跨站脚本（XSS）攻击
- 页面是否没有任何浏览器错误
- 页面是否没有任何已弃用的框架和 API
- 页面是否有有效的 source map
- 页面是否没有出现在 Chrome DevTools 面板中的问题，例如网络请求失败、安全措施不足以及其他浏览器问题
- 页面的字符编码是否通过 meta charset 标签设置
- 页面是否允许用户在密码字段中粘贴密码
- 页面是否通过在加载时阻止地理位置和通知权限请求来营造良好的用户体验
所有这些因素共同决定你满分 100 的分数。
Lighthouse 的最佳实践报告还会突出显示需要你关注的特定元素，这些可以提升你的分数。
4. SEO
Lighthouse 会运行一项测试，分析你网页在技术 SEO方面的一些表现。
具体来说，它会检查：
- 你的网页是否适合移动设备
- 页面是否有有效的结构化数据
- 内链是否可以抓取
- 页面是否有有效的 hreflang 属性
- 是否设置了标题（title）和 meta description 标签
- 页面是否可被索引
- Robots.txt 是否有效
- 页面是否返回 HTTP 200（OK）状态响应码
- 页面是否设置了有效的“rel=canonical”标签
- 页面内容是否不依赖插件
- 页面上的链接是否用描述性文字引入
- 页面上的图片是否指定了图片替代文本
- 页面是否有设置 width 或 initial-scale 的 viewport meta 标签
然后给出一个满分 100 的分数。
它还会突出显示在审计中检测到的任何 SEO 问题。
但该工具并不会给你完整的 SEO 全貌。
如果你想让网站在 Google 中排名更好，就需要确保它针对 SEO 的各个方面都做了优化，确保没有任何问题影响你的排名。
这时 Semrush 的工具就能派上用场了。
先从我们的免费 SEO 检查工具开始，做一个入门级的了解。若需更深入的覆盖，Semrush Site Audit 会检查你网站 140 多个 SEO 方面，例如重复内容、重定向、内链、URL 结构等等。
要使用该工具，请设置一个项目并运行你的审计。
审计完成后，你会得到一份关于你网站 SEO 健康状况的总体概览。
你还能看到影响你表现的具体问题。只需进入“Issues”标签。
对于检测到的每个问题，该工具都会给出修复建议。
解决该工具为你的网站检测到的每一个问题，这样你网站的 SEO 就能保持在健康状态。
5. 渐进式 Web 应用（PWA）
Lighthouse 中的 PWA 审计会验证你的 Web 应用是否利用现代 Web 能力来提供最佳用户体验。
它会检查你的 Web 应用是否：
- 在移动网络下快速可靠，并提供离线功能
- 可安装到多种设备类型上，并具备离线功能和推送通知等特性
- 通过将 HTTP 流量重定向到 HTTPS、配置自定义启动画面、调整网页内容尺寸以适应移动屏幕，以及实施 Lighthouse 列出的其他所有最佳实践，实现了 PWA 优化
该测试会让你的 Web 应用与这些因素对照，并授予其中一个 PWA 徽章。
这意味着，与前四份报告不同，当你在 Lighthouse 中运行 PWA 审计时，得到的是一个徽章（而不是满分 100 的分数）。
就像这样：
审计报告还会提供改进你整体 PWA 表现的建议，包括需要解决的具体问题。
如何使用 Google Lighthouse
了解 Google Lighthouse 是什么以及如何工作之后，接下来看看用它审计页面的不同方式。
在 Chrome DevTools 中使用 Lighthouse
在 Chrome 浏览器中，你可以用 Chrome DevTools 运行 Google Lighthouse 审计。
打开你想审计的网页。
然后在页面上任意位置右键单击，选择“Inspect”。
Inspect 功能会在网页右侧打开一个 DevTools 面板。
从面板的工具栏中选择“Lighthouse”。（如果找不到 Lighthouse 选项，就点击工具栏末尾的两个箭头，你会看到它。）
在这里，你可以根据想分析网站的哪些方面，选择一个、多个或全部类别。然后点击“Analyze page load”。
随后工具会为你生成一份报告。你会在顶部看到各个类别的审计分数。
你可以点击某个特定类别来了解更多。在这个示例中，我们点击了“Performance”审计。
注意：当你用 DevTools 运行效果审计时，你会注意到 Lighthouse 会衡量你在六项速度指标（而不是五项）上的表现。
多出的那项指标是可交互时间（TTI）。它计算页面变得用户可以完全交互所需的时间。
该指标属于他们已弃用的指标。目前尚不清楚，为何在 DevTools 中运行 Lighthouse 审计时它仍被计入。
在 Chrome 扩展程序中使用 Lighthouse
Lighthouse 有一个 Chrome 扩展程序，可以为你执行审计。
在你的 Chrome 浏览器上，安装Lighthouse Chrome 扩展程序。
访问你想测试的网页。
然后打开 Chrome 扩展程序菜单，选择“Lighthouse”。
然后点击齿轮图标。
你会看到一些设置，可以根据你想生成的报告选择或取消选择特定类别。
然后点击“Generate report”按钮开始审计。
Lighthouse 会在一个新标签页中为你生成报告。
在 PageSpeed Insights 中使用 Lighthouse
Lighthouse 也可以通过 Google 的PageSpeed Insights 工具使用。
打开该工具。输入你的页面 URL，然后点击“Analyze”。
该工具会为除 PWA 之外的所有类别生成报告。PageSpeed insights 不执行 PWA 审计。
通过 Node 模块使用 Google Lighthouse
你也可以使用 Node JavaScript 模块来运行 Lighthouse 审计。
在你的系统上安装当前的 Node。
然后运行以下命令行来安装 Lighthouse：
Lighthouse 安装完成后，使用下面的命令行来生成报告。
（你需要把“url”替换为你想测试页面的网址。）
常见问题
Lighthouse 与 PageSpeed Insights 有何不同？
Lighthouse 与 PageSpeed Insights 的不同之处在于，Lighthouse 仅使用实验室数据（lab data）来衡量你页面的效果。而 PageSpeed insights 同时使用实验室数据和现场数据（field data）。
实验室数据反映的是假设的用户可能如何体验你的网站。相比之下，现场数据反映的是真实用户实际如何体验你的网站。
为什么我每次测试的分数都不同？
你在 Lighthouse 中看到的分数每次运行时都可能不同。
网络状况、修改网络请求的浏览器扩展程序，以及特定页面上显示的广告，都会影响你每次测试的分数。
Lighthouse 报告是否包含核心网页指标（Core Web Vitals）？
包含。Lighthouse 中的效果审计会针对以下核心网页指标分析你的网站：
- 最大内容绘制（LCP）
- 总阻塞时间（TBT）（它用作最初的首次输入延迟（FID）指标的替代）
- 累积布局偏移（CLS）