正文：
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;
}
在百度搜索结果中找到的解决方法与上述方法相似，对于特色图片都无效。（很多网站发布此类技术文章的时候，看来自己都没弄明白或者压根没测试过，坑人不浅……）
正确的代码：
attachment_image' === $context ) {
return false;
}
return $default;
}
add_filter( 'wp_lazy_loading_enabled', 'jwsky_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 文章页面中，特色图片的懒加载代码可能无法生效。
转载请注明：汇站网 » 优化设置：WordPress 集成了图片懒加载功能，可提升网站性能
