前端性能核心标准含义

凉拌西红柿
0 阅读9分钟

1. 加载指标

衡量页面内容呈现的速度,直接关系到用户的第一观感.

1.1 FCP (First Contentful Paint) - 首次内容绘制

  • 定义: 从页面开始加载到浏览器首次渲染任何文本,图片,非空白canvas或svg的时间点.

  • 测量内容: 用户看到屏幕上出现东西的那一刻(可能是文字,也可能是图片).标志着页面开始有内容显示.

  • 重要性: FCP是用户观察到页面加载的起点,如果过长,用户就会感到"白屏"太久,加载太慢.

  • 阈值:

    • 良好: ≤ 1.8秒
    • 需改进: 1.8秒 ~ 3秒
    • 较差: > 3秒

  • 优化方向:

    • 减少首屏阻塞资源(同步CSS,JS)
    • 优化服务器响应时间(TTFB)
    • 使用CDN加速和缓存策略
    • 内联关键CSS,延迟非关键CSS.
    • 使用preconnect和dns-prefetch加速第三方资源

1.2 LCP (Largest Contentful Paint) - 最大内容绘制

  • 定义: 从页面开始加载到视口内最大可见元素(如视频,图片,包含文本的块级元素)渲染完成的时间.

  • 测量内容: 用户认为页面"主要内容"加载完成的时间点.随着页面加载,LCP会动态更新,直到用户首次交互后停止.

  • 重要性:LCP是Core Web Vitals核心指标之一.直接反映了页面的加载速度.

  • 阈值:

    • 良好: ≤ 2.5秒
    • 需改进: 2.5秒 ~ 4秒
    • 较差: >4秒

  • 优化方向:

    • 确保LCP元素(如首图)尽早加载:使用fetchpriority="high",preload预加载
    • 优化图片: 压缩,使用现代格式(WebP/AVIF),响应式图片
    • 优化CSS和JS加载顺序,避免阻塞渲染
    • 优化服务器和网络(CDN,缓存)

1.3 TTI (Time to Interactive) - 可交互时间

  • 定义: 页面从开始加载到完全可交互的时间点.

    • 这里的完全可交互意味着:

      • 页面以显示有用内容(FCP已完成)
      • 事件监听器以绑定在可见元素上.
      • 用户交互后页面能在50ms内响应

  • 测量方法: TTI通常通过跟踪长任务和网络请求来确定.它是在FCP之后,主线程空闲且网络请求不再阻塞渲染的时间点.

  • 重要性: TTI衡量用户能否与页面流畅互动的准备时间,过长会导致用户尝试点击时无响应.

  • 阈值:(通常参考,因Lighthouse版本有所调整)

    • 良好: ≤ 3.8 秒
    • 需改进: 3.9 秒 ~ 7.2 秒
    • 较差: > 7.3 秒

  • 优化方向:

    • 减少或拆分长任务(Long Task)
    • 延迟加载非必要的JS.
    • 使用Web Worker处理复杂计算.
    • 减少DOM大小和复杂度

2. 交互指标

衡量页面响应用户操作的流畅性,决定了用户操作时的"手感".常见的"刷新页面后要等一会儿才能点"问题.

2.1 FID (First Input Delay) - 首次输入延迟

  • 定义: 从用户首次与页面交互(点击链接,按钮等)到浏览器实际开始处理事件响应的时间间隔.测量的是主线程被阻塞的时长,不包含事件处理函数的执行时间和后续渲染.

  • 测量内容: 当主线程正在忙于解析/执行JS时,用户交互需要排队等待,这段时间就是输入延迟.

  • 重要性: FID是Core Web Vitals的核心指标之一,直接反映了页面的交互响应能力,是影响用户对页面流畅度的第一印象.

  • 阈值:

    • 良好: ≤ 100毫秒
    • 需改进: 100毫秒 ~ 300毫秒
    • 较差: > 300毫秒

  • 优化方向:

    • 减少长任务:将长任务拆分为微任务或用setTimeout/requestIdleCallback延迟非关键任务.
    • 避免复杂的JS初始化阻塞主线程.
    • 使用Web Worker处理纯计算.
    • 优化第三方脚本加载(延迟或异步)

2.2 TBT(Total Blocking Time) - 总阻塞时间

  • 定义:测量FCP到TTI之间所有长任务(Long Task)的阻塞部分之和.长任务是指主线程占用超过50ms的任务.其阻塞部分为任务时长减去50ms(例如一个75ms的任务贡献25ms阻塞时间)

  • 测量内容: 量化主线程在加载阶段被阻塞的总时长,TBT越长,页面在达到可交互前就越"卡".

  • 重要性: TBT是Lighthouse等工具用来评估交互性的指标,与FID高度相关

  • 阈值:

    • 良好: ≤ 300毫秒
    • 需改进: 300毫秒 ~ 600毫秒
    • 较差: > 600毫秒

  • 优化方向:与FID相似,重点在于拆分任务,减少主线程拥堵

3. 视觉稳定性指标

衡量页面内容在加载过程中是否发生"跳跃",从而影响用户阅读和点击的准确性.

3.1 CLS (Cumulative Layout Shift) - 累计布局偏移

  • 定义: 测量页面整个生命周期内所有意外布局偏移的分数总和.每次偏移的分数都由移动距离和影响区域计算得出.只有当元素原本位置改变且在用户预期外(非用户主动触发的变化)才算.

  • 举例: 字体加载后改变大小,图片加载完成后突然撑开页面,广告动态插入导致内容文字下移等,这些都会增加CLS的分数

  • 重要性:CLS是Core Web Vitals核心指标之一,直接关系到用户体验的"舒适度".低CLS能避免用户勿触,阅读终端等.

  • 阈值:

    • 良好: ≤ 0.1
    • 需改进: 0.1 ~ 0.25
    • 较差: > 0.25

  • 优化方向:

    • 为图片,视频,广告位等动态内容预留固定尺寸的空间(就是提前限制大小,比如使用width或height属性,或CSS纵横比盒子)
    • 避免在现有内容上方插入内容(除非是用户交互触发的)
    • 使用transform动画替代影响布局的属性动画.
    • 调整字体加载,使用font-display:optional避免FOIT/FOUT导致偏移.

4. 页面加载时间轴与性能指标的映射

对于更好的理解上面列出的指标信息,可以通过浏览器加载页面的时间轴上映射.

image.png

4.1 阶段0:导航开始(Navigation Start)

  • 时间点: 用户在浏览器的地址栏内输入网址并回车,或点击链接的瞬间.
  • 发生事件: 浏览器开始发起网络请求,DNS解析,建立TCP连接,发送HTTP请求.
  • 用户视角: 白屏,或者是浏览器显示加载图标.
  • 对应指标: 无(这个是起点T0)

4.2 阶段1:首屏内容出现(FCP)

  • 时间点: 这时浏览器渲染出第一个有意义的元素(文本,图片,SVG或者非白色背景)

  • 用户视角: 开始有东西了, 不再是空空的了

  • 细节:

    • HTML已下载并解析了一部分
    • DOM树开始构建
    • 关键点:这时页面可能只有一行标题或者一个logo,大部分都还是空的,且现在还无法交互(点击按钮无反应)

4.3 阶段2:最大内容加载(LCP)

  • 时间点: 浏览器可见区域内最大的那个元素(通常是主图,大标题)渲染完成.

  • 用户视角: 主要页面都出来了,大概知道这个页面是什么样了.

  • 细节:

    • 关键的图片和字体通常都在这个时候加载完成了.
    • 当前时间点是衡量加载速度最核心的指标.
    • 关键点:这个时候,页面看起来是已经加载"完成"了,但背后的JS可能还在执行.

4.4 阶段3:交互延迟与阻塞(FID/INP & TBT)

这个阶段通常是与LCP重叠或紧贴着的,是"看着都好了,但是还点不动"的情况

  • FID / INP

    • 定义:用户第一次尝试点击(比如点击菜单,按钮等)到浏览器真正开始处理该事件的时间差.
    • 举例:用户看到了按钮,然后点击它,但过了500ms后按钮才有反应.这个500ms就是FID.
    • 原因:主线程(Main Thread)正被JS任务占用(解析,执行,编译).暂时没时间处理点击事件.

  • TBT

    • 定义:从FCP到TTI之间,所有导致主线程阻塞超过500ms的任务时长总和.
    • 意义:量化了页面"卡顿"的总时长,TBT越长,用户会觉得页面越卡.
    • 比喻:就像厨师(主线程)在切菜(执行JS).现在临时让他加点盐(点击事件).厨师需要等到切完这一刀(执行当前任务块)才能理你(处理点击事件).如果这时厨师要切的菜很复杂(长任务).那就要很久才能理你.

4.5 阶段4:可交互时间(TTI)

  • 时间点: 这时页面不仅渲染完了,而且主线程也空闲了.能够持续并且稳定的响应用户操作.

  • 判断标准(严格)

    • FCP已完成
    • 没有未完成或很少的网络请求
    • 主线程在至少5秒内没有被长任务阻塞(即可以随时响应用户的点击)

  • 用户视角: 页面好了,都能用了.点击按钮也都有反应了.

  • 细节: 这个时候事件监听器已经绑定,JS逻辑初始化完成.

4.6 阶段5:视觉稳定性(CLS)

  • 时间点: 贯穿整个加载过程(从FCP到页面生命周期结束)

  • 定义: 页面元素在加载过程中发生意外位移的累计分数.

  • 场景:

    • 当你点击按钮时,突然上面的图片或者广告懒加载完成了,把按钮挤到下面了.导致点到广告.这个就是高CLS.

5. 核心理论

  • FCP关注的是快不快(解决白屏问题)

    • 优化方式: 压缩HTML/CSS,使用CDN,服务端渲染(SSR)

  • LCP关注的是核心内容快不快

    • 优化方式: 优化大图加载(WebP格式),预加载关键资源,优化字体加载.

  • FID/INP & TBT关注的是卡不卡(响应速度)

    • 优化方式: 代码分割,减少主线程JS执行时间,使用Web Worker,延迟非关键JS执行.

  • TTI关注的是什么时候能彻底使用

    • 优化方式: 同上,重点是减少长任务.

  • CLS关注的是稳不稳

    • 优化方式: 提前给图片或视频预留宽高属性,避免动态插入内容挤压已加载的布局.
avatar
文章
阅读
粉丝