利用 Lighthouse 打造更好的网络

自 Google I/O 大会以来,我们一直在努力让 Lighthouse 成为构建出色渐进式 Web 应用的绝佳助手:

今天,我们非常高兴地宣布 Lighthouse 1.3 版的发布。Lighthouse 1.3 包含一系列重大新功能、审核功能以及常规 bug 修复。您可以通过 npm (npm i -g lighthouse) 安装该扩展程序,也可以从 Chrome 应用商店下载该扩展程序

那么,有什么新变化呢?

全新外观和风格

如果您使用过较低版本的 Lighthouse,可能已经注意到徽标是新的!HTML 报告和 Chrome 扩展程序也进行了全面更新,评分结果的呈现更加简洁,审核结果更加一致。此外,我们还添加了有用的调试信息,以便您在测试失败时参考,并提供了指向推荐权宜解决方法的指针。

Lighthouse 报告

新最佳实践

到目前为止,Lighthouse 一直专注于性能指标和 PWA 的质量。 不过,该项目的总体目标是为所有 Web 开发提供指南。其中包括有关一般最佳实践、性能和无障碍功能提示的指南,以及有关打造优质应用的端到端帮助。

“打造更出色的 Web 体验”是 Lighthouse 项目的一项举措,旨在帮助开发者在 Web 上取得更理想的成效。也就是说,帮助他们改进和优化 Web 应用。很多时候,Web 开发者在不知情的情况下使用过时做法、反模式或陷入已知的性能陷阱。例如,众所周知,基于 JS 的动画应使用 requestAnimationFrame() 而非 setInterval() 来实现。但是,如果开发者不知道有较新的 API,其 Web 应用就会不必要地受到影响。

Lighthouse 1.3 包含 20 多条新的最佳实践建议,从 CSS 和 JavaScript 功能现代化方面的提示到性能建议,例如“减少导致呈现阻塞的资源数量”“使用被动事件监听器来提升滚动性能”。

遵循更好的 Web 最佳实践。

我们会随着时间的推移不断添加更多建议。如果您有关于最佳实践的建议,或者想帮助我们撰写审核报告,请在 GitHub 上提交问题

报告查看器

最后,我们很高兴地宣布推出了适用于 Lighthouse 结果的新网络查看器。访问 googlechrome.github.io/lighthouse/viewer,拖放 Lighthouse 运行的输出(或点击以上传文件),即可获得结果。“Insta”Lighthouse HTML 报告。

报告查看器。
报告查看器

借助 Lighthouse 查看器,您还可以与他人分享报告。点击分享图标后,您需要登录 GitHub。我们会将报告作为秘密 gist 存储在您的账号中,以便您日后轻松删除已分享的报告或对其进行更新。使用 GitHub 进行数据存储还意味着您可以免费获得版本控制功能!

查看器架构。
查看器架构

Lighthouse 查看器可以通过向网址添加 ?gist=GIST_ID 来重新加载现有报告:

查看器架构 2.
Viewer 架构 2

如需详细了解 Lighthouse 的最新动态,请参阅 GitHub 上的完整版本说明。一如既往,您可以与我们联系报告 bug、提交功能请求,或就您希望接下来看到的想法进行头脑风暴。