1. 图片优化 📷
- 格式选择：优先使用
WebP或AVIF替代传统JPG/PNG，体积可减少 30%+ - 懒加载：对非首屏图片启用
Intersection Observer - 压缩工具：使用 https://image.optimize.tool/ 在线压缩工具预处理资源
2. 代码优化 🧾
- 资源合并：合并 CSS/JS 文件减少 HTTP 请求次数
- Tree Shaking：通过 Webpack 或 Vite 移除未使用代码
- 代码压缩：启用 Gzip/Brotli 压缩，可提升 50%+ 加载速度
3. 缓存策略 🧰
- 服务端配置：设置
Cache-Control头部，建议：public, max-age=31536000 - 客户端缓存：使用
LocalStorage或SessionStorage存储非敏感数据 - 扩展阅读：https://docs.guide/frontend/caching
4. 网络优化 🌐
- CDN加速：部署静态资源到 https://cdn.example.com/
- 预加载关键资源：使用
<link rel="preload">提升首屏加载性能 - 减少重定向：避免多级跳转，直接返回目标资源
5. 可视化工具 📈
- Lighthouse：通过 https://lighthouse.chrome.google.com/ 分析性能瓶颈
- WebPageTest：测试不同地理位置的加载速度
📌 优化需结合实际场景，建议定期使用 https://docs.guide/frontend/monitoring 监控效果