前端性能指标

350 阅读3分钟

FP: First Paint 首次绘制操作开始的时间

此更改可能不可见,它可以使简单的背景色更新或者更不引人注意的内容。

FCP: First Contentful Paint 首次内容绘制

首次重要内容(例如文本、前景、背景图像或者画布、SVG等)绘制之前的时间。次内容不一定有用或有意义。

优化:

  1. 移除阻塞渲染的资源
  2. 减少代码体积
  3. 预加载资源与关联请求
  4. 保持较低的请求数和较小的传输大小

FMP: First Meaningful Paint 第一次有意义的绘制

有内容呈现到屏幕的时间

TTI: Time to Interactive

UI可用于用户交互的时间(即加载过程的最后一个长任务完成)

优化:

  1. 减小js体积与执行时间
  2. 减小第三方代码影响
  3. 预加载关键请求
  4. 保持较低的请求数和较小的传输大小

LCP: Largest Contentful Paint 最大绘制内容

视口中可见的最大内容元素呈现时间。

优化:

  1. 优化关键渲染路径
  2. 优化css
  3. 优化图片
  4. 优化网页字体
  5. 减小js体积

Speed Index

测量可见屏幕上要绘制的像素平均时间

优化:

  1. 最小化主线程工作
  2. 减少js执行时间
  3. 保证在自定义字体加载时文字可见

提高性能

  1. 最小化初始负载

尽量减少初始页面的加载。也就是说,首先下载的应该是用户即将要与之交互的内容,然后在‘后台’下载其余的内容。下载的总量可能会增加,但是用户等待的时间很少,所以感觉呈现得很快。

将交互功能于内容分开,并在初始加载时加载可见的文本、图片和样式。延迟加载初始页面不需要的内容或脚本,此外还需要优化加载的资源,图像、视频应该以最佳格式、压缩。

  1. 防止内容跳转和其他回流

导致内容被下推或者跳转到不同的位置的图像或其他资源,如第三方广告的加载,会使页面感觉它仍然在加载,不利于感知性能。当不是由用户交互导致的内容回流对于用户体验尤为不利。如果某些资源加载速度比其他的资源慢时,且在其他内容已经绘制完成后才加载完成的情况,请提交在布局中为其留出空间,以便内容不会跳跃或调整大小。

  1. 避免字体文件延迟

字体选择很重要。选择合适的字体会大大提高用户感知体验。从感知性能的角度来看,‘次优字体的导入’可能会导致在设置文本样式回退到其他字体时出现闪烁。

使用后备字体具有相同的大小和粗细,以便在加载字体时页面变化不是太明显。

  1. 互动元素是互动的

确保可见的交互元素始终具有交互性和响应性。如果输入的元素是可见的,用户应该能够毫无延迟的与之交互。当用户反应时间超过50ms时,会让他们觉得延迟,感觉页面表现不佳。

  1. 使任务发起者看起来更具交互性

在keydown上发出内容请求而不是keyup可以将感知到的内容负载减少200ms。向keyup添加一个有趣但不明显的200ms动画可以再减少200ms的感知负载。虽然并没有节省400ms的时间,但用户不会觉得他们是在等待内容加载。

总结:通过减少用户等待有用内容的时间,并保持网站的响应性和吸引力,会让用户感觉网站性能更好——即使加载资源的总体时间不变。