性能指标

使用 lighthouse 测试后的结果：

• first contentful paint(fcp): 0.5s
• largest contentful paint(lcp): 2.1s
• total blocking time(tbt): 20ms
• cumulative layout shift: 0.008
• speed index: 4.7s

刷新后，总请求和体积：

1. requests: 119
2. resources: 68.6mb
3. finish: 4.6min
4. DOMContentLoaded: 1.51s
5. load: 8.86s

首屏加载的资源：

1. image
   1. total: 13
   2. size: 1.1mb
2. media
   1. total: 31
   2. size: 40.2
3. fonts
   1. total: 7
   2. size: 24.9

总结

当前因为有 cdn 的加持，使静态资源加载速度相对较快，但视频和字体资源占较大的体积，这两种类型的资源加载，并不会阻塞页面 dom 的渲染，所以 fcp 和 lcp 没显得太慢。

优化策略

已经做过处理的：

1. 图片优化
2. 视频压缩

需要做的：

1. 懒加载、预加载图片和视频
2. 移除不需要加载的字体