优化设置：WordPress集成了图片懒加载功能，可提升网站性能

2023-12-23 0 702

正文：

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 jwsky_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', '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 集成了图片懒加载功能，可提升网站性能

赏

微信扫一扫