Felix Arntz，WordPress 核心提交者和谷歌开发者项目工程师，宣布即将支持延迟加载 iframe。该功能包含在最新的 WordPress 5.7 测试版中，并将于下个月正式发布给更大的社区。
WordPress 从 5.5 版本开始支持延迟加载图片。但是，初始功能集不包括对 iframe 的支持。当时，浏览器对 iframe 的支持非常广泛。然而，它还不是 HTML 生活标准的正式组成部分。此后不久，它被添加到 HTML 规范中，并且继续讨论添加对 WordPress 的支持。
与图片不同，许多用户可能没有意识到他们正在使用 iframe。 iframe 的主要用例是在经典编辑器上为用户使用嵌入块或自动嵌入系统。例如，每当用户将 YouTube 视频添加到他们的博客文章时，底层代码就会输出一个 iframe。
YouTube内嵌源码展示iframe。
这些 iframe 增加了页面大小的重量并阻碍了加载时间。
懒加载的对立面是急切加载。这是 Web 上的默认设置，它将批量加载所有资源。当页面包含许多图像或 iframe 时，这通常还会导致页面加载缓慢。延迟加载只加载出现在站点访问者视口中的图像和 iframe 源。这加快了页面的初始加载时间。
如果您为 iframe 设置了明确的宽度和高度，WordPress 只会添加 loading="lazy" 属性。这是为了避免出现 iframe 时的页面移动效果。 Arntz 撰写了大量关于此影响的文章，宣布支持延迟加载图像。同样的问题也适用于 iframe。
“现代网站中一个常见的用户体验问题是所谓的排版过渡，通常是由于图像等媒体资源加载缓慢造成的，”他写道。 "默认情况下，只有在浏览器之前的图像才能正确布局页面，这会导致图像下方的内容发生偏移。这可以通过在 img 标签上提供 width 和 height 属性轻松解决，因为浏览器将使用它们来确定图像的长宽比，以便在实际加载图像之前可以推断出页面布局。”
在某些情况下，WordPress 甚至不会向 oEmbed 提供程序添加加载属性它支持。 WordPress 不提供 iframe 内容。第三方提供商创建 HTML 并将其发送回各个 WordPress 站点。这些第三方应遵循添加宽度和高度属性的最佳做法。
“由于 WordPress 无法猜测嵌入资源的维度，因此仅当 oEmbed iframe 标签具有两个维度属性时才添加 loading="lazy" 属性，”Arntz 写道。
目前，此过滤器适用于帖子内容、摘录和文本小部件。也许有一天 WordPress 会将其扩展为评论文本。
广告的潜在问题
BlogAid 的所有者 MaAnna Stephenson 对在她的网站上展示广告的用户提出了担忧。在某些情况下，广告条款禁止延迟加载或存在技术冲突。
“是否已经对使用 Mediavine 和 AdThrive 等广告代理商在其网站上投放广告的用户进行了测试？”她问。 “他们不能延迟加载 iframe，因为广告使用 iframe，而且他们有自己的延迟加载机制来提供服务。”
问题是没有理想的方法来排除每个广告服务并将它们与others 类型的 iframe 是有区别的。从技术角度来看，它必须是一个全有或全无的特性。
处理广告完全属于插件领域。 Arntz 在帖子中描述了这样的用例。开发人员可以使用基本的 PHP 禁用 iframe 批发延迟加载或定位特定的 iframe。只需几行代码即可为特定广告服务构建插件。
Jeff Starr 还有一个禁用延迟加载的插件，叫做 Disable Lazy Loading。在出现更具体的用户需求之前，这可以作为权宜之计。
喜欢这样：
喜欢正在加载...
来源
