lighthouse_Chrome Lighthouse简介

lighthouse

Chrome Lighthouse has been around for a while now, but what if I ask you to explain what it does can you explain vividly?

Chrome Lighthouse已经存在了一段时间，但是如果我要您解释它又能生动地解释怎么办？

I discovered that a lot of web developers, including beginners, have not heard about this tool and those who have, have not tried it yet, that's not cool :(.

我发现许多Web开发人员，包括初学者，都没有听说过此工具，而那些曾经尝试过的人，还没有尝试过，那不是很酷的:(。

In this article, I would introduce you Chrome Lighthouse, what it does and how to start using it.

在本文中，我将向您介绍Chrome Lighthouse，它的作用以及如何开始使用它。

PS: This article was first published on my blog

PS：本文最早发表在我的博客上

Let’s get started :)

让我们开始吧 ：)

According to Wikipedia, A lighthouse is a tower, building, or other types of structure designed to emit light from a system of lamps and lenses and to serve as a navigational aid for maritime pilots at sea or on inland waterways.

根据维基百科， 灯塔 是一个塔，建筑，或其他类型的结构设计，发射从灯的系统的光的 镜头 ，并作为一个 导航设备 为 海上的飞行员 在海上或内河航道。

Okay, let's turn this into a tech term;

好吧，让我们把它变成一个技术术语。

Lighthouse is a tower, building, or other types of structure designed to emit light from a system under the “Audits” panel in Chrome Developer Tools and to serve as a guide for developers

灯塔是塔，建筑物，或设计为发射其他类型的结构的从系统 中 Chrome开发者工具的“审核”面板在光下，并作为用于开发商的导向

Making any sense? :)

有道理吗？ :)

Well, Lighthouse is a tool developed by Google that analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices.

好吧，Lighthouse是由Google开发的工具，可以分析Web应用程序和网页，收集现代性能指标以及对开发人员最佳实践的见解。

Think of Lighthouse as the speedometer in a car that checks and balances the cars speed limit.

可以将Lighthouse视为汽车中的速度计，它可以检查并平衡汽车的速度限制。

Basically, Lighthouse works with developer best practices and performance metrics. It runs checks on a web app and gives you feedback on errors, practices below standard, tips for better performance and how to fix them.

基本上，Lighthouse使用开发人员最佳实践和性能指标。 它在Web应用程序上运行检查，并为您提供有关错误，低于标准的做法，提高性能的提示以及如何修复它们的反馈。

According to Google Developers Docs

根据Google Developers Docs的说法

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

Lighthouse是一种开源的 ，自动化的工具，用于提高网页质量。 您可以在公开或需要身份验证的任何网页上运行它。 它对性能，可访问性，渐进式Web应用程序等进行审核。

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.

您可以在Chrome DevTools中，从命令行或作为Node模块运行Lighthouse。 您为Lighthouse提供一个URL进行审核，它对页面进行一系列审核，然后生成有关页面效果的报告。 从那里，将失败的审核用作改进页面的指示。 每个审核都有一个参考文档，解释了为什么审核很重要以及如何解决它。

That’s pretty much all about Lighthouse, It audits the URL of a web app and generates a report telling you how bad and good your web app is according to web standards and developers best practices. Also attached to each section of the report is documentation explaining why that part of your app was audited, why you should improve that part of your app and how to fix it.

关于Lighthouse，这几乎就是全部，它审核Web应用程序的URL并生成报告，告诉您根据Web标准和开发人员最佳实践，Web应用程序的优劣。 报告的每个部分还附有文档，解释了为什么审核应用程序的那部分，为什么要改进应用程序的那部分以及如何修复它。

Here is a demo of Lighthouse audits report for this blog https://bolajiayodeji.com

这是此博客的Lighthouse审核报告的演示https://bolajiayodeji.com

Pretty cool right? :)

很酷吧？ :)

What you should note is that I didn’t get great scores like this on my first audit. I had to use my first report to fix and improve the performance and quality of my app.

您应该注意的是，在第一次审核中，我没有得到像这样的好成绩。 我必须使用第一份报告来修复和改善应用程序的性能和质量。

This is the idea behind Lighthouse, it is to identify and fix common problems that affect your sites performance, accessibility and user experience.

这是Lighthouse背后的想法，它是确定并修复影响您的网站性能，可访问性和用户体验的常见问题。

---

---

Now, let's move to the interesting part, HOW TO GET STARTED!!

现在，让我们转到有趣的部分， 如何开始！

LightHouse is available in three workflows

LightHouse提供三种工作流程

• Chrome Developer Tools
  Chrome开发者工具
• Command line (Node)
  命令行(节点)
• A Chrome extension
  Chrome扩展程序

I personally prefer using LightHouse in Dev Tools. Using the extension does not make sense as the Dev Tool and extension work in the same chrome browser, well our preference varies, use what works best for you.

我个人更喜欢在开发工具中使用LightHouse。 使用扩展程序没有意义，因为开发工具和扩展程序可在同一个Chrome浏览器中工作，我们的偏好有所不同，请使用最适合您的工具。

Lighthouse was first available only with the Chrome extension before it was added to the Chrome DevTools.

Lighthouse最初仅在Chrome扩展程序中可用，然后再添加到Chrome DevTools中。

Using lighthouse on the command line is really cool also,(For geeks :))

在命令行上使用灯塔真的也很酷，(对于极客：)

Let’s Get Started!!!

让我们开始吧！！！

---

---

[1] Run Lighthouse in Chrome DevTools

[1]在Chrome DevTools中运行Lighthouse

• Download Google Chrome web browser here

  在此处下载Google Chrome浏览器

Note that Lighthouse can only be run on a desktop and not mobile

请注意，Lighthouse只能在台式机上运行，​​而不能在移动设备上运行

• Go to the URL you want to audit in Google Chrome.
  转到您要在Google Chrome浏览器中审核的URL。

You can audit any URL on the web.

您可以审核网络上的任何URL。

• Open Chrome DevTools
  打开Chrome DevTools

Command+Option+C (Mac)
Control+Shift+C (Windows, Linux, Chrome OS).

• Click on the Audits panel

  单击审核面板

To the left is the viewport of the page that will be audited, here that’s my blog :). To the right is the Audits panel of Chrome DevTools, which is now powered by Lighthouse

左侧是将要审核的页面的视口，这是我的博客:)。 右侧是Chrome DevTools的“ 审核”面板 ，该面板现在由Lighthouse提供支持

• Click on Run audits

  单击运行审核

DevTools shows you a list of audit categories. Ensure that you leave them all checked. If you want to personalise what part of your app to be audited, you can set that by checking the categories you want to audit.

DevTools向您显示审核类别的列表。 确保您将其全部选中。 如果要个性化要审核的应用程序的哪一部分，可以通过检查要审核的类别来进行设置。

• After 60 to 90 seconds — depending on your internet strength, Lighthouse gives you a report on the page.
  60到90秒后-根据您的互联网强度，Lighthouse会在页面上为您提供报告。

Not that your internet speed and pre installed extensions can affect lighthouse audits. For better experience, run audits in Icognito mode to avoid any interference

并不是说您的互联网速度和预先安装的扩展会影响灯塔审核。 为了获得更好的体验，请以Icognito模式运行审核 避免任何干扰

[2] Run Lighthouse in Command line

[2]在命令行中运行Lighthouse

• Download Google Chrome web browser here

  在此处下载Google Chrome浏览器

• Download node here, If you have it installed already, skip this step!

  在此处下载节点，如果已经安装，请跳过此步骤！

• Install Lighthouse
  安装灯塔

npm install -g lighthouse
# or use yarn:
yarn global add lighthouse

The -g flag installs it as a global module.

-g标志将其安装为全局模块。

• Run your audits
  进行审核

lighthouse 

Sample;

样品;

lighthouse https://bolajiayodeji.com/

By default, Lighthouse writes the report to an HTML file. You can control the output format by passing flags.

默认情况下，Lighthouse将报告写入HTML文件。 您可以通过传递标志来控制输出格式。

The report can be displayed in HTML or JSON format

该报告可以HTML或JSON格式显示

Output samples:

输出样本：

lighthouse
# saves `./_.report.html`

lighthouse --output json
# json output sent to stdout

lighthouse --output html --output-path ./report.html
# saves `./report.html`

# NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats
lighthouse --output json --output html --output-path ./myfile.json
# saves `./myfile.report.json` and `./myfile.report.html`

lighthouse --output json --output html
# saves `./_.report.json` and `./_.report.html`

lighthouse --output-path=~/mydir/foo.out --save-assets
# saves `~/mydir/foo.report.html`
# saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.devtoolslog.json`

lighthouse --output-path=./report.json --output json
# saves `./report.json`

Run $ lighthouse --help for CLI options

运行$ lighthouse --help for CLI选项

[3] Run Lighthouse with the Chrome extension

[3]使用Chrome扩展程序运行Lighthouse

As I earlier said, The DevTools workflow is the best as it provides the same benefits as the Extension workflow, with the added bonus of no installation needed.

正如我之前所说，DevTools工作流程是最好的，因为它提供了与扩展工作流程相同的优势，并且无需安装即可获得额外的好处。

To use this method you need to install the extension, but If you have your reasons, here is the guide;

要使用此方法，您需要安装扩展程序，但是如果有您的理由，请参考这里的指南 。

• Download Google Chrome web browser here

  在此处下载Google Chrome浏览器

• Install the Lighthouse Chrome Extension from the Chrome Webstore.

  从Chrome网上应用店安装Lighthouse Chrome扩展程序。

• Navigate to the page you want to audit
  导航到要审核的页面

• Click Lighthouse Icon.

  单击灯塔图标 。

It should be next to the Chrome address bar. If not, open Chrome’s main menu (the three dots on the upper right) and access it at the top of the menu. After clicking, the Lighthouse menu expands.

它应该在Chrome地址栏旁边。 如果没有，请打开Chrome的主菜单(右上角的三个点)，然后在菜单顶部访问它。 单击后，灯塔菜单将展开。

• Click Generate report.

  点击生成报告 。

Lighthouse runs its audits against the opened page, then opens up a new tab with a report of the results.

Lighthouse对打开的页面进行审核，然后打开一个新标签，其中包含结果报告。

Bingo! You did it

答对了！ 你做到了

---

---

That’s pretty much it, Lighthouse is a great tool, especially for beginners.

仅此而已，Lighthouse是一个很棒的工具，尤其对于初学者而言。

It is a very useful tool when it comes to auditing Progressive web apps.

在审核渐进式Web应用程序时，这是一个非常有用的工具。

I actually learned so much about optimization and performance standards when I started using Lighthouse. In no time you would become an expert in building full optimized web apps with great performance, accessibility and user experience. :)

当我开始使用Lighthouse时，实际上我对优化和性能标准了解很多。 您将很快成为构建具有出色性能，可访问性和用户体验的全面优化Web应用程序的专家。 :)

Lighthouse is not magic, it was created by humans. It is open source and contributions are welcome. Check out the repository’s issue tracker to find bugs that you can fix, or audits that you can create or improve upon. The issues tracker is also a good place to discuss audit metrics, ideas for new audits, or anything else related to Lighthouse.

灯塔不是魔术，它是人类创造的。 它是开源的， 欢迎大家贡献 。 检出存储库的问题跟踪器，以查找可以修复的错误或可以创建或改进的审核。 问题跟踪器也是讨论审核指标，新审核想法或与Lighthouse相关的任何其他内容的好地方。

Thank you for reading this, after installing and using Lighthouse, share your success stories in the comments!

感谢您阅读本文，在安装和使用Lighthouse之后，在评论中分享您的成功案例！

Also, I just launched my blog where I write articles on web and frontend development, don’t forget to visit and share!!!

另外，我刚刚启动了我的博客 ，在其中撰写有关Web和前端开发的文章，不要忘记访问和分享！！！

翻译自: https://www.freecodecamp.org/news/introduction-to-chrome-lighthouse/

lighthouse