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

2022-01-06 0 815

延迟加载图像是在 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_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 性能,同时不会对上述默认启发式方法不适用的站点产生不利影响。但这只是一个坚实的起点。未来,特别是随着基于块的主题将促进更多语义内容规范,我们将能够通过使用可用的块信息进一步微调延迟加载实现。

:本文采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可, 转载请附上原文出处链接。
1、本站提供的源码不保证资源的完整性以及安全性,不附带任何技术服务!
2、本站提供的模板、软件工具等其他资源,均不包含技术服务,请大家谅解!
3、本站提供的资源仅供下载者参考学习,请勿用于任何商业用途,请24小时内删除!
4、如需商用,请购买正版,由于未及时购买正版发生的侵权行为,与本站无关。
5、本站部分资源存放于百度网盘或其他网盘中,请提前注册好百度网盘账号,下载安装百度网盘客户端或其他网盘客户端进行下载;
6、本站部分资源文件是经压缩后的,请下载后安装解压软件,推荐使用WinRAR和7-Zip解压软件。
7、如果本站提供的资源侵犯到了您的权益,请邮件联系: 442469558@qq.com 进行处理!

猪小侠源码-最新源码下载平台 WordPress教程 WordPress 5.9 增强了内置的延迟加载性能 https://www.20zxx.cn/292224/wordpres/wordpressq.html

猪小侠源码,优质资源分享网

常见问题
  • 本站所有资源版权均属于原作者所有,均只能用于参考学习,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,建议提前注册好百度网盘账号,使用百度网盘客户端下载
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务