前端有哪些性能指标？其中：FCP、LCP、TTFB、FID、TTI、CLS、TBT 等， 分别表示什么意思【热度: 393】

[yanlele]

1. FCP（First Contentful Paint） - 首次内容绘制

   • 含义：FCP是指浏览器首次绘制来自DOM的任何内容（如文本、图像、非白色的<canvas>或SVG）的时间点。这是用户体验的一个重要指标，因为它标志着页面开始有实际内容显示给用户，而不仅仅是空白的屏幕。
   • 重要性：对于用户来说，快速的FCP可以让他们感觉到页面正在加载，减少等待的焦虑。一般来说，良好的FCP时间应该在1.8秒以内。

2. LCP（Largest Contentful Paint） - 最大内容绘制

   • 含义：LCP是指在视口（viewport）内可见的最大图像或文本块的绘制时间。这个指标重点关注页面主要内容的加载情况，因为主要内容通常是用户最关注的部分。例如，对于一个新闻页面，文章中的主图或者标题部分可能是LCP元素；对于一个电商页面，产品图片和主要的产品描述可能是LCP元素。
   • 重要性：LCP能够更好地反映用户感知到的页面加载速度。一个好的LCP时间有助于用户快速获取页面最重要的信息。谷歌建议LCP应在2.5秒内完成，以提供良好的用户体验。

3. TTFB（Time to First Byte） - 首字节时间

   • 含义：TTFB是指浏览器从开始请求页面到收到第一个字节的时间。这个时间包括了网络传输时间、服务器处理时间等多个因素。它是衡量服务器响应速度和网络性能的一个重要指标。
   • 重要性：较短的TTFB意味着服务器能够快速响应浏览器的请求，为后续的页面加载提供了一个良好的开端。如果TTFB过长，可能是服务器性能问题或者网络连接不佳导致的，会影响整个页面的加载速度。

4. FID（First Input Delay） - 首次输入延迟

   • 含义：FID衡量的是用户首次与页面交互（如点击、按键等）到浏览器开始响应这个交互的时间间隔。它反映了页面在交互事件处理上的及时性。
   • 重要性：对于提供良好的用户体验来说，快速响应用户的首次输入至关重要。如果FID过高，用户可能会感觉页面卡顿或者无响应，尤其是在需要快速交互的场景，如游戏、表单填写等。谷歌建议FID应控制在100毫秒以内。

5. TTI（Time to Interactive） - 可交互时间

   • 含义：TTI是指页面从开始加载到变得完全可交互所花费的时间。完全可交互意味着用户可以可靠地与页面进行各种交互操作，如点击链接、输入文本等，并且页面能够及时响应这些操作。这个指标综合考虑了JavaScript加载、解析和执行，以及页面布局的稳定等多个因素。
   • 重要性：TTI直接关系到用户能够有效使用页面的时间点。一个较短的TTI可以让用户更快地开始使用页面的功能，提高用户满意度和工作效率。

6. CLS（Cumulative Layout Shift） - 累积布局偏移

   • 含义：CLS用于衡量页面在加载过程中发生的视觉稳定性。它计算的是页面布局在加载和交互过程中的意外移动情况。例如，当一个元素最初在屏幕上的一个位置，但是由于后续资源加载导致布局改变，该元素位置发生了偏移，这就会产生CLS。
   • 重要性：良好的视觉稳定性是优质用户体验的关键。如果CLS过高，用户可能会在阅读或操作过程中感到困惑，甚至可能导致误操作。谷歌建议将CLS控制在0.1或以下。

7. TBT（Total Blocking Time） - 总阻塞时间

   • 含义：TBT是指在FCP和TTI之间，主线程被阻塞（无法响应用户输入）的总时间。这主要是由于长时间的JavaScript执行或者其他主线程任务导致的。
   • 重要性：较低的TBT意味着页面能够更快地变得可交互，减少用户等待的时间。它有助于评估页面在加载过程中对用户交互的阻塞情况，从而优化性能，提高用户体验。