乐趣区

关于前端:页面加载性能之Web-Vitals

jiezi

前言

Web Vitals 是谷歌针对网页加载速度和体验所提出的一套指标，这套指标用于测试网页的加载速度及用户体验等等；谷歌基于这套指标不仅设计了多套测试工具，还针对各种指标提出了相应的优化办法，具备很高的实用价值。

Web Vitals 外围指标

所谓的外围指标就是 Web Vitals 中心愿所有人都可能引起器重的三个指标，当然也是最重要的三个指标，因为对网页加载速度和用户体验感的影响很大。


下面的表格就是各项指标的评判规范，其中冀望覆盖率指的是至多有相应百分比的用户测试能够达到 GOOD 规范。

LCP

概念
LCP（Largest Contentful Paint），即最大内容渲染，指的是视窗（viewport）内所有可见元素中尺寸最大的文本块或图像所需的渲染工夫；

与之相近的一个指标是 FCP（First Contentful Paint），该指标是用于检测第一个文本块或者图像渲染实现的工夫，侧重点不同

指标作用

这个指标次要是用来弄清用户所看到的页面主体内容何时被渲染进去，之前也有相应的指标用于类似的目标，然而实际上存在很多的有余：

  • load 和 DOMContentLoaded 事件只是反馈了代码层面的加载工夫结点，而非实在用户所关注的屏幕页面渲染成果，因而很不精确；
  • 而 FCP 指标也只是关注了最初始的渲染成果，和用户关怀的页面整体成果也相差甚远；
  • 前面提出用于关注初始渲染状态之后的加载成果的指标——FMP（First Meaningful Paint）和 SI（Speed Index），经实践证明成果不太行，常常出错，而且这两个指标计算很简单也很难去解释；

因为存在上述问题，Web Vitals 基于 W3C 的相干探讨 [3] 以及谷歌外部的一些钻研得出了一个论断：
如何寻找最大的元素？
因为 LCP 关怀的只是文本块及图像，因而寻找的元素结点限定为：

  • img 元素
  • svg 元素中的 image 元素
  • 带 poster 属性的 video 元素
  • 用 url()办法加载背景图的元素
  • 蕴含文本节点或其它内联文本节点的块级元素

限定了元素范畴后，接下来就是从这些元素中找出尺寸最大的元素了，那么如何计算这些元素结点的大小？这里的尺寸大小计算遵循以下准则：

  • 尺寸大小实际上以渲染实现后的大小为准
  • 尺寸不包含 padding，border 和 margin，能够了解为 content-box 的大小

因为图片资源须要异步加载实现后才会进行渲染以及 js 代码批改 DOM 构造和属性等因素的存在，因而这个最大渲染元素可能会产生扭转，所以最大渲染元素的检测须要首屏渲染实现后能力最终确认；

FID

概念
FID（First Input Delay），即第一次输出事件提早，指的是用户第一次交互事件触发到主线程接管事件而后反馈之间的工夫；
指标作用
这个指标次要是从交互响应层面来量化用户对页面的第一印象；

因为新用户对一个网页的第一印象好坏对用户忠诚度影响很大，而第一印象除了网页的加载速度，还与第一次交互时的响应速度有着很大的关系；

这里的提早指的就是用户交互触发的事件到主线程接管事件之间的提早，也就是用于判断对于第一次交互时主线程的阻塞水平，提早越低阐明主线程比拟闲暇，也就利于用户对页面的交互响应速度；

至于为何只关注事件之间的延迟时间，而不是延迟时间 + 事件执行耗时 + UI 状态更新耗时的形式，官网给出的解释是：

Even though this time is important to the user and does affect the experience, it’s not included in this metric because doing so could incentivize developers to add workarounds that actually make the experience worse—that is, they could wrap their event handler logic in an asynchronous callback (via setTimeout() or requestAnimationFrame()) in order to separate it from the task associated with the event. The result would be an improvement in the metric score but a slower response as perceived by the user

因为开发者可能为了更好的测试分数而去强行拆分工作到其余线程，从而导致更糟的交互体验；

CLS

CLS（Cumulative Layout Shift），即累积布局偏移，指的是首屏页面渲染过程中所有元素结点绝对原始地位所产生的地位偏移累积量；

指标作用

该指标次要是为了量化渲染过程中的视觉稳定性（visual stability）；因为渲染过程或者交互过程中产生的非用户期待的视觉扭转行为会影响用户的应用满意度，而布局偏移就是其中一种很常见的景象，经常出现在：

  • img/video 等媒体元素未指定尺寸，当资源加载实现后渲染尺寸产生扭转，通常体现为忽然地闪变，以及影响四周元素的地位变动
  • 插入一些 DOM 结点，导致用户本来关注的区域忽然偏移

如何计算 CLS？

能够看出影响 CLS 计算值有两个因素：

  • impact fraction：影响因子，这个参数次要是掂量相邻两个绘制帧之间不稳固元素（即地位产生扭转的元素）所带来的影响；计算方法为所有不稳固元素在可视区域内的面积总和（扣除重叠的局部）占视窗面积的比值；
  • distance fraction：间隔因子，这个参数次要是掂量不稳固元素挪动的间隔；计算方法为取所有不稳固元素中偏移量（竖直及程度方向）最大的值除以视窗尺寸维度最大的值；依据上例，其间隔因子就是 0.25；

依据影响因子和间隔因子的概念及计算方法，联合上图示例能够得悉，以后帧的布局偏移分数为 0.75 * 0.25 = 0.1875；而最终的 CLS 值则是所有绘制帧失去的布局偏移分数之和。

如何晋升外围指标？

上述的三个外围指标，官网都给出了具体的晋升领导文档：

  • https://web.dev/optimize-lcp/
  • https://web.dev/optimize-cls/
  • https://web.dev/optimize-fid/

Web Vitals 其它指标

其它的一些指标能够作为外围指标的补充，以更加精准地去定位一些性能及体验问题；

  • TTFB（Time to First Byte）：用户浏览器从开始加载网页内容到接管到第一个字节的网页内容之间的耗时，该指标次要侧重于网页加载体验；
  • FCP（First Contentful Paint）：从开始加载网页内容到第一个文本块或者图像渲染实现之间的耗时，该指标次要侧重于网页加载体验；
  • TTI（Time to Interactive）：从开始加载网页内容到开始有足够快的用户交互反应速度时之间的耗时，该指标次要侧重于网页加载体验；个别这个“有足够快的用户交互反应速度”指的就是 FCP 后长工作（long task，大于 50ms 的主线程工作）都执行结束后，实际上就是主线程开始闲暇，那天然就对用户交互就有很快的反应速度；能够看下官网文档的 TTI 计算步骤图[6]：

  • TBT（Total Blocking Time）：FCP 到 TTI 之间阻塞主线程的总耗时，所谓的阻塞就是长工作，而单个长工作的阻塞工夫就是工作耗时 – 50ms；该指标次要侧重于网页加载体验，用于量化主线程阻塞的重大水平；

Web Vitals 指标剖析
光有有指标还不行，理论应用时还须要一个工具集成上述指标来对指标网页进行剖析失去数据才行，值得庆幸的是谷歌官网曾经给出了多个相应的测试剖析工具，能够疾速的上手：

下面就是几种罕用的 Web Vitals 指标剖析工具，其中比拟举荐的是 PageSpeed Insights 和 chrome 浏览器内置的 Lighthouse，因为这两个工具关上即可应用，而且没有代码侵入性，并且会有相应指标的改良倡议；
然而 Lighthouse 没有 FID 指标的剖析，不过能够应用相近的 TBT 进行代替；

国内网站测试

  • 京东挪动端网页（https://m.jd.com/）：

  • 淘宝桌面版网页（https://world.taobao.com/）：

相干文档

  • First Contentful Paint (FCP)：FCP 指标解读
  • Reduce server response times (TTFB)：TTFB 指标解读
  • Total Blocking Time (TBT)：TBT 指标解读
  • https://web.dev/vitals/
  • https://web.dev/lcp/#measure-…
  • https://www.w3.org/webperf/
  • https://note.xiexuefeng.cc/po…
退出移动版