lighthouse使用_如何使用Lighthouse分析网站性能

lighthouse使用

by Adam Henson

亚当·汉森(Adam Henson)

如何使用Lighthouse分析网站性能 (How to analyze website performance with Lighthouse)

手动，编程或自动审核网站性能 (Audit website performance manually, programmatically, or automatically)

Lighthouse is an open-source project by Google that gives you a way to measure web page performance. It has configurable settings for reproducing various conditions. You can set network and device type to simulate, for example.

Lighthouse是Google的一个开源项目，为您提供了一种衡量网页性能的方法。 它具有可重现各种条件的可配置设置。 例如，您可以设置网络和设备类型以进行仿真。

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. Lighthouse

您为Lighthouse提供一个URL进行审核，它对页面进行一系列审核，然后生成有关页面效果的报告。 从那里开始，将失败的审核用作改进页面的指示。 每个审核都有一个参考文档，解释了为什么审核很重要以及如何解决它。 灯塔

There are many reasons why you’d want to measure performance, but one of the most important is about the impact on SEO. I go into more detail about this and how to address certain metrics in this article.

您有很多原因想要衡量性能，但是最重要的原因之一就是对SEO的影响。 我进入这个更多的细节和如何解决某些指标在这篇文章 。

使用Chrome DevTools运行Lighthouse (Running Lighthouse with Chrome DevTools)

You can run performance audits manually with the Chrome DevTools browser extension. Simply fire up the extension from the web page you’d like to test and select the “Audits” panel.

您可以使用Chrome DevTools浏览器扩展程序手动运行性能审核。 只需从您要测试的网页上启动该扩展程序，然后选择“审核”面板即可。

Among a variety of audits, you can choose “performance”. You can also choose to simulate device type and network throttling. Some information specifically about throttling can be found in the Lighthouse project Github repo.

在各种审核中，您可以选择“绩效”。 您还可以选择模拟设备类型和网络限制。 有关节流的一些特定信息可以在Lighthouse项目Github repo中找到 。

Click on “Run audits” next. Upon completion, Lighthouse provides a report within the extension UI.

单击“运行审核”。 完成后，Lighthouse将在扩展UI中提供报告。

This report is a general overview of important metrics, opportunities, and overall performance score. Thumbnails illustrate the lifecycle of page load. What does this all mean? Google provides a plethora of documentation describing each metric, how to address them and the overall performance score.

该报告是重要指标，机会和总体绩效得分的一般概述。 缩略图说明了页面加载的生命周期。 这是什么意思呢？ Google提供了大量文档，描述每个指标 ，如何解决这些指标以及总体性能得分 。

In the top left side of Chrome DevTools panel is a download icon that you can use to download the full report in JSON format. You can then use it to create a PDF report via Lighthouse Report Viewer.

Chrome DevTools面板的左上方是一个下载图标，您可以使用该图标下载JSON格式的完整报告。 然后，您可以使用它通过Lighthouse Report Viewer创建PDF报告。

Due to the high volume of factors playing into the lifecycle of page load, it’s important to compare results in batches. Taking an average of 5 runs, for example, will provide better insight.

由于大量因素会影响页面加载的生命周期，因此批量比较结果非常重要。 例如，平均进行5次运行将提供更好的洞察力。

以编程方式运行Lighthouse (Running Lighthouse Programmatically)

For our standard “run of the mill” situations, the above should suffice. Another way to run Lighthouse involves installing the open-source package via NPM and following the instructions in the CLI documentation. This can be beneficial if you want to run audits programmatically in a build pipeline, for example.

对于我们的标准“工厂运行”情况，上述条件就足够了。 运行Lighthouse的另一种方法包括通过NPM安装开源软件包，并按照CLI文档中的说明进行操作。 例如，如果要在构建管道中以编程方式运行审核，这可能会很有用。

Similar to the above, you can also run Lighthouse in code by following the documentation for using the Node module programmatically. You could create a full-fledged Node.js application with Lighthouse ?!

与上述类似，您还可以通过遵循以编程方式使用Node模块的文档，在代码中运行Lighthouse。 您可以使用Lighthouse创建一个功能完善的Node.js应用程序？

随着时间的推移自动运行Lighthouse (Running Lighthouse Automatically Over Time)

So now that we’re pros — let’s take this to the next level. There are many integrations listed in the Lighthouse documentation, so let’s take a look at one of them.

因此，既然我们是专家，那就让我们进入一个新的高度。 Lighthouse文档中列出了许多集成 ，因此让我们看一下其中的一个。

使用“ Foo”运行Lighthouse并随时间比较结果 (Using “Foo” to Run Lighthouse and Compare Results Over Time)

In an engineering setting where many developers are deploying application changes on a regular basis, it can be important to monitor website performance over time to associate change sets with performance degradation or improvement. Another example would be teams that have initiatives to improve performance for SEO ranking or other reasons. In these situations, it’s critical to monitor website performance over days, weeks, months, etc.

在许多开发人员都定期部署应用程序更改的工程环境中，监视一段时间内的网站性能以将更改集与性能下降或改进相关联非常重要。 另一个示例是出于SEO排名或其他原因而主动提高绩效的团队。 在这种情况下，监视几天，几周，几个月等网站的性能至关重要。

You can add URLs to track at www.foo.software and monitor performance change. Foo also provides email, Slack or PagerDuty notifications when performance has dropped below a threshold defined by the user, when it’s back to normal, and when improvements are identified automatically!

您可以添加URL来跟踪www.foo.software并监视性能变化。 当性能下降到用户定义的阈值以下，恢复正常以及自动识别出改进时，Foo还提供电子邮件，Slack或PagerDuty通知。

The best part about it is that you can create an account for free! Once registered and logged in, click the “Pages” link from the top navigation. This is where you can add URLs to monitor. Foo saves results and displays a timeline chart providing a visualization of important metrics. You can toggle through days, weeks, months and drill into detailed reports.

最好的部分是您可以免费创建一个帐户 ！ 注册并登录后，单击顶部导航中的“页面”链接。 您可以在此处添加要监视的URL。 Foo保存结果并显示时间线图表，以直观显示重要指标。 您可以在几天，几周，几个月之间切换，并深入查看详细的报告。

结论 (Conclusion)

Lighthouse is becoming an industry standard in website performance measurement. There are books worth documentation about Lighthouse that provides details of important metrics.

Lighthouse正在成为网站性能衡量的行业标准。 有一些有关Lighthouse的有价值的书籍，其中提供了重要指标的详细信息 。

翻译自: https://www.freecodecamp.org/news/three-ways-to-analyze-website-performance-with-lighthouse-8d100966c04b/

lighthouse使用