首屏加载优化

1. 压缩和合并资源
   比如webpck就是通过css-minimizer-webpack-plugin、mini-css-extract-plugin压缩CSS文件和terser-webpack-plugin压缩JavaScript文件
2. 用适当的图片格式（如JPEG、PNG、WebP）和压缩算法，对图片进行优化，减小图片文件大小，提高加载速度。同时，可以使用懒加载技术，延迟加载非首屏可见区域的图片，减少首屏的加载时间。
3. 异步加载
   将不影响首屏展示的资源（如统计代码、广告等）使用异步加载方式引入，避免阻塞首屏内容的加载。

可以使用JavaScript的动态脚本加载技术。通过动态创建

4. 预加载关键资源
   通过预加载关键资源（如字体文件、重要的CSS和JavaScript文件等），可以在首屏展示之前提前加载这些资源，加快后续页面加载的速度。

要实现预加载关键资源，可以使用HTML中的link和script标签的rel属性来指定资源的加载方式。

5. css大小
   避免使用过多的CSS文件和行内样式，尽量减少CSS文件的大小。另外，可以将CSS放在页面头部，以便尽早渲染页面

6. JavaScript优化
   将JavaScript代码放在页面底部，以减少对页面渲染的阻塞。另外，可以通过代码压缩、去除不必要的注释和空格等方式来减小JavaScript文件的大小。

7. 缓存策略
   合理设置缓存策略，利用浏览器缓存来减少重复加载相同资源的次数，提高页面加载速度。

8. 服务端渲染（SSR）
   减少客户端渲染时间
   提前获取数据
   更好的SEO
   更好的用户体验

9. cdn加速

10. 延迟加载非关键资源