图片拖慢首屏的三个原因

一张 3.2MB 的首图能把移动端 LCP 拖到 3.7 秒。这篇拆开拖慢首屏的三个原因：格式没换、首图被加了懒加载、宽高没写导致版面抖动，并给出改法与复测口径。

一张 3MB 的首图，拖掉了一秒二

给一个企业站做性能巡检，移动端 LCP 3.7 秒。打开首页源码，首图是 1920 宽、3.2MB 的 JPEG，还带着 loading="lazy"。

那张图换掉之后，LCP 掉到 1.8 秒。整个过程不到十分钟。

移动端全过 Core Web Vitals 的站点只有 49.1%，其中 LCP 达标率最低，64.4%。绝大多数失败不在代码，在图片。

配图为示意图，仅作说明

格式先换，收益最大

同一张图，AVIF 通常比 JPEG 小三到五成，WebP 小两到三成，画质肉眼几乎无差。现在的浏览器支持已经很全，用 <picture> 给老浏览器留 JPEG 兜底就行。

顺手把尺寸也做对。按容器宽度的 1 倍和 2 倍各出一张，用 srcset 加 sizes 让浏览器自己挑。手机不会去下桌面尺寸的图，这一条在移动端省下的流量比换格式还多。

懒加载别乱加

首屏图加 loading="lazy" 是最常见的自杀操作——浏览器本来要立刻加载，被你推迟到它认为"快进入视口"的时候，LCP 自然往后拖。首图要的是相反的东西：fetchpriority="high"，并在 head 里加 preload。

列表页和正文里的图，懒加载该加就加，收益明显。分界线是"首屏之内不懒加载"。

CLS 是另一笔账

图片不给宽高，加载完成时会把下面内容顶下去，CLS 就上来了。移动端 CLS 达标率 80.9%，绝大多数失分来自这里。width 和 height 属性写上，CSS 里配 max-width:100%; height:auto，一行解决。

主题模板里改哪儿

Z-BlogPHP 和 WordPress 的模板里，首图通常是 article-thumb 或 post-thumbnail 这类模板标签输出的。改法两种：改模板函数，或者装一个图片优化插件自动接管输出。

装插件省事，但要留意它会不会顺手把首图也加上懒加载——不少优化插件默认全站懒加载，装上之后 LCP 反而变差。装完一定要复测首屏。

另外，WordPress 7.1 起图片压缩和缩放改在浏览器端完成，服务器只收成品。如果你的主机便宜、PHP 内存小，这个改动能省下不少上传失败和超时。不过它不负责格式转换的取舍，AVIF 该不该用还是得自己定。

这些动作加起来，一个站通常两小时内能做完。真正拖时间的是找图、改模板、复测，不是技术难度。