利用 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 开发提供指南。其中包括关于一般最佳实践、性能和无障碍功能提示的指导,以及关于打造优质应用的端到端帮助。

“Do Better Web”是 Lighthouse 项目的一项成果,旨在帮助开发者在 Web 上做得更好。换句话说,帮助他们进行 Web 应用的现代化改造和优化。很多时候,Web 开发者会使用过时的做法、反模式或遇到已知的性能陷阱,而没有意识到这一点。例如,众所周知,基于 JS 的动画应使用 requestAnimationFrame()(而不是 setInterval())完成。但是,如果开发者不知道新版 API,则其 Web 应用会遭受不必要的损失。

Lighthouse 1.3 包含 20 多项新的最佳实践建议,其中包括对 CSS 和 JavaScript 功能进行现代化改造的提示,以及诸如“减少阻塞渲染的资源的数量”“使用被动事件监听器提升滚动性能”等性能建议。

遵循更好的网络最佳实践。

随着时间的推移,我们会陆续添加更多建议。如果您有最佳实践建议或想要帮助我们编写审核,请在 GitHub 上提交问题

报告查看者

最后,我们非常高兴地宣布推出新的 Lighthouse 结果网页查看器。访问 googlechrome.github.io/lighthouse/viewer,拖放 Lighthouse 运行的输出(或点击上传您的文件),大功告成。“Insta”Lighthouse HTML 报告。

报告查看者。
报告查看者

通过 Lighthouse 查看器,您还可以与他人分享报告。点击共享图标即可登录 GitHub。我们会将报告作为 Secret 要点存储在您的账号中,方便您日后轻松删除或更新共享报告。使用 GitHub 存储数据还可以免费获得版本控制!

查看器架构。
观看者架构

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

查看器架构 2.
观看者架构 2

如需了解有关 Lighthouse 最新版本的所有详细信息,请参阅 GitHub 上的完整版本说明。与往常一样,欢迎与我们联系报告 bug、提交功能请求,或就您希望看到的内容集思广益