首屏加载优化

首屏加载优化方式的梳理和总结

常规方式

• 打包部分
  • 代码压缩和合并
  • 资源预加载
    • link[ref="preload"][as="style|script|image|font|..."]
  • CDN 加速
  • 延迟加载非关键 JS (script[defer])
• 代码部分
  • 图片优化(webp)和懒加载
  • 异步加载 JS
  • CSS 拆分首屏和次屏
  • 服务端渲染
  • 骨架屏
• 服务端
  • 缓存优化
    • 资源强缓存和协商缓存
    • 请求缓存(持久化)

The End

欣赏图片