WordPress 5.9 增强了内置的延迟加载性能

延迟加载图片是在 WordPress 5.5 中新添加的,后来扩展到 WordPress 5.7 中的 iframe中。在即将发布的 WordPress 5.9 版本中,两者的实现都进行了一些微调以提高WordPress网站的性能。

从中期的2021性能分析已经发现,WordPress的懒加载执行已经造成了轻微的性能回归的最大Contentful涂料指标(LCP) 。正如所引用的帖子中所述,其原因是初始视口中的图像和 iframe 将被标记为延迟加载它们,因为 WordPress 实现会将几乎所有图像标记为loading="lazy". 上述帖子然后进一步解释说,这可以通过跳过loading="lazy"第一个内容图像或iframe 的添加来改进,在绝大多数情况下会出现在初始视口中。WordPress 只能对此做出有根据的猜测,并不能 100% 确定,但考虑到 50 个流行主题的分析表明,增强功能带来了全面的 LCP 改进,页面加载速度提高了 30%。WordPress 5.9 现在实施了此改进,从而相应增强了 LCP 性能。

它是怎么运行的

到目前为止,可以使用wp_img_tag_add_loading_attrwp_iframe_tag_add_loading_attr过滤器微调哪些图像和 iframe 应该延迟加载或不加载,并且这些仍然像以前一样可用。但是,为了提高开箱即用的性能而不需要开发人员自定义行为,WordPress 现在将跳过页面上的第一个“内容图像或 iframe”,以免延迟加载。此处的术语“内容图像或 iframe”表示在当前主查询循环中任何帖子的内容中找到的任何图像或 iframe,以及此类帖子的任何特色图像。这适用于“单个”和“存档”内容:在“单个”上下文中,(唯一)帖子的第一个图像或 iframe 是不延迟加载的,而在“存档”上下文中,第一个图像或 iframe查询中的第一篇文章是不延迟加载的。

自定义行为

对于大多数使用单列布局发布内容的主题,不延迟加载第一个内容图像或 iframe 的方法可以正确增强 LCP 性能。对于具有可替代布局如多列的主题,一个新的wp_omit_loading_attr_threshold 过滤器现在可用,并且可以被用来改变如何许多第一图像/内部框架应被延迟加载被跳过-每个上述中,默认值是1。建议主题作者在基于布局的初始视口中可能有多个内容图像/iframe 的情况下使用此过滤器。

例如,在其档案中使用三列帖子网格的主题可以利用过滤器覆盖3档案页面上的阈值,这将导致前三个内容图像/iframe 不被延迟加载。以下代码片段说明了可能的样子:

function skip_lazyloading_on_first_three_archive_images( $omit_threshold ) {
    if ( is_home() || is_archive() ) {
        return 3;
    }
    return $omit_threshold;
}
add_filter( 'wp_omit_loading_attr_threshold', 'skip_lazyloading_on_first_three_archive_images' );

延迟加载实现的改进应该显着提高大多数依赖它的站点的 LCP 性能,同时不会对上述默认启发式方法不适用的站点产生不利影响。但这只是一个坚实的起点。未来,特别是随着基于块的主题将促进更多语义内容规范,我们将能够通过使用可用的块信息进一步微调延迟加载实现。

有关上述更改的更多背景信息,请参阅#53675


准确成功率:95.5%

发表回复

后才能评论