谷歌为 WordPress 发布原生 Lazyload 插件

最新版本的 Chrome (76) 添加了新的"加载"功能;在浏览器中支持原生延迟加载的属性.WordPress 核心的实现仍在讨论中.与此同时,为 WordPress 网站启用此功能的插件开始出现,而 Google 刚刚发布了自己的插件.

Native Lazyload 由 Google 工程师 Felix Arntz 和 WordPress 官方 AMP 和 PWA 插件背后的团队创建.它使用支持它的浏览器的新加载属性延迟加载图像和 iframe.它还包括一个用于尚不支持它的浏览器的回退机制,但这可以通过过滤器禁用.该插件没有设置–用户只需激活它,它就可以工作.

在介绍新插件的帖子中,Arntz 解释了为什么当前需要自定义 JavaScript 的延迟加载选项并不总是有利于性能:

很长一段时间以来,延迟加载都不是您可以切换以使其工作的开关.它不是浏览器功能,因此通常需要加载和运行自定义 JavaScript 逻辑才能使其工作.不幸的是,JavaScript 本身是一种昂贵的资源,因此迄今为止所做的延迟加载在某些情况下实际上可能会对性能产生负面影响(例如,如果页面不包含任何图像或仅包含单个图像;s 立即可见).此外,如果用户在他们的浏览器中禁用了 JavaScript,延迟加载将根本无法工作.

该插件使用了核心票证中正在讨论的类似实现.Arntz 将其描述为"渐进式增强",用户的网站性能将"在没有干预的情况下神奇地提高",随着越来越多的浏览器添加对加载属性的支持.

随着此插件的发布以及 Google 对相关 trac 票证的输入,很明显该公司有兴趣看到 WordPress 核心支持新的加载属性.Chrome 工程经理 Addy Osmani 在 10 天前评论了这张票,以支持他的努力并提出一些建议.

“我非常支持内核以非破坏性方式获得对原生延迟加载的支持,”奥斯曼尼说.

“我希望在延迟加载插件中看到的理想变化是在支持的地方推迟到本地延迟加载,并在不支持的地方应用它们的回退.”根据 Google 的遥测数据,Osmani 估计有超过 17K 的来源已经在使用 loading=lazy.

BBC 的软件工程师安迪·波茨 (Andy Potts) 报告说,在采用原生延迟加载后,性能得到了重大改进.他在公司的一个内部产品上实施了它,该网站每天有大约 3,000 名活跃用户:

“网站上最常见的操作之一是运行查询,该查询会呈现最多 100 张图像的列表 —我认为这似乎是试验原生延迟加载的理想场所,”波茨说.

“为图像添加加载属性将快速网络连接上的加载时间减少了约 50% —它从 ~1 秒变成了 < 0.5 秒,以及最多保存 40 个对服务器的请求.所有这些性能增强只是通过向一堆图像添加一个属性!”

运营 searchfacts.com 的 Kris Gunnars 将 Google 新的 Native Lazyload 插件添加到他的网站,并报告了显着的性能改进,尤其是在移动设备上.

“安装后,我的移动版 PageSpeed 得分从 92 上升到 96,而且它的互动时间得分也减少了 1.5 秒,”贡纳尔斯说.

WordPress 为前 1000 万个网站中的 34.5% 提供支持,对原生延迟加载的核心支持将对网络的整体性能产生巨大影响.由于贡献者继续讨论最佳方法,票证进展缓慢.与此同时,急于在他们的网站上实施它的用户可以安装许多已经可用的插件中的任何一个.

6

发表回复