接上篇:《Web 页面性能衡量指标-以用户为中心的效果指标》
TBT:总阻塞时间,从 FCP 到可交互时间 (TTI) 之间的总时长,其中主线程处于阻塞状态的时间足够长,足以阻止输入响应能力。
每当存在长任务(一种在主线程上运行时间超过 50 毫秒 (ms) 的任务)时,主线程就会被视为阻塞。
我们说主线程处于阻塞状态,因为浏览器无法中断正在进行的任务。如果用户尝试在耗时较长的任务过程中与页面互动,浏览器必须等待任务完成才能响应。
如果主线程处于阻塞状态的时间超过 50 毫秒,用户很可能会注意到延迟,并认为网页运行缓慢或损坏。
网站的 TBT 应低于 200 毫秒。
将所有工作拆分为运行时间不超过 50 毫秒的代码块,并在合适的位置和时间运行这些代码块;
降低第三方代码的影响;
缩短 JavaScript 执行时间;
去除不必要的 JS 加载、解析、执行;
尽量减少主线程工作;
尽量减少请求数量,减少传输大小。
CLS:从页面开始加载到其生命周期状态更改为隐藏期间发生的所有意外布局偏移的累计得分。每当可见元素的位置从渲染的帧更改为下一帧时,都会发生布局偏移。
1.1. 什么是布局偏移
布局偏移由 Layout Instability API 定义。
只要窗口内可见的元素在两帧之间更改起始位置,该 API 就会报告 layout-shift 。此类元素被视为不稳定元素。
1.2. CLS
当资源以异步方式加载或 DOM 元素被动态添加到页面的现有内容之前,页面内容通常会发生意外移动。
布局偏移的原因可能包括尺寸未知的图片或视频、呈现的字体大于或小于其初始后备值,或者第三方广告或微件会自行调整大小。
由于网站在开发过程中的运行情况与其用户的体验之间的差异,会使此问题变得更糟。例如:
个性化内容或第三方内容在开发和生产环境中的行为通常有所不同。
测试图片通常已存在于开发者的浏览器缓存中,但为最终用户加载所需时间更长。
在本地运行的 API 调用速度通常非常快,以至于开发过程中出现明显的延迟,在生产环境中可能就会出现严重的延迟。
为了提供良好的用户体验,网站应努力使 CLS 得分不超过 0.1。
Chrome 用户体验报告
PageSpeed Insights
web-vitals JavaScript 库
Chrome DevTools
Lighthouse
WebPageTest
PerformanceObserver 方法
5.1. 简单示例
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('Layout shift:', entry);
}
}).observe({type: 'layout-shift', buffered: true});
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
改善没有尺寸的图片
给嵌入内容的延迟加载预留空间
动画:尽量使用 transform 平移动画、缩放、旋转/倾斜元素
网络字体优化
TTFB:网络使用资源的第一个字节响应用户请求所需的时间。
TTFB 是以下请求阶段的总和:
重定向时间
Service Worker 启动时间(如果适用)
DNS 查找
连接和 TLS 协商
请求,直到响应的第一个字节到达
缩短连接设置时间和后端的延迟时间有助于降低 TTFB。
大多数网站都应尽量将 TTFB 控制在 0.8 秒以内。
Chrome 用户体验报告
web-vitalsJavaScript 库
WebPageTest
PerformanceObserver 方法
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
具体的项目平台
托管服务商
CDN
尽可能的使用缓存
避免多次重定向
使用 service worker
FID:从用户首次与网页互动到浏览器实际能够开始处理事件处理脚本以响应相应互动的时间。
为了提供良好的用户体验,网站应努力将 FID 控制在 100 毫秒以内
FID 指标只能在实际操作衡量,因为它需要真实用户的网页互动;
Chrome 用户体验报告
PageSpeed Insights
web-vitals JavaScript库
PerformanceObserver
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', buffered: true});
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
拆分长任务
使用 web worker
缩短 JS 执行时间
减少多余的 JS
针对具体的情况优化页面
本文整体的概括了以用户为中心的性能衡量指标,也对每个指标进行了具体的描述和提出优化方案,希望对大家有帮助!
链接:https://juejin.cn/post/7376276140595413001
本文为51Testing经授权转载,转载文章所包含的文字来源于作者。如因内容或版权等问题,请联系51Testing进行删除