网站速度优化：九成时间耗在图片上

浏览器标签上那个小圈一直转，进度条卡在最后四分之一不动，这种场面做过站的人基本都见过。多数人的第一反应是去换带宽、加套餐，钱花出去了，页面照样慢。真正的原因往往特别朴素——网站速度优化九成时间耗在图片上，这事在电话里解释一百遍都不如自己打开网络面板看一眼：首屏那几张图加起来几十兆，服务器响应只花了很短一下，剩下的全是在等图下载、等解码。

网站速度优化九成时间耗在图片上，不是夸张

印象比较深的一次，帮人看一个卖花的站。首页看着挺清爽，点开网络面板，第一张主图是手机拍的原始大图，后面跟着一堆没处理过的商品图，一张压着一张往下排。他不是没优化，是优化错了地方：让技术调了半天的数据库查询，把服务器配置也升了一档，图片一张没动。后来只是把图裁了、转了个格式，页面手感立刻不一样。这种事见得多了，你就会发现方向比力气重要。

顺带说一句，测速工具给出的那个总耗时数字，拆开看才有意义。你会看到有个别请求占了时间的大头，而且它们的类型写着 image。别急着怀疑主机商，先顺着这条线往下查。

尺寸这刀先砍，别把原图直着扔上去

最常见的问题，是拿几千万像素的原图当缩略图用。后台列表里显示的是两百像素宽的小图，用户下载的却是原图，全靠 CSS 给按小了。CSS 缩放只改显示，不改文件体积，这是两码事。上传之前先裁到实际需要的最大尺寸，一般内容图也就一千到一千五像素宽，再大对肉眼看不出差别。

批量处理的话，命令行最省事。ImageMagick 里类似 convert in.jpg -resize 1200x -quality 82 out.jpg 这样跑一遍，一整个目录都能过。程序自动出缩略图，也比让作者手工上传两张要靠谱得多，不然迟早有人忘。质量参数不用迷信，80 上下对照片类内容通常够看，压到 60 以下人脸就开始糊。

格式换对了，体积能差一大截

老站里 JPEG 和 PNG 是标配，但这两年 WebP 的兼容性已经不用太担心，主流浏览器都吃，同一个画面存成 WebP 通常比 JPEG 小不少。命令也好记，cwebp -q 80 in.jpg -o out.webp 走一遍就行。再往上是 AVIF，压缩更狠，代价是解码更费 CPU，在性能弱的手机上有可能首屏反而更慢。稳妥的做法是先拿非首屏的图试，别一上来就把首屏主图换掉。

PNG 不是不能用，它该待的地方是图标、线稿、需要透明通道的素材。把照片塞进 PNG，体积会大得离谱，那是用错了工具。至于各家浏览器对新格式的支持细节，以官方文档和服务商页面说明为准，别拿一篇旧文章当标准。

懒加载救得了列表页，救不了首屏

给图片加 loading=”lazy” 是最省力的一步，长列表、商品瀑布流、文章内页的配图，加上之后首屏要下载的东西立刻少一截。但首屏第一张主图千万别懒加载，那等于人为把首屏时间往后推，用户看到的是白块。

还有个容易忽略的细节：加了懒加载，位置就得提前占住。图片标签要写 width 和 height，或者用 aspect-ratio 定住比例，不然图片一张张加载进来，页面跟着往下跳，用户点按钮点空。再配合 srcset 和 sizes，让手机自己挑小尺寸那版，别把桌面的大图硬塞给移动端。

分发这半截，很多人只做了一半

图处理完了，还有传输。把图片走 CDN、源站放对象存储，这是常规操作；但很多人只做了前半截，缓存头没设。带 hash 的静态图完全可以给很长的缓存时间，类似 Cache-Control: max-age=31536000，文件名一变就是新地址，不怕用户拿到旧图。

另外，图片域名和主站域名分开挂，是比较省心的做法。图走图的路，动态请求走动态的路，互相不抢连接，回源也不至于全打在主站上。改动之前先在测试域名上跑一遍，尤其要盯着跨域和防盗链配置，这两处出问题，页面会出现一批裂图。

怎么确认时间真花在图上

打开开发者工具的网络面板，按体积排一次序，再按耗时排一次序，两个榜单对不上很正常。体积最大的不一定是拖慢首屏的那个，真正要盯的是核心内容区那张图什么时候到。看首屏关键图的时间点，比看总大小有用得多。Lighthouse 之类的工具可以跑，但别只认分数，它给的分数会随环境和版本变，你要的是定位问题，不是刷一个好看的数字。

改完记得在移动网络下再验一遍。很多时候在办公室的宽带下怎么测都快，换成手机流量、找个信号一般的位置，问题就露出来了。图片这事，对带宽和延迟最敏感。

几个容易做反的操作

一种是压得太狠。为了那点体积把质量压到看不清，用户看一眼就退，省下的时间白省。一种是全都懒加载，包括首屏，等于自己给自己加延迟。还有一种是把动图用 GIF，那格式对照片类的动效极不友好，能转成视频就转，体积差得远，且视频还能暂停。

最后一种是只顾着压首页，内页的配图几千张原图堆着不动。抓取和首屏体验是一整套的，只做一块，收益有限。

要动手的话，按这个顺序走一遍就够：查一遍首屏关键图的实际尺寸和文件大小；把超过实际显示尺寸的原图裁掉；照片类统一转 WebP，PNG 只留图标和透明素材；首屏图不做懒加载，其余都加；所有图片补上宽高；静态图设长缓存并挂到 CDN；最后在手机流量下重测一次。这一圈下来通常比换套餐划算得多，也不用求人。