站点图标 度崩网-几度崩溃

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

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

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

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

减少布局偏移是先决条件

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

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

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

自定义延迟加载

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

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

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

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_contentthe_excerptwidget_text_content),可用另一个新的过滤器wp_img_tag_add_loading_attr,其接收下列参数:

例如,如果您要在文章内容中禁用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驱动的站点时都将立即获得好处。