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

延迟加载图像是在 WordPress 5.5 中引入的，后来扩展到也涵盖了 WordPress 5.7 中的 iframe。在即将发布的 WordPress 5.9 版本中，两者的实现都进行了一些微调以提高性能。

从中期的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。