你有没有遇到过这种情况：点开一个网页，转圈圈半天加载不出来，等得人都快睡着了？尤其在用手机流量的时候，这种体验简直让人抓狂。其实很多时候，问题就出在“HTTP请求”太多上。
什么是HTTP请求？
简单说，每当你打开一个网页，浏览器就要向服务器“要东西”——比如图片、CSS样式、JavaScript脚本。每要一个文件，就会发起一次HTTP请求。一个页面有10张图+3个JS+2个CSS，那就至少15次请求。请求越多，加载越慢。
合并文件，少跑几趟
想象一下，你要去超市买10样东西。如果分10次去，每次都只买一样，那得多累？网页也一样。把多个CSS文件合并成一个，多个JS也合并起来，能大大减少请求次数。
比如原来这样：
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="footer.css">可以改成：
<link rel="stylesheet" href="style.min.css">文件还是那些内容，但只请求一次，速度自然快了。
使用雪碧图，一张搞定多图
老网站常见一堆小图标：点赞、分享、收藏……每个都是单独图片，一个页面几十个小图，请求爆炸。这时候可以用“雪碧图”——把所有小图标拼到一张大图上，通过CSS定位显示对应部分。
.icon-like {
background: url('icons-sprite.png') no-repeat -20px -40px;
width: 16px;
height: 16px;
}原本几十次请求，现在一次搞定。
内联关键资源
有些特别小的CSS或JS，干脆直接写进HTML里，省去额外请求。比如首屏用到的关键样式，内联到<head>中，用户打开就能看到，不用等外部文件加载。
<style>
.header { background: #000; color: #fff; }
.btn { padding: 10px; }
</style>注意别滥用，太大的代码塞进去反而拖累HTML体积。
利用浏览器缓存
用户第一次访问时该请求的还得请求，但可以通过设置缓存，让浏览器记住这些文件。下次打开页面，已经下载过的资源直接从本地取，不走网络请求。
比如在服务器配置中加上：
Cache-Control: max-age=31536000告诉浏览器：“这个文件一年内都不用重新下载”。
字体和图标尽量用系统自带
很多网站为了美观，加载自定义字体，一来就是几个woff、ttf文件，动辄几MB。其实多数场景下，系统自带字体完全够用。真要用自定义字体，也尽量只加载需要的字符集，比如中文站可以按需子集化。
同理，图标能用Unicode符号或系统字体（如Font Awesome）就别一张张图传。
懒加载非首屏内容
页面很长，下面的图先别急着加载。等用户滚动到附近再请求，既减少初始请求数，又节省流量。特别是手机用户，这招特别实用。
<img src="placeholder.jpg" data-src="real-image.jpg" class="lazy">配合JavaScript，在滚动时替换src，实现懒加载。
减少HTTP请求不是一步到位的事，但哪怕改一点，加载速度都会有感觉。尤其是做个人博客、企业官网这类轻量站点，优化后差距明显。试试看，让你的网页也能“秒开”。