Web 页面性能衡量指标-以用户为中心的效果指标(下)

科技   2024-11-06 12:03   上海  
点击蓝字,立即关注


接上篇:《Web 页面性能衡量指标-以用户为中心的效果指标


05

TBT(Total Blocking Time)


1. 什么是 TBT?


TBT:总阻塞时间,从 FCP 到可交互时间 (TTI) 之间的总时长,其中主线程处于阻塞状态的时间足够长,足以阻止输入响应能力。


每当存在长任务(一种在主线程上运行时间超过 50 毫秒 (ms) 的任务)时,主线程就会被视为阻塞。


我们说主线程处于阻塞状态,因为浏览器无法中断正在进行的任务。如果用户尝试在耗时较长的任务过程中与页面互动,浏览器必须等待任务完成才能响应。


如果主线程处于阻塞状态的时间超过 50 毫秒,用户很可能会注意到延迟,并认为网页运行缓慢或损坏。


2. 良好的 TBT 是多少时间?


网站的 TBT 应低于 200 毫秒。


3. 如何提高 TBT


  • 将所有工作拆分为运行时间不超过 50 毫秒的代码块,并在合适的位置和时间运行这些代码块;

  • 降低第三方代码的影响;

  • 缩短 JavaScript 执行时间;

  • 去除不必要的 JS 加载、解析、执行;

  • 尽量减少主线程工作;

  • 尽量减少请求数量,减少传输大小。


06

CLS(Cumulative Layout Shift)


1. 什么是 CLS


CLS:从页面开始加载到其生命周期状态更改为隐藏期间发生的所有意外布局偏移的累计得分。每当可见元素的位置从渲染的帧更改为下一帧时,都会发生布局偏移。


1.1. 什么是布局偏移

布局偏移由 Layout Instability API 定义。


只要窗口内可见的元素在两帧之间更改起始位置,该 API 就会报告 layout-shift 。此类元素被视为不稳定元素。


1.2. CLS


当资源以异步方式加载或 DOM 元素被动态添加到页面的现有内容之前,页面内容通常会发生意外移动。


布局偏移的原因可能包括尺寸未知的图片或视频、呈现的字体大于或小于其初始后备值,或者第三方广告或微件会自行调整大小。


由于网站在开发过程中的运行情况与其用户的体验之间的差异,会使此问题变得更糟。例如:

  • 个性化内容或第三方内容在开发和生产环境中的行为通常有所不同。

  • 测试图片通常已存在于开发者的浏览器缓存中,但为最终用户加载所需时间更长。

  • 在本地运行的 API 调用速度通常非常快,以至于开发过程中出现明显的延迟,在生产环境中可能就会出现严重的延迟。


2. 页面生命周期



3. 良好的 CLS 是多少?


为了提供良好的用户体验,网站应努力使 CLS 得分不超过 0.1。


4. 如何衡量 CLS


  • Chrome 用户体验报告

  • PageSpeed Insights

  • web-vitals JavaScript 库

  • Chrome DevTools

  • Lighthouse

  • WebPageTest

  • PerformanceObserver 方法


5. JS 中衡量 CLS


5.1. 简单示例

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


5.2. 指标与 API 的区别

  • 如果网页是在后台加载的,或者在浏览器绘制任何内容之前在后台播放,则系统不应报告任何 CLS 值。

  • 如果某个网页从往返缓存中恢复,其 CLS 值应重置为零,因为用户此次体验是一次不同的网页访问。

  • API 不会针对 iframe 中发生的偏移报告 layout-shift ,但该指标会报告这些变化,因为它们会影响网页的用户体验。


5.3. 使用 web-vitalsJavaScript 库衡量 CLS


可以使用 web-vitalsJavaScript 库来衡量 CLS【代码】


onCLS 源码

https://github.com/GoogleChrome/web-vitals/blob/main/src/onCLS.ts


6. 如何改善 CLS?


  • 改善没有尺寸的图片

  • 给嵌入内容的延迟加载预留空间

  • 动画:尽量使用 transform 平移动画、缩放、旋转/倾斜元素

  • 网络字体优化


07

TTFB(Time to First Byte)


1. 什么是 TTFB?


  • TTFB:网络使用资源的第一个字节响应用户请求所需的时间。

  • TTFB 是以下请求阶段的总和:

    • 重定向时间

    • Service Worker 启动时间(如果适用)

    • DNS 查找

    • 连接和 TLS 协商

    • 请求,直到响应的第一个字节到达


缩短连接设置时间和后端的延迟时间有助于降低 TTFB。


2. 良好的 TTFB 是多少时间?


大多数网站都应尽量将 TTFB 控制在 0.8 秒以内。


3. 如何衡量 TTFB?


  • Chrome 用户体验报告

  • web-vitalsJavaScript 库

  • WebPageTest

  • PerformanceObserver 方法


4. JS 衡量 TTFB


4.1. 简单示例

new PerformanceObserver((entryList) => {  const [pageNav] = entryList.getEntriesByType('navigation');
console.log(`TTFB: ${pageNav.responseStart}`);}).observe({ type: 'navigation', buffered: true});


4.2. 使用 web-vitalsJavaScript 库衡量 TTFB


使用 web-vitalsJavaScript 库也可以在浏览器中以较低的复杂性测量 TTFB

import {onTTFB} from 'web-vitals';
onTTFB(console.log);

onTTFB 源码

https://github.com/GoogleChrome/web-vitals/blob/main/src/onTTFB.ts


5. 如何优化 TTFB?


  • 具体的项目平台

  • 托管服务商

  • CDN

  • 尽可能的使用缓存

  • 避免多次重定向

  • 使用 service worker


08

BFID(First Input Delay)


1. 什么是 FID?


FID:从用户首次与网页互动到浏览器实际能够开始处理事件处理脚本以响应相应互动的时间。


2. 良好的 FID 是多少时间?


为了提供良好的用户体验,网站应努力将 FID 控制在 100 毫秒以内


3. 如何衡量 FID?


FID 指标只能在实际操作衡量,因为它需要真实用户的网页互动;

  • Chrome 用户体验报告

  • PageSpeed Insights

  • web-vitals JavaScript库

  • PerformanceObserver


4. 衡量 JS 中的 FID


4.1. 简单示例

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'bufferedtrue});

4.2. 使用 web-vitals JavaScript 库来衡量 FID

import {onFID} from 'web-vitals';
onFID(console.log);

onFID 源码

https://github.com/GoogleChrome/web-vitals/blob/main/src/onFID.ts


5. 如何优化 FID?


  • 拆分长任务

  • 使用 web worker

  • 缩短 JS 执行时间

  • 减少多余的 JS

  • 针对具体的情况优化页面


09

总结


本文整体的概括了以用户为中心的性能衡量指标,也对每个指标进行了具体的描述和提出优化方案,希望对大家有帮助!



END


链接:https://juejin.cn/post/7376276140595413001

本文为51Testing经授权转载,转载文章所包含的文字来源于作者。如因内容或版权等问题,请联系51Testing进行删除




点点赞
点分享
点在看

51Testing软件测试网
博为峰20周年,青春正当燃,一起向未来! 博为峰51Testing软件测试网提供各种线上招聘、线上课程等网络服务,出版软件测试系列丛书及电子杂志,组织线上技术交流活动;同时还举办多种线下公益活动,如软件测试沙龙、软件测试专场招聘会等。
 最新文章