WordPress 5.7 iframe延迟加载优化技巧与自定义方法

WordPress 5.7版本引入了一项重要的性能优化功能——默认情况下对iframe实现浏览器级延迟加载。这一改进与WordPress 5.5中针对图像的延迟加载机制保持高度一致，能够显著提升页面加载速度和用户体验。

与图像处理类似，WordPress 5.7将loading=”lazy”属性仅添加到同时具有width和height属性的iframe标签中，以避免对页面布局造成任何干扰。这一技术通过wp_filter_content_tags()函数实现，该函数在5.5版本中被引入，并特别注重可扩展性，使其能够灵活应用于新的性能优化场景。

由于延迟加载iframe的注意事项与图像处理存在诸多相似之处，建议开发者参考原始图像延迟加载公告以及浏览器级延迟加载的相关文章，以获取更全面的背景信息。此外，可以通过#50756工单了解更多技术细节。

对嵌入内容的影响
WordPress默认会在以下场景中的iframe添加loading=”lazy”属性：
– 文章内容中的iframe
– 摘要中的iframe
– 文本小工具中的iframe

WordPress 5.7 iframe延迟加载优化技巧与自定义方法

值得注意的是，WordPress网站上大多数iframe通常来自嵌入集成（oEmbed），当用户将URL粘贴到编辑器中时，系统会自动将其转换为嵌入式媒体。然而这些iframe标签的具体标记由相应Web服务控制，只有部分服务遵循提供width和height属性的最佳实践。因此WordPress仅在oEmbed iframe标记同时包含这两个尺寸属性时才会添加延迟加载属性。

自定义延迟加载iframe
开发者可以根据需求自定义iframe的延迟加载行为，方式与图像处理类似。主要的控制机制是通过wp_lazy_loading_enabled过滤器，该过滤器默认返回true（即默认开启延迟加载）。

例如，若要针对文章内容中的iframe关闭延迟加载功能，可以使用以下代码：
function disable_post_content_iframe_lazy_loading( $default, $tag_name, $context ) {
if ( ‘iframe’ === $tag_name && ‘the_content’ === $context ) {
return false;
}
return $default;
}
add_filter( ‘wp_lazy_loading_enabled’, ‘disable_post_content_iframe_lazy_loading’, 10, 3 );

此外，wp_iframe_tag_add_loading_attr过滤器提供了更精细的控制能力，允许开发者针对特定iframe标签进行自定义。例如，以下代码可以跳过最初可见视口中的YouTube视频iframe加载属性：
function skip_loading_lazy_youtube_iframes( $value, $iframe, $context ) {
if ( ‘the_content’ === $context && false !== strpos( $iframe, ‘youtube.com’ ) {
return false;
}
return $value;
}
add_filter( ‘wp_iframe_tag_add_loading_attr’, ‘skip_loading_lazy_youtube_iframes’, 10, 3 );

更多自定义指导可参考图像延迟加载公告中的”自定义延迟加载”部分。

文章网址：https://www.wpbull.com/news/1905.html