做了这么多站,官网变慢第一名的原因始终是图片:设计稿直接上传,一张图几兆,首页放十张就是几十兆。
一、上传之前先定规格
按实际显示尺寸导出,不需要按两倍甚至四倍给。 banner 宽 1920 够了,列表缩略图给 400 宽就够,别让浏览器把大图缩小显示。
- 按展示尺寸导出
- 统一压缩质量
- 超大原图不进网页
二、格式选对能省一大半
照片类用 WebP 或压缩后的 JPEG,纯色和图标优先 SVG,需要透明再用 PNG。同一张图换对格式,体积差几倍很常见。
- 照片用 WebP/JPEG
- 图标用 SVG
- 透明图再考虑 PNG
三、让懒加载和缓存帮一把
首屏之外的图滚动到再加载,静态资源配好缓存头。改完再用测速工具量一次,用数字确认有没有真的变快。
- 非首屏图片懒加载
- 配置缓存策略
- 改完复测对比
写在最后
上面这些是我们在这类项目里反复碰到的情况。业务不一样,做法不必照搬,先把自己的流程说清楚,再决定系统该怎么配。有具体场景想聊,电话或微信找我们就行。
