-
FCP(First Contentful Paint) - 首次内容绘制
- 含义:FCP是指浏览器首次绘制来自DOM的任何内容(如文本、图像、非白色的
<canvas>或SVG)的时间点。这是用户体验的一个重要指标,因为它标志着页面开始有实际内容显示给用户,而不仅仅是空白的屏幕。 - 重要性:对于用户来说,快速的FCP可以让他们感觉到页面正在加载,减少等待的焦虑。一般来说,良好的FCP时间应该在1.8秒以内。
- 含义:FCP是指浏览器首次绘制来自DOM的任何内容(如文本、图像、非白色的
-
LCP(Largest Contentful Paint) - 最大内容绘制
- 含义:LCP是指在视口(viewport)内可见的最大图像或文本块的绘制时间。这个指标重点关注页面主要内容的加载情况,因为主要内容通常是用户最关注的部分。例如,对于一个新闻页面,文章中的主图或者标题部分可能是LCP元素;对于一个电商页面,产品图片和主要的产品描述可能是LCP元素。
- 重要性:LCP能够更好地反映用户感知到的页面加载速度。一个好的LCP时间有助于用户快速获取页面最重要的信息。谷歌建议LCP应在2.5秒内完成,以提供良好的用户体验。
-
TTFB(Time to First Byte) - 首字节时间
- 含义:TTFB是指浏览器从开始请求页面到收到第一个字节的时间。这个时间包括了网络传输时间、服务器处理时间等多个因素。它是衡量服务器响应速度和网络性能的一个重要指标。
- 重要性:较短的TTFB意味着服务器能够快速响应浏览器的请求,为后续的页面加载提供了一个良好的开端。如果TTFB过长,可能是服务器性能问题或者网络连接不佳导致的,会影响整个页面的加载速度。
-
FID(First Input Delay) - 首次输入延迟
- 含义:FID衡量的是用户首次与页面交互(如点击、按键等)到浏览器开始响应这个交互的时间间隔。它反映了页面在交互事件处理上的及时性。
- 重要性:对于提供良好的用户体验来说,快速响应用户的首次输入至关重要。如果FID过高,用户可能会感觉页面卡顿或者无响应,尤其是在需要快速交互的场景,如游戏、表单填写等。谷歌建议FID应控制在100毫秒以内。
-
TTI(Time to Interactive) - 可交互时间
- 含义:TTI是指页面从开始加载到变得完全可交互所花费的时间。完全可交互意味着用户可以可靠地与页面进行各种交互操作,如点击链接、输入文本等,并且页面能够及时响应这些操作。这个指标综合考虑了JavaScript加载、解析和执行,以及页面布局的稳定等多个因素。
- 重要性:TTI直接关系到用户能够有效使用页面的时间点。一个较短的TTI可以让用户更快地开始使用页面的功能,提高用户满意度和工作效率。
-
CLS(Cumulative Layout Shift) - 累积布局偏移
- 含义:CLS用于衡量页面在加载过程中发生的视觉稳定性。它计算的是页面布局在加载和交互过程中的意外移动情况。例如,当一个元素最初在屏幕上的一个位置,但是由于后续资源加载导致布局改变,该元素位置发生了偏移,这就会产生CLS。
- 重要性:良好的视觉稳定性是优质用户体验的关键。如果CLS过高,用户可能会在阅读或操作过程中感到困惑,甚至可能导致误操作。谷歌建议将CLS控制在0.1或以下。
-
TBT(Total Blocking Time) - 总阻塞时间
- 含义:TBT是指在FCP和TTI之间,主线程被阻塞(无法响应用户输入)的总时间。这主要是由于长时间的JavaScript执行或者其他主线程任务导致的。
- 重要性:较低的TBT意味着页面能够更快地变得可交互,减少用户等待的时间。它有助于评估页面在加载过程中对用户交互的阻塞情况,从而优化性能,提高用户体验。