跳到主要内容

基于性能指标优化

2024年04月28日
柏拉文
越努力，越幸运

一、认识​

在做性能优化时，不同的性能指标，会有不同的优化手段。这里，小编先给大家列举一下常见的性能指标对应的优化手段。

二、FCP​

优化 FCP，我们通常可以采用这些手段:

  1. 减少服务器响应时间 - 避免多次重定向、提前建立连接 preconnect、dns 预解析、http2、使用高效的缓存策略、使用 CDN、使用 SSG 代替 SSR

  2. 优化资源加载速度 - 预加载关键资源、压缩 js / css / 图片等静态资源、移除未使用的资源

  3. 延迟加载未使用的资源 - defer / async、懒加载

  4. 减少 js 的阻塞渲染 - 尽早开始页面渲染、使用 worker

  5. 在请求数和请求文件大小之间，寻找一个最佳平衡点

  6. 避免 DOM 过大

  7. 减少关键请求的深度

三、LCP​

LCP 的优化和 FCP 有稍许不同。除了上面的优化手段以外，我们还可以将客户端渲染改为服务端渲染，提前将页面主体渲染出来。但是这会引发新的问题，即如果采用 SSR，那么有可能会导致服务器响应时间变长, 导致 FCP 性能变差。不过在首屏性能测试中，LCP 的占比要比 FCP 更高，如果能有效提高 LCP，适当降低 FCP 也是可以的。

四、FID​

为了能让用户更早、更流畅的操作页面，我们优化 FID、TTI、TBT 指标。优化 FID、TTI、TBT，最关键的是减少 js 的阻塞时间。具体的手段有:

  1. 优化资源加载速度 - 预加载 js 资源、压缩 js 大小、使用 CDN、使用缓存

  2. 减少 js 执行时间 - 延迟加载未使用的 js、使用 worker

  3. 减少关键请求的深度

五、TTI​

为了能让用户更早、更流畅的操作页面，我们优化 FID、TTI、TBT 指标。优化 FID、TTI、TBT，最关键的是减少 js 的阻塞时间。具体的手段有:

  1. 优化资源加载速度 - 预加载 js 资源、压缩 js 大小、使用 CDN、使用缓存

  2. 减少 js 执行时间 - 延迟加载未使用的 js、使用 worker

  3. 减少关键请求的深度

六、TBT​

为了能让用户更早、更流畅的操作页面，我们优化 FID、TTI、TBT 指标。优化 FID、TTI、TBT，最关键的是减少 js 的阻塞时间。具体的手段有:

  1. 优化资源加载速度 - 预加载 js 资源、压缩 js 大小、使用 CDN、使用缓存

  2. 减少 js 执行时间 - 延迟加载未使用的 js、使用 worker

  3. 减少关键请求的深度

七、CLS​

此外，为了能让用户有更好的视觉体验，我们还需要优化 CLS 指标。优化 CLS，我们可以采用这些手段:

  1. 提前确定好 img、视频等节点的大小尺寸

  2. 除非是对用户交互做出响应，否则切勿在现有内容的上方插入内容

  3. 首选 transform 动画，而不是触发布局偏移的属性动画

参考资料​

优化加载第一个字节所需时间

性能优化