前言WebVitals是谷歌提出的一套衡量网页加载速度和体验的指标。这组指标用于测试网页的加载速度和用户体验。开发了多套测试工具，针对各项指标提出了相应的优化方法，具有较高的实用价值。WebVitals核心指标所谓核心指标就是WebVitals中大家希望关注的三个指标。当然，它们也是最重要的三个指标，因为它们对网页加载速度和用户体验有很大的影响。上表是各项指标的判断标准，预期覆盖率是指至少有相应比例的用户测试能够达到GOOD标准。LCP概念LCP（LargestContentfulPaint），即最大内容渲染，是指视口中所有可见元素中最大的文本块或图像所需的渲染时间；一个类似的指标是FCP（FirstContentfulPaint）。Paint），该指标用于检测第一个文本块或图像渲染完成的时间，有不同的焦点指标。该指标主要用于查明用户看到的页面主要内容何时呈现。相应的指标也用于类似的目的，但实际上有很多不足：load和DOMContentLoaded事件只是在代码层面反映加载时间节点，而不是真实用户关注的屏幕页面的渲染效果，所以它们非常不准确；而FCP指标只关注初始渲染效果，与用户关心的页面整体效果相去甚远；用于关注初始渲染状态后加载效果的指标——FMP（FirstMeaningfulPaint）和SI（SpeedSpeed）是后面提出来的。Index），实践证明效果不是很好，经常出错，而且这两个指标的计算非常复杂，难以解释；由于以上问题，WebVitals基于W3C相关讨论[3]和Google内部的一些研究。一个结论：如何找到最大的元素？由于LCP只关心文本块和图片，所以搜索的元素节点仅限于：img元素、svg元素中的image元素、具有poster属性的video元素、使用url()方法加载包含文本节点或其他的背景图片元素内联元素文本节点的块级元素限制了元素的范围之后，接下来就是从这些元素中寻找最大的元素，那么如何计算这些元素节点的大小呢？这里的尺寸计算遵循以下原则：尺寸实际上是以渲染后的尺寸为准。大小不包括填充、边框和边距。可以理解为content-box的大小。由于图片资源需要异步加载，所以不会渲染。而js代码修改了DOM结构和属性，所以最大渲染元素可能会发生变化，所以最大渲染元素的检测需要在首屏渲染完成后完成；FID概念FID（FirstInputDelay），即第一个输入事件延迟，是指从用户第一次交互事件被触发到主线程收到事件然后响应之间的时间；指标功能该指标主要从交互响应层面量化用户对页面的第一印象；因为新用户对网页的第一印象对用户忠诚度有很大的影响，而第一印象不仅与网页的加载速度有关，还与第一次交易有关。相互时间的响应速度有很大关系；这里的延迟是指用户交互触发的事件到主线程接收到事件之间的延迟，用于判断第一次交互时主线程的阻塞程度，延迟值越低，主线程比较空闲，也有利于用户对页面的交互响应速度；至于为什么我们只关注事件之间的延迟时间，而不是延迟时间+事件执行时间+UI状态更新耗时的方式，官方给出的解释是：尽管这个时间对用户来说很重要并且确实会影响体验，但它未包含在该指标中，因为这样做可能会激励开发人员添加实际上会使体验变得更糟的变通办法——也就是说，他们可以将事件处理程序逻辑包装在异步回调中（通过setTimeout()或requestAnimationFrame())以便将其与与事件关联的任务分开。结果将是度量分数的提高，但用户感知到的响应变慢，因为开发测试人员可能会强行将任务拆分到其他线程以获得更好的测试分数，从而导致更差的交互体验；CLSCLS（CumulativeLayoutShift），即累积布局偏移，是指所有元素在首屏页面渲染过程中节点相对于原位置的累积位置偏移；指标函数该指标主要是量化渲染过程中的视觉稳定性（visualstability）；因为在渲染过程或者交互过程中出现了用户不期望的视觉变化行为，会影响用户的满意度，而布局偏移是非常普遍的现象之一。当img/video等媒体元素未指定大小时，通常会发生这种情况。资源加载时，渲染尺寸发生变化，通常是突然Flicker，影响周围元素的位置变化插入一些DOM节点导致用户最初关注的区域突然偏移。如何计算CLS？可见，影响CLS计算值的因素有两个：impactfraction：影响因子，该参数主要衡量两个相邻图框之间不稳定元素（即位置发生变化的元素）的影响；计算方法是可见区域内所有不稳定元素的面积之和（扣除重叠部分）与窗口面积之比；distancefraction：距离因子，该参数主要衡量不稳定元素的移动距离；计算方法是将所有不稳定元素中的偏移量（垂直和水平）的最大值除以窗口尺寸维度的最大值；根据上面的例子，距离因子是0.25；根据影响因子和距离因子的概念和计算方法，结合上图中的例子可知，当前帧的layoutoffsetscore为0.75*0.25=0.1875；最终的CLS值是所有绘图框得到的layoutoffsetscores的总和如何提高核心指标？针对以上三个核心指标，官方给出了详细的改进指导文档：https://web.dev/optimize-lcp/https://web.dev/optimize-cls/https://web.dev/optimize-fid/WebVitals其他指标其他指标可以作为核心指标的补充，更准确定位一些性能和体验问题；TTFB（TimetoFirstByte）：从用户浏览器开始加载网页内容到接收到网页内容的第一个字节之间所消耗的时间，该指标主要关注网页加载体验；FCP（FirstContentfulPaint）：从开始加载网页内容到完成第一个文本块或图像渲染所消耗的时间，该指标主要关注网页加载体验；TTI（TimetoInteractive）：从开始加载网页内容到用户交互响应速度足够快的耗时时间，该指标主要关注网页加载体验；一般这个“足够快的用户交互响应速度”是指FCP长任务（longtask，主线程任务大于50ms）执行完后，主线程实际上开始空闲，这自然对用户交互有很大的影响。响应速度快；可以看官方文档[6]中的TTI计算步骤图：TBT（TotalBlockingTime）：主线程在FCP和TTI之间阻塞的总时间。所谓阻塞就是一个长任务，单个长任务的阻塞时间就是任务时间-50ms；该指标主要关注网页加载体验，用于量化主线程阻塞的严重程度；WebVitals指标分析光有指标是不够的，在实际使用中还需要一个工具将以上指标综合起来分析目标网页得到数据，幸好Google给出了一些相应的测试分析工具，这可以快速使用：以上是几个常用的WebVitals指标分析工具，其中推荐的是PageSpeedInsights和chrome浏览器内置的Lighthouse，因为这两个工具打开后可以立即使用，并且没有代码入侵，会有相应指标的改进建议；但是Lighthouse没有FID指标的分析，但是可以用类似的TBTReplacement；国内网站测试京东手机网页（https://m.jd.com/）：淘宝桌面网页（https://world.taobao.com/）：相关文档FirstContentfulPaint(FCP):FCP指标解读Reduceserverresponsetimes(TTFB):TTFB指标解读TotalBlockingTime(TBT):TBT指标解读https://web.dev/vitals/https://web.dev/lcp/#measure-...https://www.w3.org/webperf/https://note.xiexuefeng.cc/po...
