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_attr
和wp_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。