WordPress 5.5 内置图像延迟加载功能，对于开发者有哪些要求？[wordpress教程]

盾给网

4年前

从WordPress 5.5开始，WordPress会默认使用本地的HTML loading属性，为图像添加延迟加载，这将极大地节省服务器和带宽资源，提高了网站加载速度，提升了用户体验。

默认情况下，WordPress将添加loading="lazy"到所有具有width和height属性的img标签。从技术上讲，这是在页面输出上处理的，类似于通过添加srcset和sizes属性来实现响应式图像的方式。为了提高这两个功能的服务器端性能，引入了一个新函数wp_filter_content_tags()，因此只需要解析一次img标签，然后将对这些功能的修改推迟到更具体的功能上即可。

减少布局偏移是先决条件

现代网站中常见的用户体验问题是所谓的布局移位（ layout shifting），通常是由图像等媒体资源加载缓慢引起的：默认情况下，只有在加载图像后，浏览器才能正确地布局页面，从而产生内容，例如在图片下方移位。通过在img标签上提供width和height属性可以轻松解决此问题，因为浏览器将使用它们来确定图像的长宽比，从而可以在实际加载图像之前推断页面布局。

虽然这已经是没有延迟加载图像的主要问题，但是对于延迟加载，它变得更加重要。因此，WordPress将仅添加loading="lazy"到同时具有width和height属性的img标签中。同时，解决根本问题对于总体上减少布局转移也同样重要，这就是为什么WordPress5.5将在img标签不存在width和height属性时自动补充这两个属性。要做到这一点，Wordpress已经重建了某些逻辑，用于确定srcset和sizes属性。与这些属性一样，width和height只能确定图像是否用于WordPress附件以及img 标签是否包含相关wp-image-$id类。

WordPress一直遵循这种最佳做法，并且正在努力确保编辑器中的所有图像都具有width和height。只要主题的CSS可以与经典编辑器内容一起正常工作，回填这些属性就不会对主题产生任何影响。这是可以预期的：如果图像的width或height通过CSS修改，则相应的其他属性应设置为auto，以避免图像被拉伸。

自定义延迟加载

默认情况下，WordPress将向以下图像添加loading="lazy"属性：

文章内容中的图片（the_content）
摘要中的图片（the_excerpt）
文本小工具的图片（widget_text_content）
头像图片（get_avatar）
使用wp_get_attachment_image()的模板图像

开发人员可以通过各种过滤器来自定义此行为，最基础的过滤器是wp_lazy_loading_enabled，该过滤器接收以下参数：

$default：布尔默认true到过滤器。
$tag_name：HTML标签名称。尽管按照当前的WordPress行为始终是img，但应注意，loading属性是通用属性，将来可能会扩展为支持其他元素，例如iframe。
$context：上下文字符串作为附加参数，指示图像在技术上的来源，通常是WordPress挂钩名称。根据WordPress本身如何使用延迟加载，上下文可以是这篇文章列表中括号中的五个值之一。

例如，如果您希望默认情况下关闭模板图像的延迟加载，则可以使用以下代码段：

function disable_template_image_lazy_loading( $default, $tag_name, $context ) {
    if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) {
        return false;
    }
    return $default;
}
add_filter(
    'wp_lazy_loading_enabled',
    'disable_template_image_lazy_loading',
    10,
    3
);

为了修改非特定的图像的加载属性，有两种不同的方法，具体取决于图像的类型：

对于出现在内容相关的图像（例如the_content，the_excerpt，widget_text_content），可用另一个新的过滤器wp_img_tag_add_loading_attr，其接收下列参数：

$value：正在加载的属性值，可以是“ lazy”（默认），“ eager”或false。如果要禁用图像的延迟加载，强烈建议设置为false，以便完全省略该属性。
$image：整个图片HTML标签及其属性。
$context：上下文，与上述其他过滤器类似。

例如，如果您要在文章内容中禁用ID为42且大小为“ large”的特定附件图像的延迟加载，则可以使用以下代码段：

function skip_loading_lazy_image_42_large( $value, $image, $context ) {
    if ( 'the_content' === $context ) {
        $image_url = wp_get_attachment_image_url( 42, 'large' );
        if ( false !== strpos( $image, ' src="' . $image_url . '"' ) {
            return false;
        }
    }
    return $value;
}
add_filter(
    'wp_img_tag_add_loading_attr',
    'skip_loading_lazy_image_42_large',
    10,
    3
);

对于通过wp_get_attachment_image()输出的图像，可以简单地通过函数的$attr参数来控制属性，该参数可以是与$value上述滤镜的参数相同的可能值。为了不延迟加载图像，应指定loading属性值为false，这将导致该属性被忽略。例如：

echo wp_get_attachment_image(
    42,
    'large',
    false,
    array( 'loading' => false ),
);

建议主题开发人员对wp_get_attachment_image()或基于图像的其他函数（例如the_post_thumbnail()或 get_custom_logo()）上的图像进行细化处理它们的loading属性，具体取决于它们在模板中的使用位置。例如，如果图像放置在header.php模板中并且很可能在初始视口中，则建议跳过该loading图像的属性。

标记为延迟加载候选图像的图像要求浏览器解析图像在页面上的位置，这依赖于IntersectionObserver可用，因此从今天开始稍微延迟了它们的提取。使用Android版Chrome浏览器进行的实验表明，此类loading="lazy"图像在初始视口中对“ 最大内容绘画”指标的影响很小，与非延迟加载的图像相比，第75个百分位数和第99个百分位数的回归幅度不到 1％，但这是使主题开发人员可以应用一些微调以获得更好的用户体验的考虑因素。

浏览器兼容性

该loading属性受到现代浏览器的广泛支持，并且呈上升趋势：例如，虽然Safari支持在发布之时尚不可用，但该功能也正在开始使用，并且已经合并到基础WebKit引擎中。

但是，即使当前不支持该loading属性的浏览器也不会看到WordPress在图像上提供该属性的任何负面影响，因为本机延迟加载机制是作为完全渐进增强实现的：对于这些浏览器，该属性将被忽略。这也意味着每当浏览器实现对该功能的支持时，其用户在浏览由WordPress驱动的站点时都将立即获得好处。

减少布局偏移是先决条件

自定义延迟加载

浏览器兼容性

相关推荐: