接下来Lighthouse(灯塔)：阅读完本文，你可以了解到Lighthouse的一些点

　　

接下来Lighthouse(灯塔)：阅读完本文，你可以了解到Lighthouse的一些点

　　

　　前言

　　我最近制作了性能测试工具。很多知识点不清楚。我打算检查缺陷并弥补它们。

　　接下来我们从官方的性能检测工具Lighthouse（灯塔）开始我们的研究，简单介绍一下Lighthouse的一些要点。

　　看完这篇文章你就明白了

　　什么是灯塔

　　官方解释：

　　Lighthouse 是一种开源自动化工具，用于提高网络应用程序的质量。您可以将其作为 Chrome 扩展程序或从命令行运行。您向 Lighthouse 提供要查看的 URL。它将在此页面上运行一系列测试，然后生成有关页面性能的报告。

　　它是如何工作的？

　　如果你和我一样，如果你仔细看它的代码，读它的介绍一定很艰巨。其代码依赖如下：

　　

　　Lighthouse 内部模块依赖

　　有兴趣的可以去看看它的仓库。已给出参考链接。

　　开始

　　Lighthouse 有两种运行方式：作为 Chrome 扩展程序运行，或作为命令行工具运行。 Chrome 扩展程序提供了一个更加用户友好的界面，便于阅读报告。命令行工具允许您将 Lighthouse 集成到持续集成系统中。

　　Chrome 扩展程序

　　下载 Google Chrome 52 或更高版本。

　　安装 Lighthouse Chrome 扩展程序。

　　地址：

　　单击“生成报告”按钮以针对当前打开的页面运行 Lighthouse 测试。

　　命令行工具

　　Node CLI 在配置和报告 Lighthouse 的操作方面提供了最大的灵活性。如果用户需要更高级的功能，或者想要自动运行 Lighthouse，他们可以使用 Node CLI。将 Lighthouse 安装为全局节点模块。

　　安装：

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

　　对页面运行 Lighthouse 审核。

　　lighthouse https://www.example.com --view 

　　传递 --help 标志以查看可用的输入和输出选项。

　　lighthouse --help 

　　对于一些不清楚的选项，您可以点击此链接：

　　#cli-options

　　假设经过我们审核，会有这样的结果：

　　

　　新指标

　　总共可以看到 6 个指标，Lighthouse 6.0 在报告中引入了三个新指标。 Core Web Vitals 实验室实施了两项新指标——最大内容图片 (LCP) 和累积布局偏移 (CLS)。

　　接下来，让我们看看这些 Metrics 指标的含义。

　　几个指标指标 First Contentful Paint (FCP)

　　第一个内容丰富的绘画 (FCP) 指标衡量页面内容的任何部分从加载页面开始显示在屏幕上所需的时间。对于该指标，“内容”是指文本、图像（包括背景图像）、svg 元素或非白色画布元素。

　　

　　FCP

　　在上面的加载时间轴中，FCP 发生在第二帧，就像呈现在屏幕上的第一个文本和图像元素一样。

　　您会注意到，虽然部分内容已呈现，但并非所有内容均已呈现。这是 First Contentful Paint (FCP) 和 Largest Contentful Paint (LCP) 之间的一个重要区别——LCP 的目的是衡量页面的主要内容何时完成加载。

　　了解概念，如何测量FCP，我们可以联系Field tools和Lab tools

　　要在 JavaScript 中测量 FCP，您可以使用 Paint Timing API。以下示例展示了如何创建一个 PerformanceObserver，它侦听名为 first-contentful-paint 的绘制条目并将其记录到控制台。

　　new PerformanceObserver((entryList) => {   for (const entry of entryList.getEntriesByName('first-contentful-paint')) {     console.log('FCP candidate:', entry.startTime, entry);   } }).observe({type: 'paint', buffered: true}); 

　　速度指数

　　速度指数是 Lighthouse 报告的性能部分中跟踪的六个指标之一。每个指标都可以反映页面加载速度的某些方面。

　　那么它是如何被检测到的？

　　速度指数衡量页面加载过程中内容的视觉显示速度。 Lighthouse 首先捕获浏览器中页面加载的视频，并计算帧之间的视觉进度。然后，Lighthouse 使用 Speedline Node.js 模块生成速度指数分数。

　　具体的计算可以参考GitHub中的代码，这里不再展开。

　　那么我们有机会提高其性能吗？

　　使用 Lighthouse 报告的“机会”部分来确定哪些改进对您的网页最有价值。机会越重要，对绩效得分的影响就越大。例如，下面的 Lighthouse 屏幕截图显示，消除渲染阻塞资源将带来最大的改进。

　　

　　速度指数

　　最大的内容绘制 (LCP)

　　最大内容绘制 (LCP) 指标报告视口中可见的最大图像或文本块的渲染时间，相对于页面首次开始加载的时间。

　　

　　LCP

　　从图中可以看出，为了提供良好的用户体验，网站应该努力让最大内容帧达到2.5秒以内。

　　更多信息，请观看 Paul Irish 对 LCP 的深入分析。

　　累积布局偏移 (CLS)

　　官方解释：

　　Cumulative Layout Shift (CLS) 是一种视觉稳定性的测量方法，它量化了页面内容的视觉移动程度。它量化了页面内容在视觉上移动的程度。

　　简单的理解是：

　　CLS 衡量在整个页面生命周期中发生的每个意外布局转换的所有单独布局转换得分的总和。

　　每当可见元素从一个渲染帧更改其位置到下一个渲染帧时，就会发生布局偏移。关于如何计算单个布局偏移分数，请参见下文）。

　　

　　CLS

　　从上图中可以看出，CLS 分数低是向开发者发出的信号，表明他们的用户没有经历过不必要的内容移动；低于0.10 的 CLS 分数被认为是“好”。

　　总阻塞时间 (TBT)

　　先来看看官方的解释：

　　总阻塞时间 (TBT) 量化负载响应能力并测量主线程阻塞足够长以防止输入响应的总时间。 TBT 测量第一次内容绘制 (FCP) 和交互时间 (TTI) 之间的总时间。它是TTI的一个支撑指标，它给量化主线程的活动带来了更多的细微差别，阻碍了用户与您的页面进行交互的能力。

　　此外，TBT与核心网络活力的现场指标首次输入延迟（FID）有很好的相关性。

　　更多信息，请参考链接：

　　最新评分标准

　　Lighthouse 中的性能得分是通过对多个指标进行加权和混合来总结一个页面的速度来计算的。 6.0 的性能得分公式如下。

　　

　　你会像我一样吗？如果您有疑问，我们无法修改此权重。当然，你可以试试：

　　点击上面的链接，将显示此屏幕：​​

　　

　　评分计算器

　　这个网站发布了一个评分计算器，帮助你了解性能评分。同时，计算器还可以为您提供 Lighthouse 5 和 6 版本的评分对比。使用Lighthouse6.0版本进行审计时，报告中会有计算工具链接，填写结果。

　　总结

　　到这里，其实Lighthouse的使用方法以及一些关键指标也已经说明了。您一定有疑问：

　　看到这里，你遇到的疑惑和之前一样，请问如何解决。

　　嗯，上面提到的部分没有详细展开。剩下的部分，尽量翻阅官方文档，查资料。回报一定很大。

　　我是天天向上，下期见！！！

　　参考

　　[1] 灯塔性能评分：

　　[2] GoogleChrome 灯塔：

　　[3] Lighthouse 6.0 的新变化：

　　[4] 测量：

　　[5] 灯塔是如何工作的？：

　　[6] 最大的内容绘制 (LCP)：

　　[7] 总阻塞时间 (TBT)：

　　[8] 累积布局偏移 (CLS)：

　　[9] 首次内容绘制 (FCP)：

　　[10]速度指数：

　　[编辑推荐]

　　在 Ubuntu Linux 上安装 Windows 10 的最简单方法。 9条Linux常用查看系统硬件信息命令（详细例子）告诉你为什么那么多人在炒币？推荐10个10万星的GitHub开源项目，连Excel都吃亏了！ WPS的这些功能你都知道吗