资源的压缩与合并
- 使用在线工具进行压缩
- 使用 html-minifier / clean-css 等 npm 工具
JS 压缩与混淆
使用 webpack 对 JS 在构建时压缩
图片格式优化
github.com/imagemin/im… imagemin.saasify.sh
图片加载优化
图片的懒加载
- 原生的图片懒加载方案，img 添加 loading=lazy 属性
- 第三方图片懒加载方案 verlok/lazyload | yall.js | Blazy
使用渐进式图片
使用响应式图片
- srcset 属性的使用
- sizes 属性的使用
- picture 的使用
字体优化
使用 font-display 属性 @font-face ajax + base64
