#精品

WordPress集成的图片懒加载优化设置

WordPress集成的图片懒加载功能很好用，是利用浏览器自带的延迟加载功能实现的，不需要额外添加任何代码，默认是开启的。但在某些情况下，部分图片是不需要懒加载的，本文将介绍如何优化它。

WordPress集成的图片懒加载中排除WordPress文章页面中的特色图片

在百度搜索结果中如果要将特色图片展示为缩略图的话，需要将特色图片排除，另外这样做也能改善累积布局偏移 (CLS) 指标。但WP官方给出的解决办法对特色图片无效，仅对正文中的其它图片有效。代码如下：

add_filter( \'wp_img_tag_add_loading_attr\', \'skip_lazy_load\', 10, 3 );
 
function skip_lazy_load( $value, $image, $context ) {
 
if ( \'the_content\' === $context ) {
    if ( false !== strpos( $image, \'hero-image.png\' ) ) {
        return false; // 将hero-image.png关闭延迟加载
    }
}
return $value;
}

在百度上搜出来的解决办法都与以上雷同，对特色图片都是无效的。（很多网站发布此类技术文章的时候，看来自己都没弄明白或者压根没测试过，坑人不浅……）

上图来自某分享建站与运维技术的博客，图中第二段代码简直错得离谱，不会有任何效果的。

正确的代码：

//禁止文章页特色图片延迟加载
function zhanzhangb_disable_wp_lazy_single_featured( $default, $tag_name, $context) {
    if ( is_single() && \'img\' === $tag_name && \'wp_get_attachment_image\' === $context ) {
        return false;
    }
    return $default;
}
add_filter( \'wp_lazy_loading_enabled\', \'zhanzhangb_disable_wp_lazy_single_featured\', 10, 3);

以上代码添加到当前主题的functions.php或使用Code Snippets插件添加。

检查是否生效：查看网页源代码，检查特色图片是否去掉了loading=\"lazy\"，如果依然有这个属性，说明以上代码未生效。

除了文章页之外将前面2个图片排除延迟加载

WordPress5.9版开始，默认将第1张图片排除延迟加载（文章页内的特色图片无效），但某些情况需要排除2张或3张。一般对于首页或列表页是很有用的，首屏需要加载几张图片就应该排除几张。

上文已经介绍了将文章页的特色图片排除延迟加载，所以本代码就不包含文章页。

//除文章页之外，延迟加载排除前面2个图片
add_filter(\'wp_omit_loading_attr_threshold\', function($omit_threshold){
	if(!is_single()){
		return 2;//这里的数值可以自定义。
	}else
		{
			return 0;
	}

	return $omit_threshold;
});

经过这两处优化后，既兼顾了性能，又优化了用户体验，所以推荐大家优化一下。注意：如果主题未使用WordPress规范的代码（函数）调用缩略图，则排除WordPress文章页面中的特色图片懒加载的代码可能不起作用。