概述

出版更新

灯塔是一种开源,自动化的工具,用于提高网页的质量。您可以在任何网页,公开或需要身份验证的情况下运行它。它对性能,可访问性,渐进式网络应用程序,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

选择最适合您的灯塔工作流程:

CLI和节点工作流程要求您在计算机上安装了Google Chrome实例。

在Chrome Devtools中运行灯塔

Lighthouse在Chrome Devtools中拥有自己的面板。运行报告:

  1. 下载Google Chrome for Desktop

  2. In Google Chrome, go to the URL you want to audit. You can audit any URL on the web.

  3. 打开Chrome Devtools

  4. 点击the灯塔标签。

    Chrome Devtools的灯塔面板
    To the left is the viewport of the page that will be audited. To the right is the灯塔窗格l of Chrome DevTools, which is powered by Lighthouse
  5. 点击分析page load。DevTools向您显示审计类别列表。让它们全部启用。

  6. 点击运行审核。30到60秒后,灯塔为您在页面上提供了报告。

    A Lighthouse report in Chrome DevTools
    A Lighthouse report in Chrome DevTools

Install and run the Node command line tool

要安装节点模块:

  1. 下载Google Chrome for Desktop
  2. 安装电流长期支持版本的节点
  3. 安装灯塔。这-gflag 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:

  1. 导航PagesPeed Insights

  2. Enter a web page URL.

  3. 点击分析

    PagesPeed Insights UI
    PagesPeed Insights UI

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.

安装扩展名:

  1. 下载[Google Chrome for Desktop] [桌面]。
  2. Install the灯塔镀铬扩展来自Chrome网络商店。

To run an audit:

  1. In Chrome, go to the page you want to audit.

  2. 点击the灯塔extension icion灯塔。它应该在Chrome地址栏旁边。如果没有,请打开Chrome的扩展菜单并从那里访问。单击后,灯塔菜单会扩展。

    灯塔扩展
    灯塔扩展窗格l
  3. 点击Generate report。Lighthouse对目前以目前的注重页面进行审核,然后打开一个新标签,并提供结果报告。

    灯塔扩展报告
    A Lighthouse report from the extension

在线分享和查看报告

使用灯塔观众在线查看和分享报告。

灯塔观众
灯塔观众

分享报告为JSON

灯塔查看器需要灯塔报告的JSON输出。下面的列表说明了如何获取JSON输出,具体取决于您正在使用的灯塔工作流程:

  • 灯塔报告。打开顶端菜单图标菜单和单击保存为JSONbutton保存为JSON
  • 命令行。Run:
    灯塔 - 输出JSON-输出路径<路径/for/output.json>

To view the report data:

  1. 打开灯塔观众
  2. 将JSON文件拖到查看器上,或单击查看器中的任何地方以打开文件导航器并选择文件。

Share reports as GitHub Gists

如果您不想手动传递JSON文件,也可以将您的报告作为秘密GitHub Gists共享。GIST的一个好处是免费版本控制。

To export a report as a gist from the report:

  1. (If already on the viewer, skip this step) Open the top-right菜单图标菜单,然后单击Open in viewer button在观众中打开。这report opens in the Viewer, located athttps://googlechrome.github.io/lighthouse/viewer/
  2. 在观看者中,打开右上角菜单图标菜单,然后单击Open in viewer button保存为要点。您第一次这样做时,弹出窗口要求访问您的基本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.

Last updated:Improve article

我们在此网站上为Cookie提供分析流量,记住您的偏好并优化您的体验。