Lighthouse 是 Google 推出的免费、开源且自动化的网站监控工具，可帮助电商企业跟踪网站加载时间、无障碍性及 SEO 表现。该工具可通过当前版本的 Chrome 浏览器直接使用。
用户只需在网页任意位置按住 Alt 键并点击，打开 Chrome 开发者工具，选择“检查（Inspect）”，进入“Audits”标签页即可找到 Lighthouse。
Lighthouse 位于 Chrome 开发者工具的“Audits”标签页下
运行审计时，Lighthouse 会多次加载目标网站以收集结构、标签及性能信息。该工具高度重视移动端体验，会模拟智能手机环境，将网络限速至类似 3G 水平，并在离线状态下测试页面。
改进您的网站
Lighthouse 旨在“帮助您识别并修复影响网站性能、无障碍性和用户体验的常见问题”。作为全球最大的搜索引擎，Google 希望利用其丰富经验为企业提供建议。明智地遵循这些发现，有助于优化在线商店，提升购物者的查找与使用体验。
Lighthouse 会为每个审计类别提供评分，并提供可操作的反馈以改善您的网站
一次 Lighthouse 审计涵盖五个类别，每个类别评分范围为 0 到 100：
- 性能：评估网站加载速度或移动端关键元素对用户可用的速度。基于首次绘制时间和页面可交互时间等多个数据点。
- 渐进式 Web 应用（PWA）：基于 PWA 基本清单检查网站完整度。Google 正大力推广 PWA，因其能提升移动端性能并可能提高搜索引擎排名。
- 无障碍性：约 35 项无障碍特性的加权平均值。这是在线商家需重点监控的事项，缺乏无障碍功能不仅体验不佳，甚至可能涉及法律风险。
- 最佳实践：检查是否采用当前 Web 开发最佳实践，例如使用 HTTP/2。
- SEO：审计九项搜索引擎优化基础指标。虽比部分第三方工具简单，但仍能有效帮助企业了解在 Google 等搜索引擎中的表现。
可用的结果
Lighthouse 提供的详细信息通常具有高度可操作性，可直接用于网站改进。
例如，2018 年 5 月 7 日对 Walmart.com 的审计发现 iframe 缺少 title 属性。Lighthouse 指出这会增加屏幕阅读器用户的理解难度，并精确定位了相关标签。开发人员据此添加 title 属性后，有效改善了网站的无障碍性。
Lighthouse 的反馈通常足够具体，可据此采取行动并提升您的得分
同样，针对 Kohls.com 的审计发现了未使用的 CSS 声明。工具不仅指出了具体样式表，还估算了删除这些代码后可节省的数据字节数。
Kohl’s 可以通过删除未使用的样式声明来节省一些字节
使用 Lighthouse
电商企业可通过以下三种方式利用 Lighthouse 监控和改善网站：
1. 测试与优化商店：在 Chrome 中打开 Lighthouse，导航至公司网站执行审计，逐一处理反馈建议，逐步解决各项问题。
2. 手动审计更新：当新代码部署到测试服务器时，在 Chrome 中对测试页面执行审计，以便在生产环境部署前评估变更对各项得分的影响。
3. 自动化审计：Lighthouse 可作为 Node.js 包集成到持续开发工作流中。每次源代码更新时自动测试性能影响，显著降低性能的代码可被拒绝或强制进入审查流程。例如，Google 开发者曾演示如何将 Lighthouse 与 GitHub 及 Travis 测试工具结合使用。
决策
审计结果辅助决策，但企业仍需审慎考虑潜在变更。有时最佳优化方案可能与 Lighthouse 建议不同。例如，与其为 iframe 添加 title 属性，直接移除整个 iframe 可能是更优解。