skip to content
RIG BLOG

性能监控—Web Vitals

/ 4 min read

简述

在过去用于衡量高质量网站或者说评判web性能的指标太多,而且其中有些指标计算起来过于复杂,学习成本也高,所以google就站出来把这个指标进行了一个统一,建立了一个叫web vitals的web性能标准。核心Web指标的构成侧重于用户体验三个方面——加载性能、交互性和视觉稳定性。

https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZZU8Z7TMKXmzZT2mCjJU.svg https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iHYrrXKe4QRcb2uu8eV8.svg https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dgpDFckbHwwOKdIGDa3N.svg

Largest Contentful Paint (LCP)

最大内容绘制,用于测量加载性能,是可视区域内可见的最大图像或文本块完成渲染的相对时间,一般要求时间控制在2.5s之内。

https://www.notion.so/Web-Vitals-2da9f71d856c459a9fddd5db1a4692c2?pvs=4#05bbe0b82f934f4189f53c07ed6425cc

为什么是最大图像或者文本块呢?因为多种元素会让整个指标的计算变得复杂,google团队指出为了在初始阶段保持简洁,他们是有意将测量限制在这几个有限的类型中的。(比如:img、video、通过url函数加载背景图像的元素、包含文本节点或者其他行内文本节点元素块级元素)

对于所有元素,通过 CSS 设置的任何边距、填充或边框都不在考量范围内。

First Input Delay (FID)

首次输入延迟,测量交互性,最好能控制在100ms之内。从用户第一次与页面交互(例如点击链接或按钮)直到浏览器对交互作出响应,并实际能够开始处理事件处理程序所经过的时间。一般来说,发生输入延迟(又称输入延时)是因为浏览器的主线程正忙着执行其他工作,所以暂时无法响应用户。

https://web-dev.imgix.net/image/admin/krOoeuQ4TWCbt9t6v5Wf.svg

FID 只关注不连续操作对应的输入事件,如点击、轻触和按键。其他如滚动、缩放之类的操作属于连续操作FID不会进行监测。

Cumulative Layout Shift (CLS)

累积布局偏移量,测量视觉稳定性。是整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数。一般要求控制在0.1以内。

https://img-blog.csdnimg.cn/img_convert/cd8b911007476ca8340611e0bd867531.gif

当点击一个按钮或其他操作时,或将页面滑动到某一位置时,突然文本或按钮没有任何警告的移动,这对于用户来说体验是非常糟糕的,这主要可能是因为某些元素的动态加载,比较常见的大家可能会看到一些第三方广告。

那么这个分数是如何计算的呢?

$$ 布局偏移分数 = 影响分数 * 距离分数 $$