跳到主要内容

初探 webvitals

· 阅读需 2 分钟

web-vitals是Google发起的,旨在提供各种质量信号的统一指南,我们相信这些质量信号对提供出色的网络用户体验至关重要。多年来,Google 提供了许多性能测量和性能报告工具。一些开发者对这些工具的使用十分在行,而另一些开发者则发现大量的工具和指标令人应接不暇。

总之,Web Vitals则是希望提出一些标准,来帮助开发者去测量,优化页面,给到用户更好的体验。

简单介绍六个指标

  1. FCP-反映的是从页面开始加载到页面视口上最大的图片或者文本块渲染的时间。
  2. TTI-反映从页面加载开始到页面处于完全可交互状态所花费的时间。
  3. Speed Index-页面内容可见填充的速度。
  4. TBT-测量首次内容绘制 (FCP)首次内容绘制和 (TTI)之间的总时间,这期间,主线程被阻塞的时间过长,无法作出输入响应。
  5. LCP-最大内容绘制,用于监控网页可视区内“绘制面积”最大的元素开始呈现在屏幕上的时间点。
  6. CLS-反映网页布局在加载期间的偏移量。得分范围是 0–1,其中 0 表示没有偏移,1 表示最大偏移。