一家做照明设备的客户改版后找我诉苦：新网站效果确实漂亮，动画炫、图标多，可手机上打开要五秒多，同行的老站一秒出头就出来。他问是不是适配做得太全把网站压垮了。拆开他们首页的资源清单，问题一目了然。这话只对了一半，适配本身不背锅，背着性能债的是不加取舍的堆料。
性能债从哪来
同样的页面，加载的东西能差出十倍：几兆的未压缩大图、几十个动画脚本、四五个加载字体、自动播放的背景视频，每一样都在吃速度。手机网络本来就不稳，海外客户访问你的服务器还隔着大洋，叠加起来就是灾难。响应式网站设计做的是让页面适应各种屏幕，不是把所有设备都伺候到最重的程度——恰恰相反，好的响应式应该让手机加载更轻的东西。
取舍的判断标准
- 首屏三秒是底线：超了就砍，先砍视频和轮播，再砍花哨动画，客户的耐心没有例外，砍之前截图留底，万一数据变差还能恢复对比；
- 大效果用小成本实现：入场动画能用CSS写就别上动画库，一个库几百KB，换来的效果客户未必在意；
- 按端分发重量：手机端加载小图、精简脚本，电脑端再上全量效果，一套代码也能区别对待；
- 第三方代码定期清：统计、客服、地图脚本，装了不用的及时删，很多网站拖着五六个僵尸脚本自己都不知道。
有个容易忽略的点：字体。为了几个标题加载整套英文字体，几十上百KB就出去了，用系统默认字体或者只加载两三个字重，效果差不了多少，速度差很多。
改起来有先后
先跑一次测速工具，把拖后腿的资源列出来，通常图片和视频占大头，处理它们收益最快；然后清脚本，再调加载顺序——首屏的东西先来，其余的等客户往下滑再加载。这几步做完，多数网站速度能提升一半以上，观感几乎不变。性能优化不是一次性工程，每季度看一眼测速报告就行，别等客户流失了才发现网站慢。速度这件事有个特点：恶化是悄悄的，每加一张大图、装一个插件，慢一拍，攒到客户抱怨时已经病了半年。
建议把首屏速度写进建站合同，交付时用测速工具当着面跑一次，数字说话。已经在阵痛中的网站，优先从图片压缩和脚本清理下手，一两天就能见效。比格网络做响应式网站设计时把性能预算当硬指标，效果和速度打架时，永远先保速度——客户等不及，再漂亮也白搭。这句是行内人用无数次返工换来的共识，新站老站都适用。
