网站速度直接影响用户体验和 SEO 排名。以下是经过实战验证的优化技巧。

资源优化

图片压缩

使用 WebP 格式，体积比 JPEG 小 30%：

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="https://picsum.photos/id/40/800/450" alt="...">
</picture>

CSS/JS 压缩

使用构建工具自动压缩：

# Vite
npm run build

# 输出压缩后的文件

代码分割

按需加载，避免一次性加载所有代码：

const module = await import('./heavy-module.js');

网络优化

CDN 加速

静态资源上 CDN，就近访问。

HTTP/2

启用 HTTP/2，多路复用减少连接数。

缓存策略

Cache-Control: public, max-age=31536000

渲染优化

• 避免布局抖动（CLS）
• 减少主线程阻塞
• 使用 requestAnimationFrame 处理动画

性能优化是一个持续的过程，先测量，再优化。