5.9中增强的延迟加载性能

WordPress 5.5中引入了延迟加载图像及以后扩展到WordPress 5.7中的iframe在即将发布的WordPress 5.9版本中,这两个版本的实现都得到了一些微调,以提高性能。

21年年中的性能分析发现,WordPress的延迟加载实现导致了轻微的性能下降在中最大含量油漆指标(LCP)。如参考职位,原因是初始视口中的图像和iframe将被标记为惰性加载,因为WordPress实现将用标记几乎所有图像加载=“惰性”。上述帖子进一步解释了可以通过跳过添加加载=“惰性”对于第一个内容图像或iframe公司iframe公司 iFrame是内联框架的缩写。iFrame用于在网页中加载另一个HTML文档并呈现它。该HTML文档还可能包含JavaScript和/或CSS,在用户浏览器解析iFrame标记时加载。,在大多数情况下,它将出现在初始视口中。WordPress只能对此做出有根据的猜测,而且不能100%确定,但考虑到50个流行主题的分析表明增强增强 增强是对WordPress的简单改进,例如添加挂钩、新功能或对现有功能的改进。全面改进了LCP,页面加载速度提高了30%。WordPress 5.9现在实现了这种改进从而提高LCP性能。

它是如何工作的

到目前为止,可以使用wp_img_tag_add_loading_attrwp_iframe_tag_add_loading_attr过滤器,并且这些仍然像以前一样可用。然而,为了在不需要开发人员自定义行为的情况下提高即时可用的性能,WordPress现在将跳过页面上第一个“内容图像或iframe”的延迟加载。这里的术语“content-image or iframe”表示在当前主查询中任何帖子的内容中找到的任何图像或iframe循环 Loop是WordPress用来显示文章的PHP代码。使用The Loop,WordPress处理要在当前页面上显示的每个帖子,并根据它与The Loop标记中指定的标准的匹配程度设置其格式。循环中的任何HTML或PHP代码都将在每个帖子上处理。https://codex.wordpress.org/The_Loop.还有任何特色图片并被选为亮点论文 特色图片是博客存档页面上使用的主要图片,当帖子或页面在社交媒体上共享时会被提取。该图像可以用于在站点的小部件区域或帖子摘要列表中显示。这样一个职位。这适用于“单数”和“归档”内容:在“单数”上下文中,(唯一)帖子的第一个图像或iframe不会延迟加载,而在“归档”上下文中第一查询中的帖子没有延迟加载。

自定义行为

不延迟加载的方法第一内容图像或iframe可以正确增强大多数主题的LCP性能,这些主题使用单列布局来发布内容。对于具有多列等替代布局的主题wp_omit加载属性阈值 滤波器过滤器 过滤器是两种挂钩之一https://codex.wordpress.org/Plugin_API/挂钩。它们为函数修改其他函数的数据提供了一种方法。它们是Actions的对应物。与Actions不同,过滤器是以孤立的方式工作的,不应该有副作用,例如影响全局变量和输出。现在可用,可用于更改方式许多的在第一个图像/iframe中,应该跳过延迟加载-根据上述,默认值为1。如果根据布局,主题作者可能在初始视口中有多个内容图像/iframe,建议使用此过滤器。

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

函数skip_lazyloading_on_first_three_archive_images($omit_threshold){if(is_home()||is_archive()){返回3;}返回$omit_threshold;}添加过滤器('wp_omit_loading_attr_threshold','skip_lazyloading_on_first_three_archive_images');

对延迟加载实现的改进应该会显著提高大多数依赖它的站点的LCP性能,同时不会对上面描述的默认启发式不适用的站点产生不利影响。但这只是一个坚实的起点。未来,特别是使用更加语义化的内容规范 块是一个抽象术语,用于描述使用WordPress编辑器组合在一起形成网页内容或布局的标记单元。这个想法结合了过去可能通过短代码、自定义HTML实现的概念,并将发现嵌入到一个一致的API和用户体验中。-基于主题将有助于,我们将能够使用可用的块信息进一步微调延迟加载实现。

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

道具到@亚当西尔弗斯坦@audrasjb公司用于审核和校对。

#5-9#开发说明#特征-酶负荷#性能