WordPress 图片拖慢首屏与磁盘：媒体库体积、缩略图爆炸与懒加载排查

上周帮一个内容站查「首页越来越慢、磁盘莫名涨」，最后发现不是 PHP、也不是数据库------是 wp-content/uploads。原图动辄 4--8MB，主题又注册了一堆尺寸，每张图衍生出十几份缩略图；CDN 那边还在回源拉 JPEG，WebP 规则没对上。媒体库问题通常不报错，只是慢慢把首屏和备份窗口拖垮。

下面按我实际排查顺序写：上传体积 → 现代格式 → 缩略图爆炸 → 懒加载 → CDN 源站，最后给一份可勾选的清单。

先看上传：原图太大，后面全是补丁

WordPress 默认不会在上传时强制压缩。编辑器里「插入媒体」看起来很快，磁盘和带宽账单是后置的。我会先问三件事：

内容团队是否从手机/相机直传？常见 3000×4000、未压 JPEG。
主题/页面构建器是否在文章里塞全尺寸图？很多构建器默认 full。
服务器 upload_max_filesize / post_max_size 是否被调到 64M+，等于鼓励大文件进库。

务实做法：上传前控制源文件比事后插件扫盘更稳。约定内容侧导出宽度（例如长边 ≤1920）、质量 75--85，再进媒体库。若必须服务端处理，选一个稳定的图片优化插件或在网关做转换，但别叠三个「一键压缩」插件------互相抢钩子，失败时还不好查。

管理员侧可把过大上传直接拒掉（按团队政策调阈值）：

php 复制代码

// 示例：限制单文件约 2MB（按业务改）
add_filter('wp_handle_upload_prefilter', function ($file) {
    $max = 2 * 1024 * 1024;
    if (!empty($file['size']) && $file['size'] > $max) {
        $file['error'] = '图片过大，请先压缩到约 2MB 以内再上传。';
    }
    return $file;
});

这不是性能银弹，但能挡住「偶尔一张 12MB 英雄图」把备份和同步拖死。

WebP / AVIF：能省带宽，别当成万能开关

现代格式能明显缩小体积。注意三点：

生成与投递是两件事 。插件把 WebP 写进 uploads，不代表 Nginx/CDN 会按 Accept 返回对应文件。
旧浏览器与邮件客户端仍可能要 JPEG/PNG 回退。缺回退时，部分用户直接裂图。
AVIF 压缩更好，但编码更慢、部分主机 Imagick/GD 支持不完整。内容站我通常先稳 WebP，再评估 AVIF。

自检：浏览器开发者工具看响应 Content-Type 和实际字节数；再故意用一个不声明 WebP 的请求，确认仍能拿到可用回退。CDN 若开了「自动 WebP」，要确认源站不要再套一层同名规则，否则容易缓存键混乱（同一 URL 有时 WebP、有时 JPEG）。

缩略图爆炸：磁盘涨、备份慢的隐形杀手

主题、Woo、页面构建器、社交分享插件都可能 add_image_size。一张原图上传后，WordPress 会按已注册尺寸批量生成。尺寸一多：

uploads 目录文件数暴涨，inode 或小文件备份很痛；
更换主题后旧尺寸不会自动清理，垃圾文件常年躺着；
部分插件还会为 retina 再翻一倍。

排查思路：

列出当前注册尺寸（主题/functions.php/插件文档，或用 WP-CLI / 查询工具看 intermediate 相关逻辑）。
问一句：前端模板里到底用了几个尺寸？ 用不到的别留。
换主题或下线插件后，再决定是否批量清理未使用尺寸（先备份，再在预发验证）。

经验值：内容站保留封面、卡片、正文内嵌等少数几个即可；「每个区块一种尺寸」很快失控。

懒加载：开了不等于首屏变快

WordPress 较新版本对内容图有原生 loading="lazy"。仍常见踩坑：

首屏 LCP 图也被懒加载 ，指标反而变差。首屏主图应排除懒加载，或标 fetchpriority="high"（视主题/插件是否支持）。
页面构建器自定义标签绕过了核心输出，懒加载属性根本没加上。
与旧版 jQuery 懒加载插件叠用，出现「滚到了还不加载」或重复请求。

验证方法很土：无痕窗口打开首页，看首屏主图是否立刻请求；再滚到下文，确认非首屏图是延后加载。别只看插件面板上的绿色勾。

CDN 源站：图片问题常出在「谁说了算」

和页面缓存不同，图片链路更绕：

源站还是边缘做转换？ 两边都做，缓存命中率差，还有格式不一致。
缓存键是否包含 Accept？ 做内容协商时必须，否则用户 A 的 WebP 被用户 B 当 JPEG 用。
回源 Host / 防盗链：CDN 回源 403，前台表现为随机裂图，媒体库里文件其实还在。
改图后仍显示旧图：边缘 TTL 过长且没有版本查询参数；换图后记得刷对应 URL，或文件名带 hash/时间戳。

这类问题优先查 CDN 访问日志和单 URL 的 curl -I，别先重装优化插件。

一份可勾选的排查清单

出问题当天，我通常按这个顺序勾：

抽样 10 张近期上传：原图是否 >2MB、长边是否离谱。
uploads 月目录体积是否突然跳变（对比上月备份）。
主题/插件注册了多少 image_size，模板实际用几个。
首页 LCP 图：格式、字节数、是否被懒加载。
WebP/AVIF：生成是否成功，CDN/Content-Type 是否一致，有无回退。
CDN：回源状态码、缓存命中、改图后是否仍旧缓存。
备份窗口：是否卡在海量小文件上（缩略图爆炸的信号）。

多数站点不必一次上全套「智能压缩 + AVIF + 多 CDN」。先把原图体积 和无用缩略图按住，再谈格式与边缘优化，收益通常更干净。