前端WEB性能指标标准

366 阅读7分钟

Largest Contentful Paint (LCP)

LCP 会报告视口中可见的最大图片、文本块或视频的呈现时间(相对于用户首次导航到相应网页的时间)。

image.png

LCP 得分

为了提供良好的用户体验,网站应尽力将 Largest Contentful Paint 控制在 2.5 秒或更短内。为确保大多数用户都能达到此目标值,一个合适的衡量阈值是网页加载时间的第 75 个百分位数,并按移动设备和桌面设备进行细分。

Cumulative Layout Shift (CLS)

CLS 衡量的是页面整个生命周期内发生的每次意外布局偏移的最大布局偏移分数爆发。

每当可见元素在渲染帧中发生位置改变时,就会发生布局偏移。(本指南的后面部分将详细介绍如何计算各个布局偏移分数。)

突发布局偏移称为会话窗口,是指一次或多次单独的布局偏移快速连续发生,且每次偏移之间间隔不到 1 秒,且整个窗口时长最多为 5 秒。

最大连拍是会话窗口,该窗口内所有布局偏移的累计得分最高。

CLS 得分

为了提供良好的用户体验,网站应努力使 CLS 得分不超过 0.1。为确保大多数用户都能达到此目标,建议将网页加载的第 75 个百分位作为阈值衡量,并按移动设备和桌面设备细分。

Interaction to Next Paint (INP)

INP 是一项指标,通过观察用户访问网页期间发生的所有点击、点按和键盘互动的延迟时间,评估网页对用户互动的总体响应情况。最终 INP 值是观测到的最长互动时间,离群值会被忽略。

互动是指在同一逻辑用户手势期间触发的一组事件处理脚本。例如,触摸屏设备上的“点按”互动包括多个事件,例如 pointeruppointerdownclick。互动可由 JavaScript、CSS、内置浏览器控件(例如表单元素)或这些元素的组合执行。

互动的延迟时间包括从用户开始互动到浏览器下一次能够绘制帧的那一刻,推动互动的一组事件处理脚本的最长一段时长

INP 得分

为确保提供高响应性用户体验,比较理想的衡量阈值是现场记录的网页加载的第 75 个百分位,按移动设备和桌面设备细分:

  • INP 低于或等于 200 毫秒表示网页响应速度良好
  • 如果 INP 高于 200 毫秒,但低于或等于 500 毫秒,则表示网页的响应能力需要改进
  • 如果 INP 高于 500 毫秒,则表示网页的响应速度很慢

Time To First Byte (TTFB)

加载第一个字节所需时间(TTFB) 指标用于衡量从请求资源到响应的第一个字节开始到达的时间点之间的时长。

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

  • 重定向时间
  • Service Worker 启动时间(如果适用)
  • DNS 查找
  • 连接和 TLS 协商
  • 请求,直到收到响应的第一个字节为止

减少连接设置时间和后端的延迟可以降低 TTFB。

TTFB 得分

由于 TTFB 会先于以用户为中心的指标(例如 First Contentful Paint (FCP)Largest Contentful Paint (LCP)),因此建议服务器对导航请求做出足够快速的响应,以便 75% 的用户体验“良好”内的 FCP阈值。一般而言,大多数网站应力求将 TTFB 控制在 0.8 秒或更短。

First Contentful Paint (FCP)

首次内容绘制 (FCP) 用于衡量从用户首次导航到网页到网页内容的任何部分在屏幕上呈现的时间。对于此指标,选择“内容”是指文本、图片(包括背景图片)、<svg> 元素或非白色 <canvas> 元素。

FCP 得分

为了提供良好的用户体验,网站应努力使首次内容绘制时间不超过 1.8 秒。为确保大多数用户都能达到此目标,建议将网页加载的第 75 个百分位作为阈值衡量,并按移动设备和桌面设备细分。

Time to Interactive (TTI)

可交互时间  |  Lighthouse  |  Chrome for Developers

可交互时间(TTI) 指标衡量的是从网页开始播放开始的时间 只要其主要子资源已加载完毕,就能可靠地 快速响应用户输入。

根据性能计算 TTI 跟踪记录 请按以下步骤操作:

  1. First Contentful Paint (FCP) 开始。
  2. 向前搜索至少 5 秒的安静窗口,其中 quiet window 的定义是:no long 任务以及不超过两个进行中的任务 网络 GET 请求。
  3. 向后搜索静止窗口之前的最后一个耗时较长的任务,结束时间为: 如果未找到长任务,则为 FCP。
  4. TTI 是静默期(或 与 FCP 值相同)。

下图应有助于直观呈现上述步骤:

过去,开发者针对更快的呈现速度进行了优化 有时也会以 TTI 为代价。

服务器端呈现 (SSR) 等技术可能会导致网页出现以下情况: 看上去可互动(即屏幕上会显示链接和按钮),但实际上 实际上是可交互的,因为主线程处于阻塞或 因为控制这些元素的 JavaScript 代码尚未加载。

当用户尝试与看起来互动但实际 则他们可能会通过以下两种方式之一做出回应:

  • 在最佳情况下,网页响应速度缓慢会让用户感到厌烦。
  • 在最糟糕的情况下,他们会认为网页已损坏,并且很有可能 离开。他们甚至可能对您的品牌价值失去信心或信任。

为避免出现这种问题,请尽可能减少差异 FCP 和 TTI 之间的规定。在存在显著差异的情况下 通过直观的指示符,清楚地表明网页上的组件尚未 可交互。

TTI 得分

TTI 指标 (以秒为单位)颜色编码
0 - 3.8绿色(快速)
3.9 - 7.3橙色(中等)
7.3 以上红色(慢)

Total Blocking Time (TBT)

总阻塞时间 (TBT) 指标用于衡量在 First Contentful Paint (FCP) 之后主线程被阻塞的时间足以阻止输入响应的总时间。

主线程视为“阻塞”每当有 Long Task 时,相应任务就会在主线程上运行超过 50 毫秒。我们将主线程“阻塞”因为浏览器无法中断正在进行的任务。因此,如果用户在长时间运行的任务过程中与页面交互,浏览器必须等待任务完成后才能响应。

如果任务时间足够长(超过 50 毫秒),用户很可能会注意到延迟,并认为网页运行缓慢或已损坏。

对于给定的长时间运行的任务,阻塞时间超过 50 毫秒。网页的总阻塞时间是在测量的时间范围内(通常是针对网页加载工具的 TTI,或其他工具的总跟踪时间)在 FCP 后发生的每项长任务的阻塞时间的总和。

TBT 得分

为了提供良好的用户体验,在一般移动设备硬件上进行测试时,网站应力求将总阻塞时间控制在 200 毫秒以内。

google链接:

Web Vitals  |  Articles  |  web.dev for China

Largest Contentful Paint (LCP)  |  Articles  |  web.dev for China

缩短服务器响应时间  |  Lighthouse  |  Chrome for Developers