一文带大家了解前端性能测试所涉及的核心性能指标：LCP、FID、CLS、TBT、TTI、FCP、TTFB

 

近期工作需要开始从事前端性能测试相关工作，由于之前并没有相关经验，因此耗费了一定的学习成本。本文重点对前端性能测试所涉及的核心指标的含义以及响应时间范围进行了总结，希望对刚刚进入前端性能测试领域的同学有所帮助！这些指标主要依据是 google web vitals。文章非常实用建议大家收藏。

LCP

Largest Contentful Paint (LCP) ：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5 秒内发生。

合理时间范围

FID

First Input Delay (FID) ： FID 测量从用户第一次与页面交互（例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自定义控件）直到浏览器对交互作出响应，并实际能够开始处理事件处理程序所经过的时间，页面的 FID 应为100 毫秒或更短。lighthouse这类在没有用户的模拟环境中加载页面的工具无法测量 FID（没有用户输入）。但是，Total Blocking Time 总阻塞时间 (TBT) 指标不仅可以进行实验室测量，而且还是 FID 的出色代理。

合理时间范围

 CLS

Cumulative Layout Shift (CLS) ：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的 CLS 应保持在 0.1. 或更少。

合理时间范围

 

TBT

Total Blocking Time 总阻塞时间 (TBT)，该指标测量First Contentful Paint 首次内容绘制 (FCP)与Time to Interactive 可交互时间 (TTI)之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应。每当出现长任务（在主线程上运行超过 50 毫秒的任务）时，主线程都被视作"阻塞状态"。我们说主线程处于"阻塞状态"是因为浏览器无法中断正在进行的任务。

 

TTI

Time to Interactive（TTI）： 可交互时间指标测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。为了提供良好的用户体验，网站在普通移动硬件上进行测试时，应该努力将可交互时间控制在5 秒以内。

如需根据网页的性能跟踪计算 TTI，请执行以下步骤：

1先进行First Contentful Paint 首次内容绘制 (FCP)。

2沿时间轴正向搜索时长至少为 5 秒的安静窗口，其中，安静窗口的定义为：没有长任务且不超过两个正在处理的网络 GET 请求。

3沿时间轴反向搜索安静窗口之前的最后一个长任务，如果没有找到长任务，则在 FCP 步骤停止执行。

4TTI 是安静窗口之前最后一个长任务的结束时间（如果没有找到长任务，则与 FCP 值相同）。

下图将有助于您更直观地理解上述步骤：

 

FCP

First Contentful Paint(FCP)：首次内容绘制指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。对于该指标，"内容"指的是文本、图像（包括背景图像）、

 

在上方的加载时间轴中，FCP 发生在第二帧，因为那是首批文本和图像元素在屏幕上完成渲染的时间点。

合理时间范围

 

下图是FCP和LCP的差别

 

TTFB

Time To First Byte（TTFB）：是一个衡量对资源的请求和响应的第一个字节开始和到达之间时间的指标。

 

TFB 是下列请求节点的时间损耗汇总：

• Redirect time 重定向时延
• Service worker 启动时延（如果适用）
• DNS 查询时延
• 建立连接和 TLS 所消耗时延
• 请求，直到响应的第一个字节到达为止的时延

减少连接建立和后端服务的时延将有助于降低 TTFB

合理时间范围

我的每一篇文章都希望帮助读者解决实际工作中遇到的问题！如果文章帮到了您，劳烦点赞、收藏、转发！您的鼓励是我不断更新文章最大的动力！