概述
灯塔是一种开源,自动化的工具,用于提高网页的质量。您可以在任何网页,公开或需要身份验证的情况下运行它。它对性能,可访问性,渐进式网络应用程序,SEO等进行了审核。
You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.
您也可以使用灯塔CI为了防止回归你的网站。
查看下面从Google I/O的视频,以了解有关如何使用和为灯塔做出贡献的更多信息。
Get started
选择最适合您的灯塔工作流程:
- In Chrome DevTools。轻松审核需要身份验证的页面,并以用户友好的格式阅读您的报告。
- From the command line。Automate your Lighthouse runs via shell scripts.
- As a Node module。将灯塔整合到您的连续集成系统中。
- 来自Web UI。运行灯塔并链接到报告而无需安装内容。
CLI和节点工作流程要求您在计算机上安装了Google Chrome实例。
在Chrome Devtools中运行灯塔
Lighthouse在Chrome Devtools中拥有自己的面板。运行报告:
In Google Chrome, go to the URL you want to audit. You can audit any URL on the web.
点击the灯塔标签。
点击分析page load。DevTools向您显示审计类别列表。让它们全部启用。
点击运行审核。30到60秒后,灯塔为您在页面上提供了报告。
Install and run the Node command line tool
要安装节点模块:
- 下载Google Chrome for Desktop。
- 安装电流长期支持版本的节点。
- 安装灯塔。这
-g
flag installs it as a global module.
NPMinstall-g lighthouse
To run an audit:
lighthouse<url>
To see all the options:
灯塔 - 螺旋
Run the Node module programmatically
看以编程方式使用有关以节点模块为单位运行灯塔的示例。
Run PageSpeed Insights
To run Lighthouse on PageSpeed Insights:
Enter a web page URL.
点击分析。
Run Lighthouse as a Chrome Extension
除非您有特定原因,否则应该使用Chrome DevTools工作流程rather than this Chrome Extension workflow. The DevTools workflow allows for testing local sites and authenticated pages, while the extension does not.
安装扩展名:
- 下载[Google Chrome for Desktop] [桌面]。
- Install the灯塔镀铬扩展来自Chrome网络商店。
To run an audit:
In Chrome, go to the page you want to audit.
点击the灯塔。它应该在Chrome地址栏旁边。如果没有,请打开Chrome的扩展菜单并从那里访问。单击后,灯塔菜单会扩展。
点击Generate report。Lighthouse对目前以目前的注重页面进行审核,然后打开一个新标签,并提供结果报告。
在线分享和查看报告
使用灯塔观众在线查看和分享报告。
分享报告为JSON
灯塔查看器需要灯塔报告的JSON输出。下面的列表说明了如何获取JSON输出,具体取决于您正在使用的灯塔工作流程:
- 灯塔报告。打开顶端菜单和单击保存为JSON
- 命令行。Run:
灯塔 - 输出JSON-输出路径<路径/for/output.json>
To view the report data:
- 打开灯塔观众。
- 将JSON文件拖到查看器上,或单击查看器中的任何地方以打开文件导航器并选择文件。
Share reports as GitHub Gists
如果您不想手动传递JSON文件,也可以将您的报告作为秘密GitHub Gists共享。GIST的一个好处是免费版本控制。
To export a report as a gist from the report:
- (If already on the viewer, skip this step) Open the top-right菜单,然后单击在观众中打开。这report opens in the Viewer, located at
https://googlechrome.github.io/lighthouse/viewer/
。 - 在观看者中,打开右上角菜单,然后单击保存为要点。您第一次这样做时,弹出窗口要求访问您的基本GitHub数据,并读写您的GIST。
To export a report as a gist from the CLI version of Lighthouse,手动创造要点and copy-paste the report's JSON output into the gist. The gist filename containing the JSON output must end in.lighthouse.Report.JSON
。看分享报告为JSON有关如何从命令行工具生成JSON输出的示例。
To view a report that's been saved as a gist:
- 添加
?gist=
到观众的URL,哪里
is the ID of the gist.https://googlechrome.github.io/lighthouse/viewer/?gist=
- 打开观众, and paste the URL of a gist into it.
灯塔可扩展性
灯塔aims to provide guidance that is relevant and actionable for all web developers. To this end, there are two features available that allow you to tailor Lighthouse to your specific needs.
Stack Packs
开发人员使用许多不同的技术(后端/CMS/JavaScript框架)来构建其网页。灯塔现在不仅可以浮出水面建议,还可以根据所使用的工具提供更相关和可行的建议。
“堆栈包”允许Lighthouse检测您的网站的构建平台,并显示基于堆栈的建议。这些建议是由社区专家定义和策划的。
To contribute a Stack Pack, review theContributing Guidelines。
灯塔插件
Lighthouse插件允许域专家扩展灯塔的功能,以满足其社区的特定需求。现在,您能够利用灯塔收集的数据来创建新的审核。从本质上讲,灯塔插件是一个节点模块,该节点模块实现了一组由灯塔运行的检查,并将其添加到报告中作为新类别。
For more information about how to create your own plugin, check out our插件手册in the Lighthouse GitHub repo.
Integrate Lighthouse
如果您是将灯塔作为您提供的产品 /服务的一部分集成的公司或个人,首先 - 我们很兴奋!我们希望尽可能多的人使用灯塔,这Guidelines and Brand Assets for Integrating Lighthouse旨在使您直接证明灯塔在保护我们的品牌的同时处于摇摆状态。
为灯塔做出贡献
灯塔is open source andcontributions are welcome! Check out the repository's问题跟踪器to find您可以修复的错误, or audits that you can create or improve upon. The issues tracker is also a good place to discuss performance metrics, ideas for new audits, or anything else related to Lighthouse.