Lighthouse 的介绍和使用

发布于 2022-06-13 19:27:53 字数 2050 浏览 995 评论 0

Lighthouse 是一个开源的自动化工具,用于改进网络应用的质量。可以将其作为一个 Chrome 扩展程序运行,或从命令行运行。 为 Lighthouse 提供一个审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。目前测试项包括页面性能、PWA、可访问性(无障碍)、最佳实践、SEO。Lighthouse 会对各个测试项的结果打分,并给出优化建议,这些打分标准和优化建议可以视为 Google 的网页最佳实践。

使用入门

运行 Lighthouse 的方式有两种:

  • 作为 Chrome 扩展程序运行
  • 作为命令行工具运行。

Chrome 扩展程序提供了一个对用户更友好的界面,方便读取报告。命令行工具允许您将 Lighthouse 集成到持续集成系统。

  1. 下载 Google Chrome 52 或更高版本。
  2. 安装 Lighthouse Chrome 扩展程序。转到您要进行审查的页面。
  3. 点击位于 Chrome 工具栏上的 Lighthouse 图标(Lighthouse 图标)。

企业微信截图_1573537570838

4、Lighthouse 菜单。如果您想仅运行审查的子集,则点击 Options 按钮并停用您不关注的审查。 向下滚动并按 OK 以确认您的更改。

企业微信截图_15735379789828

5、Lighthouse 选项菜单。点击 Generate report 按钮以针对当前打开的页面运行 Lighthouse 测试。在完成审查后,Lighthouse 将打开一个新标签,并在页面的结果上显示一个报告。

Lighthouse 报告

企业微信截图_15735411976167

命令行工具

安装 Node,需要版本 5 或更高版本。安装 Lighthouse 作为一个全局节点模块。

npm install -g lighthouse

针对一个页面运行 Lighthouse 审查。

lighthouse https://airhorner.com/

传递 --help 标志以查看可用的输入和输出选项。

lighthouse --help

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

蓝色星空

暂无简介

文章
评论
25 人气
更多

推荐作者

微信用户

文章 0 评论 0

小情绪

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

笨死的猪

文章 0 评论 0

彭明超

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文