做网站运营这些年,常遇到这样的情况:明明没多少访客,服务器带宽却总告急,页面加载时进度条慢悠悠爬,用户没等加载完就关了页面。其实不用急着加钱升级带宽,我试过不少方法,这 4 个优化方案亲测有效,花点功夫就能让加载速度提上去,成本还低。
一、先搞定图片和视频
做过统计就知道,网站里的图片和视频能占掉 70% 以上的带宽。想省带宽,先从这俩下手。
图片处理有三个小技巧。一是压缩,我常用 TinyPNG,把婚纱照那种大图压完,清晰度几乎没变化,文件能小一半。二是选对格式,别啥图都用 PNG,拍的风景照用 JPEG 就够,只有图标需要透明背景时再用 PNG。三是开懒加载,用户没划到的地方图片先不加载,首页打开速度能快不少。
视频优化更关键。之前有客户放了个 10 分钟的产品介绍视频,没优化时访客一打开,带宽瞬间跑满。后来改成分段加载,用户看哪段就加载哪段,带宽消耗直接降了三分之二。另外转码也重要,同样是 1080P 视频,用 H.265 编码比老的 H.264 省一半带宽,手机用户就给 720P 版本,没必要浪费带宽传 4K 的。
二、用好缓存
缓存就像家里的储物柜,常用的东西放在顺手的地方,不用每次都去仓库拿。做好缓存,重复访问的用户根本不用占用服务器带宽。
浏览器缓存要设好规矩。静态的 CSS、JS 文件和背景图,设置成缓存 30 天,用户第二次访问时,直接从本地电脑调文件,服务器连请求都收不到。不过要注意,改了文件后得换个文件名,不然用户看到的还是旧版本。
服务器端也得有缓存。之前帮电商网站做优化,发现他们的商品列表页,每秒有几十次数据库查询。后来用 Redis 把查询结果存起来,5 分钟更新一次,数据库压力小了,带宽也省了近 40%。那些用户常点的页面,缓存住准没错。
三、试试 CDN 加速
有些网站访客分布广,新疆的用户访问北京的服务器,数据跑大半个中国,能不慢吗?CDN 就是在各地设 “分仓库”,用户就近取数据。
选 CDN 不用贪大,中小服务商的基础套餐就够用。我给本地论坛做优化时,用的是有全国节点的服务商,把头像、表情包这些静态文件放上去,南方用户打开页面的速度从 3 秒降到 1 秒内。记得把动态内容和静态内容分开,用户评论这种实时更新的还放自己服务器,图片视频全丢给 CDN,效率更高。
四、精简代码
别小看代码文件,一堆冗余代码堆起来,比图片还占带宽。之前见过一个网站,光 CSS 文件就有 20 多个,每个都带一堆注释,加载时像在传天书。
精简代码有三个步骤。先删垃圾,把注释、空行和没用的函数清掉,我用 VS Code 的插件一键清理,文件能小 20%。再压缩,JS 用 UglifyJS 压完,变量名变成 a、b、c,虽然看着乱,但浏览器能正常识别。最后合并,把零散的 CSS 文件拼成一个,JS 也同理,原来要发 10 次请求,现在 1 次就够,带宽自然省下来了。
这四个方法用下来,不用花一分钱升级带宽,网站加载速度能提 3 倍以上。其实带宽不够用,很多时候不是真的缺,而是资源没用到点子上。先从这几点优化,等真到了用户量翻倍的时候,再考虑升级也不迟。