评价区先出图片占位,文字被推到下面,十秒后图片才出来,用户以为这条评价没有内容,直接划走了。首屏文案跟着往下跳。碰到这种情况,我一般先确认改动有没有真的生效。

原因不复杂,晒图直接用原图地址,没有生成缩略图,也没写宽高,浏览器按原尺寸占位。图片解码又和首屏文案抢主线程。

「评价晒图阻塞」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。

add_filter('wp_get_attachment_image_attributes', function ($attr) {
  $attr['loading'] = 'lazy';
  $attr['decoding'] = 'async';
  return $attr;
});

权限不要一口气开到最大,先加到够用再往上试,范围小才好收。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。

具体做法是,输出评价图时用缩略图尺寸,别把原图地址塞进列表;给图片写死宽高或宽高比,先把位置占住;首屏只加载前两张,其余用懒加载。

最后用这个标准收尾,评价列表打开时文字先出现,图片位置不塌,滑到可见区域才继续加载。

作者 9823189