lighthouse
性能提升的机会
适当调整图片大小
- 使用
webp格式图片webp是一种现代的图像格式，它提供了更好的压缩率和更快的加载速度。 - 使用
svg格式图片svg是一种矢量图形格式，它可以在不损失质量的情况下缩放。 - 使用
avif格式图片avif是一种现代的图像格式，它提供了更好的压缩率和更快的加载速度。
- 使用
减少非当前页面的资源请求的加载 推迟非关键的 CSS
- 合理分包减少首页的 css 和 js 的加载量
推迟显示屏幕外的图片
使用
lazyload延迟加载图片使用
lazyload延迟加载图片，可以减少首屏加载的图片数量，从而提高首屏加载速度。可以借助
IntersectionObserver来实现图片的延迟加载、lazysizes第三方库
资源压缩
使用
gzip压缩资源使用
gzip压缩资源，可以减少资源的大小，从而提高加载速度。css 和 js 压缩
使用
css和js压缩，可以减少资源的大小，从而提高加载速度。缩减
JavaScript文件大小 不仅可以减缩载荷规模，还能减少解析和执行时间。实现的话可以采用 terser 压缩工具 或 webpack v4 包含该插件
移除未使用 css
未使用 css 会减慢浏览器构建 render tree 的速度，浏览器必须遍历整个树，并检查哪些 css 规则适用于每个节点，未使用的 css 越多，浏览器花费时间计算节点样式的时间越长。 css 覆盖率测试工具：
css-coverage对图片资源进行高效编码