如何做HTTP优化

HTTP 优化本质上是 减少请求延迟、降低带宽占用、提高页面响应速度和用户体验。

1. 减少请求数

1. 合并文件

   • CSS、JS 文件合并，减少 HTTP 请求次数。

   • 注意 HTTP/2 支持多路复用，合并不是绝对必要，但对 HTTP/1.1 有明显效果。

2. 使用雪碧图 / Icon Font

   • 将小图标合并到一张图片或字体图标，减少请求。

3. 内联关键资源

   • 对首屏必要的 CSS/JS，可直接内联到 HTML 中，减少首屏请求。

2. 压缩资源

1. 文本压缩

   • 开启 Gzip / Brotli 压缩 HTML、CSS、JS，通常可减小 70% 左右。

2. 图片优化

   • 使用合适格式：WebP > JPEG/PNG

   • 压缩图片质量、尺寸适配不同屏幕

   • 使用懒加载 (loading=“lazy”)

3. 字体压缩

   • 字体子集化（只保留需要的字符）

   • 使用 WOFF2 格式，体积小且压缩率高

3. 缓存策略

1. HTTP 缓存头

   • Cache-Control / Expires → 静态资源缓存

   • ETag / Last-Modified → 验证缓存

2. 服务端缓存

   • Redis / Memcached 缓存热点数据

   • 减少后端生成响应的耗时

3. CDN 缓存

   • 静态资源放 CDN，离用户更近

   • 减少源站压力，加快加载

4. 优化网络传输

1. HTTP/2 或 HTTP/3

   • 支持多路复用、头部压缩、请求优先级

   • 减少 TCP 连接和延迟

2. TCP 优化

   • Keep-Alive → 保持连接，减少握手次数

   • TCP Fast Open（部分场景）

3. DNS 优化

   • DNS 预解析（）

   • 减少首次访问 DNS 查询延迟

5. 减少阻塞与提升首屏速度

1. 异步加载 JS

   • <script async> 或 <script defer>，避免阻塞渲染

2. CSS 放前面，JS 放底部

   • 确保浏览器快速渲染首屏

3. 关键渲染路径优化

   • 内联关键 CSS，延迟加载非关键 CSS

   • 使用懒加载图片、iframe

4. 服务端渲染 / SSR / SSG

   • 提前生成 HTML，减少客户端渲染时间

   • 对首屏加载尤为重要

6. 压缩响应体 & 减少重定向

1. 开启 Gzip/Brotli 压缩

2. 减少 3xx 重定向

   • 尽量直接访问最终 URL，减少额外 RTT

7. 监控与分析

• 使用 浏览器 DevTools / Lighthouse / WebPageTest

• 关注：

  • First Contentful Paint (FCP)

  • Time to Interactive (TTI)

  • 总请求数和体积

  • 缓存命中率

总结思路

1. 减少请求数量 → 合并文件、雪碧图、内联

2. 减小请求体积 → 压缩文本、图片、字体

3. 缓存利用 → 浏览器缓存 + CDN + 后端缓存

4. 优化传输 → HTTP/2、Keep-Alive、DNS预解析

5. 优化首屏体验 → 异步 JS、关键 CSS、SSR

6. 持续监控 → 找瓶颈持续优化