wengjq / Blog

个人博客
581 stars 47 forks source link

Lighthouse 的使用 #29

Open wengjq opened 5 years ago

wengjq commented 5 years ago

前言

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

使用入门

运行 Lighthouse 的方式有两种:

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