为什么需要减少HTTP请求
打开一个网页时，浏览器要向服务器发起多个HTTP请求来加载HTML、CSS、JavaScript、图片等资源。每个请求都有延迟，哪怕单个请求只花几十毫秒，十几个加起来用户就能明显感觉到卡顿。尤其在手机信号差或网络拥堵时，页面加载慢得让人想关掉。
比如你家楼下小超市，一次买齐酱油盐米，比今天买酱油、明天买盐，来回跑十趟肯定省时间。网页也一样，请求越少，加载越快。
合并静态资源文件
把多个CSS文件合并成一个，多个JS文件也合并。原本引入3个JS文件要发3次请求，合并后只要1次。
<script src="js/common.js"></script>
<script src="js/utils.js"></script>
<script src="js/main.js"></script>可以改成：
<script src="js/all.min.js"></script>构建工具如Webpack、Vite默认就支持打包合并，开发时分模块，上线前压成一个。
使用CSS Sprites处理小图标
网站常用一堆小图标，比如点赞、分享、收藏按钮。每个图标单独一张图，就是多个请求。用CSS Sprites把它们拼成一张大图，再通过background-position定位显示哪一块。
假设原来有3个小图标，现在合成一张图，请求从3次变1次。虽然图大了点，但总比多次往返快。
内联关键CSS和JS
对首屏必须的CSS，可以直接写在HTML的<style>标签里，避免外链引入额外请求。比如首屏标题样式、背景色这些。
<style>
.header { color: #333; font-size: 18px; }
</style>注意别滥用，太大的样式内联会拖慢HTML解析。仅放最紧要的部分。
利用浏览器缓存
用户第一次访问时该请求还得发，但设置好缓存后，第二次就不需要再下载了。通过设置Cache-Control头，让静态资源缓存几天甚至几周。
比如JS和CSS文件加哈希名：all.abc123.js，内容变了名字也变，浏览器就会重新请求；没变就直接用本地的。
使用字体图标或SVG Sprite
别再为每个图标发一次图片请求。用Font Icon（如FontAwesome）或把多个SVG合成一个Sprite，按需引用片段。
<svg>
<use xlink:href="#icon-like"></use>
</svg>所有图标都在一个SVG文件里，一次加载，反复使用。
懒加载非首屏资源
页面很长时，下面的图片、视频先不请求。等用户滚动到附近再加载。这样首屏核心内容能更快展现。
给img加上loading="lazy"就行：
<img src="pic.jpg" loading="lazy" alt="示例图片">兼容性已经很好，主流浏览器都支持。
减少HTTP请求不是一步到位的事，而是日常优化的习惯。每次加新功能时想想：能不能复用已有资源？能不能晚点再加载？积少成多，页面自然就快起来了。