如何做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. 持续监控 → 找瓶颈持续优化

相关推荐
前端小白从0开始几秒前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible3 分钟前
带有渐变光晕
前端·javascript·css
粟悟饭&龟波功14 分钟前
【网络安全】一、入门篇:读懂 HTTP 协议
安全·web安全·http
jojo是只猫19 分钟前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
卓码软件测评28 分钟前
第三方软件登记测试机构:【软件登记测试机构HTML5测试技术】
前端·功能测试·测试工具·html·测试用例·html5
CS Beginner29 分钟前
【html】canvas实现一个时钟
前端·html
骥龙30 分钟前
粤港澳全运会网络安全防御体系深度解析:威胁态势与实战防护
网络·安全·web安全
漫谈网络42 分钟前
InfiniBand 深度解析
网络·rdma·infiniband·roce v2
海域云赵从友1 小时前
从直播卡顿到流畅带货:SD-WAN网络专线如何优化阿联酋TikTok体验?
网络
Saniffer_SH1 小时前
【高清视频】CXL 2.0 over Fibre演示和答疑 - 将内存拉到服务器10米之外
运维·服务器·网络·人工智能·驱动开发·计算机外设·硬件工程