上一篇讲了图片优化的六个环节。今天用一次真实的优化案例，把每一步的数据摊开，看图片优化到底能带来多大的改变。

客户是做水泵的，网站用了两年，产品线从三十几个扩到了一百多个，产品图也跟着传了一百多套。网站速度一天比一天慢，他们自己也能感觉到，但一直没当回事，直到广告优化师提醒他们，广告落地页加载太慢，点击成本在涨，才开始正视这个问题。

优化前的摸底数据，问题比想象的严重。

先看图片体积。我们扫了一遍网站上的所有图片，总共大概两千多张，平均单张体积2.8兆，全站图片加起来超过6个G。其中最大的几张产品原图，单张超过10兆，是直接从相机导出来就传上去了。这些大图集中在产品详情页，而产品详情页恰恰是询盘转化最关键的地方。

再看加载速度。用PageSpeed测首页，移动端47分，桌面端61分。首页实际加载时间6.2秒，其中图片加载占了4.7秒，超过四分之三。产品详情页更夸张，加载时间要8秒以上，因为页面上的产品大图太多。对照谷歌官方数据，移动端加载从1秒到3秒，跳出率上升32%。8秒的加载时间，意味着大部分买家根本等不到页面完整显示。

优化方案，按上一篇的六个环节走，重点做了四个动作。

第一个动作，图片全面压缩。两千多张图片分批用TinyPNG和Squoosh压缩，质量参数设在80。压缩完平均单张体积从2.8兆降到约700K，体积减少了约四分之三。画质用肉眼看，基本没有差别，放大细节也检查过，参数信息都还在。

第二个动作，WebP格式转换。压缩完的图片再转成WebP格式，体积又降了一截。最终平均单张体积降到约300K，相比原始图片，体积减少了大约90%。全站图片总大小从6个多G降到600多M，直接减了一个量级。

第三个动作，配置懒加载。产品列表页有几十张产品图，之前是全部同时加载。开启懒加载之后，首屏只加载用户能看到的那几张，滚动到哪加载到哪。产品列表页的首屏加载时间直接减半。

第四个动作，清理冗余图片。排查了一遍媒体库，发现有不少重复上传的图片、从来没被使用的图片，还有几张几年前的旧产品图。这些全部清理掉，又释放了一部分体积，也让媒体库干净了不少。

优化完的数据对比，很直观。

PageSpeed移动端分数从47分涨到82分，桌面端从61分涨到94分。首页实际加载时间从6.2秒降到1.9秒，降幅约70%。产品详情页从8秒多降到2.5秒左右。图片加载从占4.7秒降到约0.6秒，整个页面的体积也小了一个量级。

速度提升带来的影响，不止是分数好看。

广告落地页加载快了，优化师反馈点击成本开始回落，因为谷歌对落地页体验的评分在涨。网站跳出率在之后一个月的数据里，从之前的58%降到了44%，少了14个百分点。询盘转化率没有立刻大幅变化，但优化师说落地页的停留时间明显变长了，买家愿意看完页面内容了。这些变化加起来，就是之前被速度拖住的那部分潜在客户，开始有机会转化成询盘。

复盘这次优化，有几个数据值得记住。

第一，图片体积减了90%，对画质几乎没有影响。很多人担心压缩会糊，实际上质量参数设在80，肉眼根本看不出差别。担心是多余的，关键是别把质量设太低。

第二，图片占的加载时间比例高得惊人。这个案例里图片占首页加载时间四分之三以上。图片优化做好，速度问题基本解决一大半。

第三，速度优化是性价比最高的转化优化之一。不需要加预算、不需要改产品，把图片处理对，速度、跳出率、广告质量分一起改善。这比多投几千块广告费划算。

第四，数据要优化前后对比着看。这次优化前后所有指标都做了记录，才能清楚地看到每一步的价值。不测基线的优化，做了也不知道做对没有。

维森特数字科技在做独立站的时候，图片优化是建站标配，不会出现这种上线两年图片还是原图的情况。但很多老客户网站是我们接手后处理的，像这个水泵客户一样，图片问题积压了几年才解决。三千多家客户的经验里，图片优化是回报最直接的速度优化，没有之一。

聊几个问题。

Q，两千多张图片全部处理要多久？

A，用批量工具的话，几百到一千张一天能处理完，两千张大概两三天。分批处理，一边压缩一边检查质量，不用赶进度。

Q，图片质量参数80够吗？

A，够。80是视觉无损的常见设置，肉眼看不出差别。如果图片细节多、对画质要求高，可以调到85。低于75就会开始出现可见的损失。

Q，这个案例的优化效果能复制吗？

A，能。这个客户的情况在中小外贸企业里很普遍，图片没压缩、没转格式、没开懒加载。把这三个动作做了，速度提升的幅度会非常接近。

Q，图片优化会影响图片搜索流量吗？

A，不会，反而是促进。压缩和转换不影响图片内容，保留alt属性和文件名，图片搜索不受影响。页面加载快了，反而更有利于收录和排名。

Q，WebP和JPEG怎么选择？

A，WebP体积小画质好，是当前主流选择。唯一的例外是极老旧的浏览器不支持，但现在的海外买家用的浏览器基本都支持WebP。放心转。

Q，优化后还有必要用CDN吗？

A，有必要。图片压缩解决的是体积问题，CDN解决的是距离问题。两者叠加效果最好。这个案例后期也加了CDN，速度又稳定了一截。

Q，怎么检查自己网站的图片问题？

A，用PageSpeed测试，看它的诊断报告会列出未压缩的图片和体积过大的资源。也可以用Chrome开发者工具的Network面板，按体积排序看哪些资源最大。

Q，老网站的图片要全部重传吗？

A，不用。用插件或者工具批量处理服务器上的图片文件就行，处理完替换原文件，不用一张一张重新上传。WordPress可以用Smush这类插件批量压缩。

Q，懒加载在移动端有效吗？

A，特别有效。移动端网速和流量都有限，懒加载能显著减少首屏加载的数据量。移动端优先的场景，懒加载是必须配置的。

Q，这个案例的核心经验是什么？

A，图片问题是积累出来的，解决也要系统性。拍图时定好规范，上传时压缩转换，日常用好懒加载和CDN，这三件事做对，网站速度就不会成为你获客的短板。

 

— END —

 

苏州维森特数字科技有限公司

谷歌官方授权一级代理商 · 一站式海外数字化营销解决方案

外贸独立站建站 · 谷歌SEO优化 · 谷歌广告推广 · Facebook推广