前端性能指标学习

最后更新时间：2024年06月23日

web核心性能指标（Core Web Vitals）

Web Vitals是谷歌开发的一系列指标，用于从不同方面去衡量网页的性能。而Core Web Vitals是Web Vitals的一个子集，包含了3个需要特别关注的指标，它们在谷歌搜索算法中扮演着一定的角色，并能够改善网站在谷歌搜索中的权重。

LCP（Largest Contentful Paint，最大内容绘制）

概念

LCP用于用于测量用户感知到的页面加载速度，指从页面开始加载到页面中最大的内容元素被渲染到屏幕上的时间点。这个最大的内容元素可能是图片、视频、SVG、含有背景图的元素、包含文本节点或其它含有文本子元素的块级元素。需要注意的是，随着页面的不断加载，页面中的最大内容元素可能会发生变化，因为更大的内容元素可能还未加载，因此LCP在页面加载过程中也会不断更新直至页面加载完毕。

LCP包含从上一个网页开始的所有卸载时间、连接设置时间、重定向时间和首字节时间（TTFB）。

测量方式

通过PerformanceObserver监测LCP：

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

根据LCP的定义，随着网页的加载以上代码会获取到多个startTime值，而所获取到的最后一个值便是页面的LCP值。

通过web-vitals监测LCP：

import {onLCP} from 'web-vitals';

// Measure and log LCP as soon as it's available.
onLCP(console.log);

为获取更精确的LCP，推荐使用第二种方式，详见Web.dev。

指标分数

为提供良好的用户体验，网站应努力将Largest Contentful Paint控制在2.5s以内。为确保大多数用户都达到此目标，最好衡量一下网页加载的第 75 个百分位（按移动设备和桌面设备细分）。

INP（Interaction to Next Paint，下一次绘制的交互）

概念

INP衡量页面在整个生命周期中的交互能力（响应能力），通过观察用户在访问网页期间发生的所有点击、点按和键盘互动的延迟时间，评估网页对用户互动的总体响应情况。INP的计算方法是观察用户与网页进行的所有交互并记录延迟时间，最终INP值是观测到的最长交互时间，离群值会被忽略。对于大多数网站来说，延迟时间最长的交互就是INP，但对于包含大量交互的页面来说可能会不准确，因此INP在计算过程中会忽略达到50次交互中的延迟最长的一次交互。

根据INP的定义，只会监测以下类型的交互：

  • 使用鼠标点击。
  • 点按带有触摸屏的设备。
  • 按实体键盘或屏幕键盘上的某个键。

如果页面一直未接收到以上类型的交互，那么页面将不会返回INP值。

2024年3月，INP取代了FID成为Core Web Vitals。

测量方式

通过web-vitals监测INP：

import {onINP} from 'web-vitals';

onINP(({name, value, rating}) => {
  console.log(name);    // 'INP'
  console.log(value);   // 512
  console.log(rating);  // 'poor'
});

指标分数

为提供良好的用户体验，网站应努力将Largest Contentful Paint控制在200ms以内，为确保大多数用户都达到此目标，最好衡量一下网页加载实际记录的第 75 个百分位（按移动设备和桌面设备细分）：

CLS（Cumulative Layout Shift，累计布局偏移）

概念

布局偏移指页面中的元素所发生的意外移动，这主要发生在当资源以异步方式加载或DOM元素被动态添加到页面的现有内容中时。比如页面上方有一个广告，当用户刚进入页面时还未获取到广告数据，在获取到广告数据后，广告横幅被加载到页面顶部，此时页面中其它的内容都向下移动了广告横幅的高度，这就叫布局偏移。

CLS 用于衡量再页面的整个生命周期中发生的所有意外布局偏移的得分之和。布局的移动可能发生在可见元素从一帧到下一帧改变的任何时候，并且仅当现有元素更改其起始位置时才会发生布局偏移。如果将新元素添加到DOM或现有元素更改了大小，只要没有导致其他可见元素更改其起始位置，就不应将其视为布局偏移。

测量方式

布局偏移计算方式：

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

每次布局偏移时，都会打印出布局偏移的分数，通过累加每次的分数可获取到累计布局偏移CLS。

累计布局偏移计算也可使用web-vitals。

import {onCLS} from 'web-vitals';

onCLS(console.log);

为获取更精确的CLS，推荐使用第二种方式，详见Web.dev。

指标分数

为提供良好的用户体验，网站应努力使CLS得分不超过 0.1。为确保大多数用户都达到此目标，最好衡量一下网页加载的第 75 个百分位（按移动设备和桌面设备细分）。

其他要衡量的重要指标

FCP（First Contentful Paint，首次内容绘制）

概念

FCP用来表示用户感知的页面加载速度，它标记了网页加载时间轴中用户可以看到屏幕上任何内容的一个时间点，衡量了从用户导航到相应网页到该网页的任何内容首次呈现在屏幕上所用的时间，内容包括文本、图片（背景图片）、SVG元素、非白色canvas元素。FCP与LCP的区别是FCP注重第一个出现的内容，而LCP则注重所出现的最大一个内容。

FCP同样包括从上一个网页开始的所有卸载时间、连接设置时间、重定向时间以及首字节时间（TTFB）。

测量方式

通过PerformanceObserver监测FCP：

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});

通过web-vitals监测LCP：

import {onFCP} from 'web-vitals';

// Measure and log FCP as soon as it's available.
onFCP(console.log);

为获取更精确的LCP，推荐使用第二种方式，详见Web.dev。

指标分数

为提供良好的用户体验，网站应努力使FCP不超过1.8s。为确保您的大多数用户都能达到此目标，建议您衡量第 75 个百分位的网页加载情况（按移动设备和桌面设备细分）。

FID（First Input Delay，首次输入延迟）

概念

当页面还未完全加载完成时，可能因为浏览器主线程还在忙于执行其它操作导致不能及时响应用户的交互。因此使用FID评估用户与页面交互时的响应速度，它衡量了从用户首次与网页交互（如点击链接、按钮等）到浏览器实际能够开始处理事件处理脚本以响应用户交互的时间。FID通常发生在FCP和TTI之间，此时页面已渲染部分内容，但未完全加载完毕，尚不能可靠地互动。

FID本身不会衡量事件处理总时长，也不会衡量浏览器在运行事件处理脚本后更新界面所用的时间，FID衡量的是收到输入事件与主线程下次空闲之间的时间，也就是说即使没有注册与之对应的事件监听器，系统也会衡量 FID。

测量方法

通过PerformanceObserver监测FID：

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const delay = entry.processingStart - entry.startTime;
    console.log('FID candidate:', delay, entry);
  }
}).observe({type: 'first-input', buffered: true});

以上代码在大多数情况下会输出正确的FID值，但也有特例具体详见Web.dev。

通过web-vitals监测LCP：

import {onFID} from 'web-vitals';

// Measure and log FID as soon as it's available.
onFID(console.log);

为获取更精确的LCP，推荐使用第二种方式，详见Web.dev。

指标分数

为了提供良好的用户体验，网站应努力将FID控制在100毫秒以内。为确保大多数用户都达到此目标，最好衡量一下网页加载的第75个百分位（按移动设备和桌面设备细分）。

TBT（Total Blocking Time, 总阻塞时间）

概念

TBT指在FCP之后主线程被阻塞并且无法响应用户输入的总时间。

运行的超过50毫秒的任务被称为长任务，主线程在运行长任务时被视为处于“阻塞状态”，如果用户在长任务期间与页面进行交互，浏览器必须等待长任务结束后才能做出响应。

测量方式

由于用户的交互可能会以各种方式影响页面的TBT指标，因此更推荐在实验室场景进行测量，可通过Chrome DevTools中的Performance或者LightHouse测量出TBT。

指标分数

为提供良好的用户体验，网站应努力将TBT控制在200ms以内。

TTI（Time to Interactive，可交互时间）

概念

TTI测量从页面开始加载到其主要子资源加载完成的时间，此时页面能够快速可靠地响应交互。

具体定义：

  1. 从FCP开始。
  2. 向前搜索至少五秒的安静窗口，其中安静窗口定义为：没有长任务并且不超过两个正在进行的网络get请求。
  3. 向后搜索安静窗口之前的最后一个长任务，如果没有找到长任务，则在FCP处停止。
  4. TTI 是安静窗口之前最后一个长任务的结束时间（如果未发现长任务，则与FCP相同）。

注意：TTI对异常网络请求和长任务过于敏感，导致该指标高度不稳定。TTI已从LightHose 10中删除。

测量方式

由于用户的交互可能会以各种方式影响页面的TTI指标，因此更推荐在实验室场景进行测量，可通过Chrome DevTools中的Performance或者LightHouse测量出TTI。

指标分数

为提供良好的用户体验，网站应努力将TTI控制在5s以内。

TTFB（Time To First Byte，首字节时间）

概念

TTFB指浏览器发起请求到接收到服务器返回的第一个字节所经过的时间。TTFB包括以下阶段：

  • 重定向时间
  • Server worker启动时间（如果有）
  • DNS查询时间
  • 连接(TCP)和TLS协商时间
  • 发起HTTP请求到接受到服务器响应的一个字节

测量方式

通过PerformanceObserver监测FCP：

new PerformanceObserver((entryList) => {
  const [pageNav] = entryList.getEntriesByType('navigation');

  console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
  type: 'navigation',
  buffered: true
});

通过web-vitals监测LCP：

import {onTTFB} from 'web-vitals';

// Measure and log TTFB as soon as it's available.
onTTFB(console.log);

指标分数

为提供良好的用户体验，网站应努力将TTFB控制在800ms以内。

声明：Hello World|版权所有，违者必究|如未注明，均为原创|本网站采用BY-NC-SA协议进行授权

转载：转载请注明原文链接 - 前端性能指标学习

Carpe Diem and Do what I like