HTTP/2时代的网站性能优化实战

做Web性能优化这几年，我最常被问到的一个问题是：网站明明内容不多，为什么打开还是慢？答案往往藏在传输协议和那些你习以为常的细节里。2017年，HTTP/2已经在主流浏览器和服务器上普及开来，今天我就结合自己的实战经验，聊聊怎么借着新一代协议，把网站的加载速度真正提上去。

先说清楚：HTTP/2到底改了什么

在讲怎么优化之前，得先明白HTTP/2解决了什么老问题。我们用了很多年的HTTP/1.1，有个致命的毛病：它是“明文”且“串行”的。同一个连接里，一个请求没完成，后面的就得排队等着。为了绕过这个限制，早年我们想了各种歪招——把小图片拼成雪碧图、给资源域名分片、一开就是好多个并行连接。这些技巧本质上都是在给老协议“打补丁”。

HTTP/2从协议层面根治了这个问题。它把数据拆成一个个小帧，在同一条连接上多路复用，多个请求和响应可以同时交错进行，谁也不用再傻傻排队。再加上头部压缩、服务器主动推送这些特性，一个站点哪怕有几十上百个资源，也不用再靠那一堆hack来提速了。可以说，它把过去那套“为了绕过协议缺陷而做的优化”，很多都变成了历史。

开启HTTP/2之前，先把基础打好

很多人以为，把服务器切到HTTP/2就万事大吉。其实不然。有几个基础前提不做好，协议再新也快不起来。

第一是必须走HTTPS。虽然协议层面HTTP/2不强制加密，但现实中所有主流浏览器，都只在加密连接下才启用HTTP/2。所以想用上它，先把全站HTTPS这件事做扎实——证书配置、跳转、混合内容，一个都不能漏。第二是服务器和CDN要真的支持并启用，别配了半天，实际握手时又退回了老协议。这些看似琐碎，却直接决定你能不能真正吃到红利。

那些仍然有效的优化手段

即便有了HTTP/2，下面这些基本功依然是性能优化的主旋律，一个都不能丢。

首当其冲是减少请求体积。图片要压缩、要选合适的格式、要按屏幕尺寸响应式加载；代码要压缩混淆；能懒加载的图片别一上来全加载。用户的网络千差万别，每省下一个KB，加载就快一分。其次是缓存。给静态资源配上合理的缓存策略，让回访用户尽量别重复下载，这往往是性价比最高的优化。

再就是关键渲染路径。浏览器要先解析HTML、再去请求CSS和JS，这些资源如果互相阻塞，页面就会长时间白屏。把关键CSS内联、把不关键的脚本延迟加载、别让一个慢吞吞的统计脚本挡住了整页渲染，这些细节叠加起来，用户体感的差距非常明显。

CDN：把内容送到离用户最近的地方

有一个优化手段，对国内用户尤其重要，那就是内容分发网络，也就是CDN。你网站的服务器再快，如果它在北京，而用户在广州、在乌鲁木齐，数据千里迢迢跑过去，光是网络往返就要吃掉不少时间。CDN的思路，是把静态资源缓存到遍布各地的节点上，让用户从离他最近的那个节点就近取数据。

对一个面向全国甚至全球用户的站点来说，CDN带来的提速往往是立竿见影的。它不仅快，还能在遭遇大流量和攻击时分担源站的压力。把图片、脚本、样式这些不常变的资源交给CDN，源站只专注处理动态请求，这种分工是现代网站架构的标配。关键是要配好缓存刷新策略，别让用户拿到过期的旧资源。

别忘了移动端和弱网

2017年这个时间点，手机上网的流量早已超过电脑。这意味着你做性能优化，必须把移动端和糟糕网络环境当成默认场景来对待，而不是拿办公室里满格Wi-Fi下的速度当标准。

手机屏幕小、CPU弱、网络还时好时坏。在地铁里、在电梯里，网络可能从4G掉到2G，页面要是设计得太重，加载半天都出不来，用户早就划走了。所以我们更要克制：别堆一堆花哨却没用的脚本，别让首屏依赖一大堆外部请求，做好“即使在慢网上，核心内容也能尽快出来”。移动优先的性能观，是这一代前端工程师的基本功。

一个常被忽略的点：测量

做性能优化，最忌讳的是凭感觉。我见过太多团队“觉得”某个改动应该更快，上线后才发现根本没变化，甚至更慢。正确的做法是先测量、再优化、最后复测。

用好浏览器里那些网络分析和性能面板，看看页面到底时间花在了哪里：是DNS慢、是服务器响应慢、还是某个资源太大？把瀑布图打开，每一段延迟看得清清楚楚。有了数据，你才知道该把力气花在哪儿。没有测量的优化，和盲人摸象没什么两样。

写在最后

Web性能优化是一场没有终点的修行。协议在升级、网络在变化、用户的耐心却越来越少。HTTP/2给了我们更好的地基，但真正决定体验的，仍然是那些老生常谈的基本功：更少的字节、更聪明的缓存、更顺畅的渲染。

作为工程师，我们很容易沉迷于“上了什么新技术”，却忘了用户真正在乎的只是“点开要等多久”。把每一次优化都落到可测量的数据上，把每一个改动都换算成用户等待时间的缩短，你才能真正做出快得让人察觉不到的网站。这件事不酷炫，却极有价值。

我还想特别提醒年轻的同行：性能优化的功力，往往藏在对“用户感知”的理解里。同样是加载，白屏三秒和渐进式出现内容三秒，用户的主观感受天差地别。学会用加载进度、骨架屏、优先渲染关键内容这些手段，让用户在等待时有事可看，比单纯压缩几百KB更能改善体验。技术指标和主观感受要结合起来看，这才是成熟的性能观。

说到底，快不是目的，让用户顺畅地拿到他要的信息才是目的。围绕这个目标，协议、缓存、压缩、渲染，每一环都做到位，你的网站自然就会快起来。

最后再强调一句：性能优化不是一次性的项目，而是一种需要长期坚持的习惯。随着内容增加、用户增多、设备和网络变化，曾经很快的网站也会慢慢变慢。把性能监控常态化，盯着真实用户的加载数据，一旦发现劣化就及时介入，才能让网站在漫长的生命周期里始终保持轻快。快，是持续经营出来的结果，不是上线那天一劳永逸的状态。愿我们都能少一些“为了炫技而堆砌”，多一些“为了用户而克制”，把每一次点击的等待，都压缩到用户几乎察觉不到的程度，这就是我们能交付给用户最好的体验。