解读新一代 Web 性能体验和质量指标Core Web Vita
Core Web Vitals
Core Web Vitals 是应用于所有 Web 页面的 Web Vitals 的子集，所有的站点开发者都应该关注一下，他们将在所有谷歌提供的性能测试工具中进行显示。每个 Core Web Vitals 代表用户体验的一个不同方面，在该领域是可衡量的，并反映了以用户为中心的关键结果的真实体验。
网页核心的性能指标应该是随着时间的推移而不断演变的。当前 2020 年主要关注用户体验的三个方面——加载、交互性和视觉稳定性:
Core Web Vitals
Largest Contentful Paint (LCP):衡量装载性能。为了提供良好的用户体验，LCP应该在页面首次开始加载后的2.5秒内发生。
First Input Delay (FID):衡量交互性。为了提供良好的用户体验，页面的FID应该小于100毫秒。
Cumulative Layout Shift (CLS)：测量视觉稳定性。为了提供良好的用户体验，页面应该保持CLS小于0.1。
LCP 加载体验的衡量
Largest Contentful Paint (LCP) 用于衡量标准报告视口内可见的最大内容元素的渲染时间。为了提供良好的用户体验，网站应努力在开始加载页面的前 2.5 秒内进行最大内容渲染 。
LCP 考虑哪些元素
LCP 目前并不会计算所有元素，因为这样会使这个指标变得非常复杂，它现在只关注下面的元素：
- <img> 元素
- <image>元素内的<svg>元素
- <video> 元素
- 通过 url() 函数加载背景图片的元素
- 包含文本节点或其他内联文本元素子级的块级元素。
改善 LCP
导致LCP较差的最常见原因是：
- 服务器响应时间慢
- 阻断渲染的 Javascript 和 CSS
- 资源加载时间慢
- 客户端渲染
所以我们从上面的角度去考虑改善 LCP：
优化服务器
衡量服务器相应时间有一个专门的指标：首字节相应时间（TTFB）是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了 TCP 连接时间，发送 HTTP 请求时间和获得响应消息第一个字节的时间。你可以尝试在下面几个方便优化 TTFB ：
- 缓存 HTML 离线页面，缓存页面资源，减少浏览器对资源的请求。
- 尽量减小资源阻断渲染：CSS 和 JavaScript 压缩、合并、级联、内联等等
- 对图片进行优化。转化图片的格式为 JPG 或者 WEBP 等等的格式，降低图片的大小，以加快请求的速度。
- 对 HTML 重写、压缩空格、去除注释等。减少 HTML 大小，加快速度。
- 使用 preconnect 尽快与服务器建立链接、使用 dns-prefetch 尽快进行 DNS 查找。
- 使用 CDN 加快请求速度
优化阻断渲染的资源
JavaScript 和 CSS 都是会阻断页面渲染的资源，需要尽可能的对 CSS 和 JavaScript 文件进行压缩、延迟加载首屏无需使用的 JavaScript、内联关键的 CSS 等来减小阻断时间。
优化资源加载时间
刚才我们上面提到的这些资源，如果在首屏进行渲染，则加载这些元素所花费的时间将直接影响 LCP 。
- <img> 元素
- <image>元素内的<svg>元素
- <video> 元素
- 通过 url() 函数加载背景图片的元素
- 包含文本节点或其他内联文本元素子级的块级元素。
你可以使用下面的手段进行优化：
- 对图片进行优化。转化图片的格式为 JPG 或者 WEBP 等等的格式，降低图片的大小。
- 对重要的资源进行预加载，比如为 style 标签添加 rel="preload" 属性
- 使用 Gzip 和 Brotli 压缩页面资源，降低传输时间
- 使用 service worker 缓存资源
服务端渲染
使用服务端渲染可以确保首先在服务器上呈现页面内容，可以有效改善 LCP，但是相比客户端渲染的缺点是会加大页面从而影响 TTFB、服务端渲染需要等待所有 js 执行完毕后才能相应用户输入，这会使交互体验变差。
FID 第一印象
FID（ First Input Delay） 即记录用户和页面进行首次交互操作所花费的时间 。FID 指标影响用户对页面交互性和响应性的第一印象。为了提供良好的用户体验，站点应努力使首次输入延迟小于 100 毫秒。
如何提高 FID
以下几个方面是提高 FID 的重要指标：
减少 JavaScript 执行时间
同上面改善 LCP 的方法：
- 缩小并压缩 JavaScript 文件
- 延迟加载首屏不需要的 JavaScript
- 尽量减少未使用的 polyfill
分解耗时任务
上面提到一个较长的耗时任务是影响 FID 的重要指标，任何阻塞主线程 50 毫秒或更长时间的代码段都可以称为“长任务”，我们可以将长的耗时任务拆分为较小的异步任务。
使用 Web Worker
主线程阻塞是输入延迟的主要原因之一。Web Workers 可以让你在与主执行线程分离的后台线程上运行 JavaScript，这样做的好处是可以在一个单独的线程中执行费时的处理任务，从而允许主（通常是UI）线程运行而不被阻塞。将非 UI 操作移至单独的工作线程可以减少主线程的阻塞时间，从而改善 FID 。
CLS 视觉稳定性
CLS 会测量在页面的整个生命周期中发生的每个意外的样式移动的所有单独布局更改得分的总和。布局的移动可能发生在可见元素从一帧到下一帧改变位置的任何时候。为了提供良好的用户体验，网站应努力使 CLS 分数小于 0.1 。
如何改善 CLS?
不要使用无尺寸元素
图像和视频等元素上始终需要包括 width 和 height 尺寸属性，现代浏览器会根据图像的 width 和 height 属性设置图像的默认长宽比，知道纵横比后，浏览器就可以为元素计算和保留足够的空间。
或者，使用 aspect-ratio 也可以提前指定宽高比:
img {
aspect-ratio: attr(width) / attr(height);
}
响应式的图片可以使用 srcset 定义图像，使浏览器可以在图像之间进行选择。
<img
width="1000"
height="1000"
src="puppy-1000.jpg"
srcset="puppy-1000.jpg 1000w,
puppy-2000.jpg 2000w,
puppy-3000.jpg 3000w"
alt="Name"
/>
-
永远不要在现有内容之上插入内容，除非是响应用户交互。这确保了预期的布局变化。
-
宁可转换动画，也不要转换触发布局变化的属性的动画。以一种提供从一个状态到另一个状态的上下文和连续性的方式动画转换
提前给广告位预留空间
很多页面广告都是动态插入的，所以一定要提前为广告位预留一定空间。
警惕字体变化
字体通常是大文件，需要一段时间才能加载，一些浏览器直到下载完字体后才呈现文本
font-display: swap 告诉浏览器默认使用系统字体进行渲染，当自定义字体下载完成之后再进行替换。
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/xxx.woff2) format('woff2');
font-display: swap;
}
与此同时，你可以使用 <link rel="preload"> 更早的加载字体文件。
获取 Core Web Vitals
web-vitals
npm install web-vitals
使用 Chrome 插件
Core Web Vitals Annotations可以帮助我们获取这些指标：
Core Web Vitals Annotations.png
这个插件有 CLS、FID、LCP 这三个核心指标，这样可以大大聚焦我们的关注度，降低理解成本。
- 绿色：指标达标
-
红色：指标不达标
同时还会在页面当中使用虚线框进行相关标记
image.png
- 紫色虚线框代表 LCP时间最多的元素
- 其他黄色，红色的虚线边框代表发生CLS的元素，颜色越红，代表偏移越高
参考
https://web.dev/vitals/
https://web.dev/lcp/
https://web.dev/fid/
https://web.dev/cls/
