近日为客户优化网站前端，碰到一个关于 WordPress 图片延迟加载的定制需求。要求在移动设备上首屏加载的图片禁止延迟加载，而其余图片则开启延迟加载。
虽然站长帮曾分享过有关于WordPress集成的图片懒加载优化设置教程，但依然无法满足该客户的要求因为该方法适合通用性网站，会对同类型页面进行设置，例如所有文章页排除第一张图。
其实 WP Rocket 或 Perfmatters 插件的懒加载功能就可以实现客户需求，但插件需要在每个页面上额外添加一段懒加载的JS代码。而客户貌似是有洁癖的，不愿意为此功能而添加插件。
好吧，客户的需求永远是第一位的，特别是土豪客户。
HTML <img> loading 属性
语法：<img src="URL" loading="eager|lazy">
loading 属性有两个值：
- eager：立即加载图片。
- lazy：延迟加载图片直到满足某些条件。
WordPress 延迟加载实现原理
将内容中的所有<img>标签都加上loading="lazy"，虽然WordPress给出了钩子，可以设置排除数量，但并不能个性化选择给谁加上，谁不加上。
解决问题的办法
WordPress 提供了 wp_get_attachment_image_attributes 钩子，它可以过滤图片附件中属性列表。
通过这个钩子，就可以将WordPress默认加上的loading="lazy"变成loading="eager"，也就是从延迟加载变成立即加载。
那么条件就可以通过<img>标签的class值来选择。例如文章页中有两张图：
<img src="a.jpg" alt="a图" class="zzb-nolazy" loading="lazy">
<img src="b.jpg" alt="b图" loading="lazy">给a图加上一个zzb-nolazy类，用来区别b图。
需要将a.jpg关闭延迟加载，可以使用以下代码：
add_filter( 'wp_get_attachment_image_attributes', 'zhanzhangb_disable_lazy', 10, 3 );
function zhanzhangb_disable_lazy( $attr ) {
if ( false !== strpos( $attr['class'], 'zzb-nolazy' ) ) {
$attr['loading'] = 'eager';
}
return $attr;
}这样一来，凡是 class 属性中有zzb-nolazy的图片，都会立即加载。
这样做的好处
如果在首屏加载的图片被延迟加载，那么用户访问页面的时候会有一定的抖动。
浏览器会先将非延迟加载的内容呈现出来，也就是图片后面的内容会移动到本应该展示图片的地方，而等图片加载完成后，这部分内容又会移下去，影响用户体验。
这种情况在 PageSpeed Insights 或 GTmetrix 测试中会报告此类问题（LCP）。
所以在移动设备的首屏内容中是不应该采用图片延迟加载的，而首屏外的图片则推荐延迟以获得最佳速度体验。
将首屏呈现的图片排除延迟加载之后的测试结果如下：
