Lighthouse

chrome提供了Lighthouse（旧版本是Audit）来判断我们网站的性能，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。

它为您创建了一个基准，可用来衡量随后的更改。
它为您提供了可行的提示，说明哪些更改将产生最大的影响。

Lighthouse面板

Simulated throttling

模拟在设备比较差的环境下网站的性能

Clear storage

清除缓存数据，模拟用户首次访问网站

Categories（生成一个有关下面选项性能的报告）禁用选项会稍微加快审核过程。
- Performance （性能）
- Progressive Web App（渐进式Web应用）
- Best practices（最佳做法）
- Accessibility（无障碍）
- SEO
Device（Mobile选项模拟移动视口（有网速的限制），Desktop禁止模拟移动视口）。
点击Generate report生成审计报告

Performance报告

下面我们来看看如何应用Performance评估我们网站的性能，Performance的性能指标由下图的6项指标构成

FCP (First contentful paint) ：

测量从页面开始加载到屏幕上呈现页面内容的任何部分的时间，快速的FCP有助于使用户确信某些东西发生。

LCP (Largest contentful paint)：

测量从页面开始加载到最大的文本块或图像元素在屏幕上呈现为止的时间。它可以用来确定页面的主要内容何时在屏幕上完成呈现。

TTI (Time to Interactive):

测量从页面开始加载到可视化呈现之间，它的初始脚本（如果有）已加载以及可以可靠地快速响应用户输入的时间。

TBT (Total blocking time)：

First contentful paint (FCP) + Time to Interactive (TTI) = Total blocking time (TBT)
，在该时间中，主线程被阻塞足够长的时间以防止输入响应。

CLS (Cumulative layout shift)：

CLS是衡量用户视觉稳定性的一项重要的以用户为中心的度量标准。

影响因素：页面内容的布局转换通常是由于异步加载资源或将DOM元素动态添加到现有内容上方的页面而发生的。罪魁祸首可能是尺寸未知的图像或视频，呈现比其后备更大或更小的字体，或者是动态调整自身大小的第三方广告或小部件。
布局转换：仅当现有元素更改其起始位置时，才会发生布局转换。如果将新元素添加到DOM或现有元素更改了大小，则只要更改不会导致其他可见元素更改其开始位置，该元素就不会算作布局偏移
如何减少布局移动：
- CSS transform属性使您可以为元素设置动画，而不会触发布局转换：
  - 使用transform: scale()来替代height 和 width属性的更改
  - 左右移动的元件，避免改变top，right，bottom，或left属性，并使用transform: translate()来代替。
良好的用户体验CLS得分不超过0.1分

更多CLS的内容请阅读：web.dev/cls/

Speed Index：

测量页面内容的可见填充速度。这是显示页面可见部分的平均时间。以毫秒为单位，取决于视口的大小，得分越低越好。

页面加载时的外观

Opportunities

在Opportunities提供了关于如何提高这个特定页面的加载性能的具体建议。我们可以根据建议修改我们的代码再重新检查页面性能有没有得到提升。

Diagnostics

Diagnostics部分提供了有关影响页面加载时间的因素的更详细信息。

Passed audits

Passed audits显示我们网站的情况

如何提升Performance

识别关键代码、删减非关键代码。
js优化，默认情况下，所有JavaScript都会阻塞解析器，所以js优化尤其重要
- 识别关键js代码后，将该代码内联到页面内。页面加载后，它将具有处理页面核心功能所需的内容。不是关键的js代码则通过URL方式引入。
- 非关键JS，我们可以向script 标记添加异步关键字可以指示浏览器在等待脚本可用期间不阻止DOM 构建如：<script src="https://juejin.cn/post/app.js" async></script>（但是要注意它是无顺序的，加了之后 script 加载执行不会按顺序）
- 拆分js
css优化，css的加载和解析都会阻塞解析器，所以css优化也很重要
- 识别关键css，将该css内联到页面内。不是关键的css则通过URL方式引入。
- 压缩css文件、缩小css体积
预加载关键资源

  <link rel="preload" as="script" href="https://juejin.cn/post/critical.js">
  <link rel="preload" as="style" href="https://juejin.cn/post/styles.css" >
复制代码

避免大量的网络负载
- 将请求推迟到需要时再发送
- 最小化和压缩网络负载
  - 压缩文件
  - http压缩，至少使用 gzip 来压缩基于文本的资源，考虑使用 Brotli ~q11。 Brotli 在压缩比率方面优于 gzip。
- 对图像使用WebP而不是JPEG或PNG。WebP图像比JPEG和PNG图像小（通常将文件大小减少25-35％）。这样可以减小页面大小并提高性能。
利用缓存
- DNS缓存
- CDN缓存
- 资源缓存
使用预渲染
避免多次页面重定向。重定向会降低您的页面加载速度。当浏览器请求已重定向的资源时，服务器通常返回如下HTTP响应：
```
  HTTP/1.1 301 Moved Permanently
  Location: /path/to/new/location
复制代码
```
然后，浏览器必须在新位置发出另一个HTTP请求以检索资源。跨网络的这种额外行程可能会使资源的加载延迟数百毫秒。
保持较低的请求数量和较小的传输量
减少服务器响应时间