前端主要性能的相关指标

由Goofy发布在JavaScript

这里主要以谷歌的技术文章为依据，此处主要是对参考文章的总结和摘要。

https://web.dev/metrics/ 中已经有更细节的指标描述，而且做了中文版本的翻译，方便大家更好的学习和参考。

定义指标

为了确保用户体验，我们通常围绕以下问题来进行性能的相关优化：

Is it happening?发生了么Did the navigation start successfully? Has the server responded?导航是否成功启动？服务器响应了吗？
Is it useful?是有用的么Has enough content rendered that users can engage with it?是否渲染了足够的内容给用户？
Is it usable?可以使用了么Can users interact with the page, or is it busy?用户可以与页面进行交互，还是页面仍在忙碌中？
Is it delightful?流畅么Are the interactions smooth and natural, free of lag and jank?交互是否流畅，没有延迟和卡顿？

如何度量

  • 通过实验环境进行测试
  • 通过实际生产环境进行测试

指标类型

  • 感知的加载速度：页面加载并将其所有可视元素呈现到屏幕的速度。
  • 加载响应度：页面加载和执行任何必需的JavaScript代码以使组件快速响应用户交互的速度
  • 运行时响应性：页面加载后，页面对用户交互的响应速度有多快。
  • 视觉稳定性：页面上的元素是否会造成用户不期望的方式移动，并可能干扰他们的交互？
  • 平滑度：过渡和动画是否以一致的帧速率渲染并从一种状态流畅地流动到另一种状态？

重要的衡量指标

  • First contentful paint (FCP): measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen. (lab, field)
    • 第一个内容的绘制：测量从页面开始加载到屏幕上呈现页面内容的任意部分的时间。
  • Largest contentful paint (LCP): measures the time from when the page starts loading to when the largest text block or image element is rendered on the screen. (lab, field)
    • 最大内容的绘制：测量从页面开始加载到屏幕上最大的文本块或图像元素被渲染的时间。
  • First input delay (FID): measures the time from when a user first interacts with your site (i.e. when they click a link, tap a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction. (field)
    • 首次输入的延迟：测量从用户第一次与您的站点交互（即，当他们单击链接、点击按钮或使用自定义的、JavaScript驱动的控件）到浏览器实际能够响应该交互的时间。
  • Time to Interactive (TTI): measures the time from when the page starts loading to when it’s visually rendered, its initial scripts (if any) have loaded, and it’s capable of reliably responding to user input quickly. (lab)
    • 互动时间：衡量从页面开始加载到可视化呈现之间，它的初始脚本（如果有）已加载以及可以可靠快速地响应用户输入的时间。
  • Total blocking time (TBT): measures the total amount of time between FCP and TTI where the main thread was blocked for long enough to prevent input responsiveness. (lab)
    • 总阻塞时间：测量FCP和TTI之间的总时间。如果主线程被阻塞的时间足够长，会阻止输入响应。
  • Cumulative layout shift (CLS): measures the cumulative score of all unexpected layout shifts that occur between when the page starts loading and when its lifecycle state changes to hidden. (lab, field)
    • 累积布局偏移：衡量在页面开始加载到页面生命周期状态 变为隐藏之间发生的所有意外布局转移的累积分数。
    • 这个性能分数和其他指标不太一样，该指标依赖视觉及交互相关的设计
    • 计算公式：layout shift score = impact fraction * distance fraction
  • Frames Per Second(FPS): 是指画面每秒传输帧数
该处的内容会有一个专题来描述每个指标具体怎么看。

指标的参考值

注意参考值中的“参考”，表示以下标准适用于大多数场景，但具体情况仍需要具体分析，不可一概而论。

  • FCP：1秒内
    • To provide a good user experience, sites should strive to have First Contentful Paint occur within 1 second of the page starting to load. To ensure you’re hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.
  • LCP：2.5秒内
    • To provide a good user experience, sites should strive to have Largest Contentful Paint occur within the first 2.5 seconds of the page starting to load. To ensure you’re hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.
  • FID：100毫秒以内
    • To provide a good user experience, sites should strive to have a First Input Delay of less than 100 milliseconds. To ensure you’re hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.
  • TTI：5秒内
    • To provide a good user experience, sites should strive to have a Time to Interactive of less than 5 seconds when tested on average mobile hardware.
  • TBT：300毫秒以内
    • To provide a good user experience, sites should strive to have a Total Blocking Time of less than 300 milliseconds when tested on average mobile hardware.
  • CLS：分数小于0.1
    • To provide a good user experience, sites should strive to have a CLS score of less than 0.1. To ensure you’re hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.
  • FPS: (注：该数据没有找到十分权威的来源，如果你有更权威的来源可以@feiyugao进行补充)
    • 在网页中，帧率能够达到50~60fps的动画将会相当流畅，让人倍感舒适。
    • 帧率在30～50fps之间的动画，因各人敏感程度不同，舒适度因人而异。
    • 帧率在30fps以下的动画，让人感觉到明显的卡顿和不适感。
    • 帧率波动很大的动画，亦会使人感觉到卡顿。

参考资料