给网站提速的6个抓手

先摆一个真实案例的骨架：同一个外贸站点，用谷歌官方的PageSpeed Insights工具实测，优化前得分惨不忍睹，按清单逐项处理后得分翻倍——而整个过程中没有改业务、没有换服务器，动的全是「传输和加载方式」。这篇把页面提速的六个抓手按投入产出比排序，每个都给到能直接上手的具体做法。

抓手一：先测量，再动手提速的第一步不是改代码，是拿数据：用PageSpeed Insights这类官方工具跑一遍，得分、首次内容绘制、最大内容绘制各是多少，工具还会直接标出拖慢页面的具体资源——大图片、阻塞的脚本、未压缩的文件，一项项列好。没有测量的优化是盲改，改完也不知道有没有用；有基线数据，每一项优化都能验证效果。这个习惯请贯穿全程：改一项，测一次。

抓手二：压缩，最便宜的一档提速资源压缩是性能优化的基础环节，收益立竿见影：文本类资源在服务器端开启Gzip或Brotli压缩，配置几行、体积减掉六七成。现代Web服务器支持在配置文件里直接开启，压缩等级与压缩类型按需指定，HTML、CSS、JavaScript全覆盖。图片是另一个压缩大头：格式换成WebP、尺寸压到实际显示大小，单张图就能省下大半流量。压缩的投入几乎为零，是所有站点的第一档提速。

抓手三：合并与缓存，减少请求次数HTTP协议每次请求都要建连接、传数据、断连接，请求次数本身就是成本。两个方向降低请求量：合并——把多个小文件合成一个，CSS、JavaScript、小图标各自归拢；缓存——合理设置HTTP缓存头，让浏览器第二次访问直接用本地副本。静态资源设置长效缓存加版本号更新，是「一次加载、长期受益」的典型操作。

抓手四：CDN，把资源搬到用户身边内容分发网络把静态资源复制到全球多个节点，用户从最近的节点取数据，物理距离带来的延迟直接砍掉。对图片多、静态资源多的站点，接入CDN后的加载改善肉眼可见。接入时的要点：动态内容与静态资源分开域名提供服务，缓存规则配好，回源配置核对——CDN用得好是加速，配错是双倍延迟。

抓手五：懒加载，让首屏先跑起来延迟加载的思路是：屏幕外的资源先不加载，用户滚动到哪加载到哪。图片、视频、评论组件都是懒加载的典型对象——首屏要加载的量骤减，用户最先看到的内容提前出现，体感速度立刻不同。配合图片的现代原生懒加载属性，几行代码就能落地。

抓手六：代码分割，按需交付面向现代前端框架的站点，代码分割与按需加载是进阶手段：把打包产物拆成小块，当前页面只加载用到的部分；条件允许的项目再考虑服务端渲染，让首屏内容从服务端直接输出。这一档的改动成本高一些，适合前五个抓手做完仍不达标的站点按需上。

写在最后六个抓手的顺序就是投入产出比的顺序：测量、压缩、合并缓存、CDN、懒加载、代码分割。多数站点做到前四项，得分就能上一个台阶；全部做完还慢，那问题多半在服务器和后端接口——那是另一个战场的事了。先把这六个抓手做完，你才有资格说慢在后端。