一个做灯具外贸的老板发来首页截图，问我为什么客户打开要等八秒。我让他把首页首屏那张背景大图发过来，一看，三兆八，JPG 格式，原始尺寸四千像素宽，浏览器里却只显示一千九。图片占的流量比页面其他所有东西加起来还多。查慢的问题，我习惯先从图查起——网站速度优化的活儿里，图片十有八九是头号嫌犯。
压图三步走
图片这一块基本是收益最大的，顺序建议这么排：先把尺寸定对，图在页面上显示多宽，就导出多宽，别用四千像素的图撑一千九的位置；再换格式，WebP 比 JPG 小三成到五成，AVIF 更小，主流浏览器都已支持；最后压质量，一般压到百分之七十五到八十五，肉眼几乎看不出差别，体积却能砍掉一半。
懒加载别忘开
首屏以外的图片，全部加上懒加载，用户滚到哪加载到哪。首页底下二十张产品图，用户往往只看前几张，剩下的没必要抢着加载。WordPress 站现在默认带这个功能，检查一下有没有被主题关掉就行。
缓存是第二道保险
图片压完，再配好浏览器缓存，让回访客户第二次打开时直接读本地缓存，图片可以设一年有效期。服务器端再开页面缓存，动态页面生成的 HTML 存下来，下一个访客直接拿现成的，响应时间能从一秒降到几十毫秒。
有个细节要提醒：压图的时候留好原图，别用压缩图覆盖了原始文件，以后要换高清图或者裁别的尺寸，没原图就抓瞎了。另外压图工具选离线的批量工具，比在线一张张压效率高得多。
视频和图标也别放过
首页挂宣传视频的站越来越多，注意别设自动播放，视频文件放 CDN 上，封面图用压缩过的静态图。小图标别再用一张张零散的图片，能合成的合成，能用字体图标或 SVG 的就用，几十个小图标一次请求就带走了。这些细节单个看都不起眼，加起来常常就是一两秒的差距。
两条建议：一是动手前先用测速工具记录压缩前后的加载时间，效果看得见，跟老板汇报也有据可依；二是如果站内图片成百上千张，手动压不现实，这类网站速度优化基础活可以找比格网络写个批量处理脚本，一次性把存量图片全部转成 WebP 并配好懒加载，省下的人工时间远超这点费用。
