浏览器插件Lighthouse（查页面的性能指标）

前言

最近了解到了一个性能检测的工具，今天分享给大家，希望对大家能有一点帮助。

阅读完本文，你可以了解到

• Lighthouse 是什么。
• 如何安装Lighthouse (浏览器插件)。
• Lighthouse中的一些Metrics指标。

Lighthouse 是什么

官方对它的解读:

Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。 您可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。 您为 Lighthouse 提供一个您要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。

它是一个浏览器的插件，可以帮助你查看你所写的页面的性能指标。

如何安装Lighthouse (浏览器插件)

第一步：打开你的浏览器的插件扩展（在右上角三个点中查找）

第二步：点击获取Microsoft Edge 扩展按钮

第三步：搜索Lighthouse，点击获取按钮即可

第四步：使用Lighthouse，打开你想要检测的页面，按F12打开开发者工具，选择Lighthouse，点击分析页面负载，会重新加载页面，加载完毕以后，你就可以获取当前页面的性能报告了。

最后，你会得到下面的一份性能指标报告，会得出一个评分，评分越高证明性能越好。

Lighthouse中的一些Metrics指标。

First Contentful Paint (FCP)

第一次内容丰富的绘画(FCP)指标衡量了从页面开始加载到页面内容的任何部分呈现在屏幕上的时间。对于该指标，"内容 "指的是文本、图像（包括背景图像）、元素或非白色元素。

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

Speed Index

速度指数是Lighthouse报告中性能部分跟踪的六个指标之一。每项指标都能反映出页面加载速度的某些方面。
那么它是如何检测的呢？

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

Largest Contentful Paint (LCP)

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

Cumulative Layout Shift (CLS)

官方对它的解释:

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

简单理解就是:

CLS测量的是整个页面生命周期内发生的每一次意外布局转变的所有单个布局转变得分的总和。

Total Blocking Time (TBT)

我们看看官方对它的解读：

总阻塞时间（Total Blocking Time，TBT）量化了负载响应能力，测量了主线程被阻塞的时间长到足以阻止输入响应的总时间。TBT衡量的是第一次有内容的绘画（FCP）和交互时间（TTI）之间的总时间。它是TTI的配套指标，它为量化主线程活动带来了更多的细微差别，这些活动阻碍了用户与您的页面进行交互的能力。

最新评分标准

Metric Name	Metric Weight
First Contentful Paint (FCP)	15%
Speed Index (SI)	15%
Largest Contentful Paint (LCP)	25%
Time To Interactive (TTI)	15%
Total Blocking Time (TBT)	25%
Cumulative Layout Shift (CLS)	5%