网站加载速度直接影响用户体验和转化率（首屏3秒内加载完成是最佳实践）。以下是系统性的优化方法，分为**前端、网络、后端**三个维度：
### 一、前端优化（浏览器端）
1. **图片优化**
- 使用现代格式：WebP、AVIF
- 压缩图片（工具：Squoosh、TinyPNG）
- 响应式图片：`srcset` + `sizes`
- 懒加载：`loading="lazy"` 或 Intersection Observer
2. **资源加载**
- 关键CSS内联，非关键CSS异步加载
- JavaScript添加 `defer` 或 `async`
- 预加载关键资源：`<link rel="preload">`
- 预连接第三方域：`<link rel="preconnect">`
3. **代码优化**
- 压缩HTML/CSS/JS（工具：Terser、CSSNano）
- 移除未使用的CSS（PurgeCSS、UnusedCSS）
- Tree Shaking（Webpack/Rollup）
- 代码分割（Code Splitting）
4. **缓存策略**
- 设置强缓存（Cache-Control: max-age）
- 协商缓存（ETag、Last-Modified）
- Service Worker（Workbox）实现离线缓存
5. **渲染性能**
- 避免同步加载阻塞渲染的脚本
- 优化CSS选择器（避免深层嵌套）
- 使用 `will-change` 提示浏览器即将变化的属性
- 减少重排重绘（批量修改DOM、使用transform代替top/left）
### 二、网络优化
1. **CDN加速**
- 全球边缘节点分发静态资源
- 主流选择：Cloudflare、AWS CloudFront、阿里云CDN
2. **HTTP/2 或 HTTP/3**
- 多路复用、头部压缩（HPACK/QPACK）
- 服务器推送（谨慎使用，可能过度推送）
3. **减少请求数**
- 合并CSS/JS文件（适度，现代HTTP/2下可保持小文件）
- 内联小资源（< 2KB）
- SVG sprite
4. **启用压缩**
- Gzip 或 Brotli（Brotli压缩率更高）
- 在Nginx/Apache/CDN层配置
5. **DNS优化**
- 减少不同域名数（DNS查询耗时）
- 使用DNS预解析：`<link rel="dns-prefetch">`
### 三、后端优化
1. **服务器响应时间**
- 使用缓存（Redis、Memcached）
- 优化数据库查询（索引、分页、慢查询分析）
- 升级PHP/Node/Java运行时版本
- 使用更快的Web服务器（Nginx、LiteSpeed）
2. **页面静态化**
- 全站静态化（如Hugo、Hexo）
- 动态页面缓存（Varnish、Nginx FastCGI Cache）
3. **代码层面的优化**
- 启用OPcache（PHP）或JIT
- 减少IO操作（合并文件读写）
- 异步处理非关键任务（消息队列）
4. **数据库优化**
- 配置查询缓存（MySQL Query Cache 8.0已废弃，改用外部缓存）
- 读写分离
- 使用NoSQL应对特定场景
### 四、测量与监控
- **LCP** (Largest Contentful Paint) – < 2.5秒
- **FID** (First Input Delay) – < 100毫秒
- **CLS** (Cumulative Layout Shift) – < 0.1
常用工具：
- Google PageSpeed Insights
- Lighthouse（Chrome DevTools）
- WebPageTest
- GTmetrix
### 五、快速见效清单（按优先级）
| 操作 | 难度 | 效果 |
|------|------|------|
| 开启Gzip/Brotli | 低 | 很高 |
| 图片转WebP并压缩 | 中 | 很高 |
| 部署CDN | 中 | 高 |
| JS添加defer/async | 低 | 中 |
| 设置浏览器缓存头 | 低 | 中 |
| 移除阻塞渲染的CSS | 中 | 中 |
| 升级到HTTP/2 | 中 | 中 |
| 启用Redis缓存 | 中 | 高（动态站点） |
如果时间有限，优先做：**图片优化 + Gzip + CDN**，这三项通常能降低50%以上的加载时间。