lighthouse工具_Lighthouse：一种用于网页的性能和优化工具

lighthouse工具

When opening Chrome DevTools, you will see this highlighted tab in the above image. What is it? It’s Lighthouse, an open-source automated tool for improving the quality of webpages.

打开Chrome DevTools时 ，您将在上图中看到该突出显示的标签。 它是什么？ 它是Lighthouse ，一个用于改善网页质量的开源自动化工具。

By default, it measures performance, progressive web app, best practices, accessibility, and search engine optimization (SEO), although you can adapt them to your needs by checking and unchecking items in Categories.

默认情况下，它可以衡量性能，渐进式Web应用程序，最佳实践，可访问性和搜索引擎优化(SEO)，尽管您可以通过选中和取消选中类别中的项目来使它们适应您的需求。

We chose the Device type to be Desktop for our use cases.

对于我们的用例，我们选择设备类型为桌面。

There is also the ‘Clear storage’ button at the top-left corner. It has been hidden well, but we found the setting button to unhide it at the top-right corner. It has been unchecked. Otherwise, it ends up testing login pages with user information to be cleared.

左上角还有一个“清除存储”按钮。 它已经很好地隐藏了，但是我们在右上角找到了取消隐藏它的设置按钮。 尚未选中。 否则，它将最终测试登录页面以及要清除的用户信息。

Lighthouse is easy to use, and it produces quite accurate measuring data. Following the suggestion in the report card, we can improve performance, accessibility, and other aspects of webpages. It is a highly recommended tool for web developers.

Lighthouse易于使用，并且可以生成非常准确的测量数据。 按照报告卡中的建议，我们可以改善网页的性能，可访问性和其他方面。 强烈建议Web开发人员使用此工具。

衡量一个网站 (Measure a Website)

Let’s measure the Lighthouse website using Lighthouse:

让我们使用Lighthouse测量Lighthouse网站 ：

After clicking the ‘Generate report’ button, it produces the following report card for the selected webpage:

单击“生成报告”按钮后，它将为所选网页生成以下报告卡：

The scores are colored according to these ranges:

分数根据以下范围着色：

• 0 - 49 (red): Poor
  0-49(红色)：较差
• 50 - 89 (orange): Needs improvement
  50-89(橙色)：需要改进
• 90 - 100 (green): Good
  90-100(绿色)：良好

To provide a good user experience, websites should strive to have a score above 90.

为了提供良好的用户体验，网站应力争得分超过90。

We go through each section to see how to interpret these scores.

我们遍历每个部分，以了解如何解释这些分数。

表现分数 (Performance score)

The above is the performance scorecard, which is composed of six metrics:

上面是性能记分卡，它由六个指标组成：

• First Contentful Paint: It marks the time at which the first text or image is painted.
  第一个内容丰富的绘画：它标记了第一个文本或图像的绘画时间。
• Speed Index: It shows how quickly the contents of a page are visibly populated.
  速度索引：显示页面内容的可见速度。
• Largest Contentful Paint: It marks the time at which the largest text or image is painted.
  内容最大的涂料：它标记了最大的文字或图像的绘制时间。
• Time to Interactive: It is the amount of time it takes for the page to become fully interactive.
  互动时间：页面完全互动所花费的时间。
• Total Blocking Time: It is the sum of all time periods between First Contentful Paint and Time to Interactive.
  总阻止时间：这是“第一个内容丰富的绘画”与“互动时间”之间的所有时间段的总和。
• Cumulative Layout Shift: It measures the movement of visible elements within the viewport.
  累积布局偏移：它测量视口内可见元素的移动。

Under the Metrics section, there are a number of snapshots to show how this webpage gets loaded. Clicking the View Trace button will go to the Performance tab where loading details are traced:

在“指标”部分下，有许多快照来显示如何加载此网页。 单击“查看跟踪”按钮将转到“性能”选项卡，在其中跟踪加载详细信息：

The above table includes rich information. For example, if we go to Largest Contentful Paint area, we can zoom in and find out the animation loading time.

上表包含丰富的信息。 例如，如果我们转到内容最大的绘画区域，则可以放大并找出动画的加载时间。

‘Opportunities’ in the scorecard are suggestions to help the page loading faster. One of the suggestions is about properly sizing images. Open this item, and we see the five largest images:

计分卡中的“机会”是帮助您更快地加载页面的建议。 建议之一是适当调整图像大小。 打开此项目，我们看到五个最大的图像：

Click on the link of the largest image. It’s a surprise to find out the Men’s Outerwear advertisement.

单击最大图像的链接。 找出男士外套广告真是令人惊讶。

Rerunning the report, surprisingly, we get a performance score of 100. Running it again, the score comes back to around 82.

令人惊讶的是，运行该报告，我们获得了100分的性能得分。再次运行该报告，得分回到了82分左右。

What happened?

发生了什么？

There are many facts that affect the score. It is possibly caused by A/B tests, changes in the advertisement being served, internet traffic routing changes, etc.

有许多因素会影响得分。 这可能是由于A / B测试，所投放广告中的更改，互联网流量路由更改等引起的。

辅助功能得分 (Accessibility score)

The above is the accessibility scorecard, which displays accessibility opportunities. Here it shows two ARIA improvement recommendations and one suggestion for contrast colors.

上面是可访问性记分卡，其中显示了可访问性机会。 这里显示了两个ARIA改进建议和一个对比色建议。

This is a list of passed audits:

这是通过审核的列表：

Another list of not applicable items:

另一个不适用项的列表：

Together, it exhibits all the accessibility criteria used by Lighthouse. It captures most of the measurements mentioned in 10 Steps to Building Web Applications With Accessibility (a11y).

它们一起显示了Lighthouse使用的所有可访问性标准。 它捕获了构建具有可访问性的Web应用程序的10个步骤(a11y)中提到的大多数度量。

最佳做法得分 (Best practices score)

The above is the best practices scorecard, which checks opportunities to improve the overall code health of webpages.

以上是最佳做法记分卡，用于检查改善网页总体代码运行状况的机会。

It points out two issues: Some cross-origin destinations are unsafe, and there are a number of browser errors.

它指出了两个问题：一些跨域目标不安全，并且存在许多浏览器错误。

The passed audits show what other things are verified against best practices:

通过的审核显示了针对最佳实践还验证了其他哪些内容：

• Uses HTTPS
  使用HTTPS
• Avoids requesting geolocation permission on page load
  避免在页面加载时请求地理位置许可
• Avoids requesting notification permission on page load
  避免在页面加载时请求通知权限
• Avoids front-end JavaScript libraries with known security vulnerabilities
  避免具有已知安全漏洞的前端JavaScript库
• Allows users to paste into password fields
  允许用户粘贴到密码字段中
• Displays images with the correct aspect ratio
  以正确的纵横比显示图像
• Displays images with the appropriate size
  以适当的尺寸显示图像
• Page has the HTML doctype
  页面具有HTML文档类型
• Properly defines charset
  正确定义字符集
• Avoids application cache
  避免应用程序缓存
• Detected JavaScript libraries
  检测到JavaScript库
• Avoids deprecated APIs
  避免使用过时的API

SEO分数 (SEO score)

The above is the search engine optimization scorecard, which checks whether the page is optimized for search engine results ranking.

上面是搜索引擎优化计分卡，它检查页面是否针对搜索引擎结果排名进行了优化。

These are criteria used by Lighthouse:

这些是Lighthouse使用的标准：

• Has a <meta name=”viewport”> tag with width or initial-scale (mobile friendly)

  具有宽度或初始比例的<meta name=”viewport”>标签(适合移动设备)

• Document has a <title> element

  文档具有<title>元素

• Document has a meta description
  文档具有元描述
• Page has successful HTTP status code
  页面具有成功的HTTP状态代码
• Links have descriptive text
  链接具有描述性文字
• Page isn’t blocked from indexing
  没有阻止页面建立索引

• robots.txt, a file tells search engines which pages can be crawled, is valid

  robots.txt (该文件告诉搜索引擎可以抓取哪些页面)有效

• Image elements have [alt] attributes

  图像元素具有[alt]属性

• Document has a valid hreflang

  文件包含有效的hreflang

• Document has a valid rel=canonical, which tells search engines that it is the same as the canonical URL

  文档具有有效的rel=canonical ，它告诉搜索引擎它与规范URL相同

• Document avoids plugins
  文档避免插件
• Document uses legible font sizes
  文档使用清晰的字体大小
• Tap targets are sized appropriately
  分接目标的大小适当

PWA分数 (PWA Score)

The above is the progressive web app scorecard, which provides insights and feedback on a web app for PWA features. It provides a set of metrics to help build a PWA for the full application-like experience.

上面是渐进式Web应用程序记分卡，它提供了有关PWA功能的Web应用程序的见解和反馈。 它提供了一组度量标准来帮助构建PWA，以获得完整的类似于应用程序的体验。

Lighthouse tests applicable PWA criteria:

Lighthouse测试适用的PWA标准：

• Starts fast and stays fast
  快速启动并保持快速
• Is installable
  可安装
• Works in any browser
  在任何浏览器中均可使用
• Responsive to any screen size
  响应任何屏幕尺寸
• Provides a custom offline page
  提供自定义的离线页面
• Is fully accessible
  完全可访问
• Can be discovered through search
  可以通过搜索发现
• Works with any input type, such as a mouse, a keyboard, a stylus, or touch
  适用于任何输入类型，例如鼠标，键盘，手写笔或触摸
• Provides context for permission requests
  提供权限请求的上下文
• Follows best practices for healthy code
  遵循最佳实践以获取健康代码

结论 (Conclusion)

Lighthouse is a useful tool to measure and optimize our products. It is a click away with Chrome DevTools.

Lighthouse是衡量和优化我们产品的有用工具。 单击即可使用Chrome DevTools。

It is also available as a command-line tool or as a node module:

它也可以作为命令行工具或节点模块使用：

npm install -g lighthouse
lighthouse --help
or npm install --save-dev lighthouse

In addition, Lighthouse CI is a suite of tools that enable continuously running, saving, retrieving, and asserting against Lighthouse results.

此外， Lighthouse CI是一套工具，可以连续运行，保存，检索和声明灯塔结果。

Are you ready to try it out?

您准备好尝试了吗？

Thanks for reading. I hope this was helpful. You can see my other Medium publications here.

谢谢阅读。 我希望这可以帮到你。 您可以在这里查看我的其他Medium出版物。

翻译自: https://medium.com/better-programming/lighthouse-a-performance-and-optimization-tool-for-webpages-e0b4eeaef3e4

lighthouse工具