WordPress 5.7延迟加载iframe的修改介绍

WordPress 5.7延迟加载iframe的修改介绍

12
2021-02-22 09:25:13

在WordPress 5.7中,默认情况下,使用浏览器级loading属性会延迟加载iframe 。这将为iframe带来与WordPress 5.5 延迟加载图像相同的性能优势。

 

与影响图像的方式类似,WordPress将loading="lazy"仅添加iframe同时具有width和height属性标记,以避免对布局偏移产生任何负面影响。该属性使用WordPress 5.5中引入的 wp_filter_content_tags()功能添加到页面输出中,并特别考虑了可扩展性,现在允许将该属性重新用于此新性能功能。由于延迟加载iframe的注意事项与延迟加载图像的注意事项相似,因此,请参阅原始图像延迟加载公告以及有关浏览器级延迟加载的文章,以获取有关该话题的背景信息。

 

对嵌入内容的影响

 

默认情况下,WordPress会将loading="lazy" 属性添加到以下iframe:

 

文章内容中的iframe(the_content)

 

摘要中的iframe(the_excerpt)

 

文本小工具中的iframe(widget_text_content)

 

WordPress网站上使用的大多数iframe通常来自其嵌入(oEmbed)集成,当粘贴到编辑器中时,它将自动将某些Web平台资源(例如tweet或YouTube视频)的URL转换为引用的嵌入式媒体。

 

这些iframe标签的标记由相应的Web服务控制,并且只有某些Web服务遵循提供width和height属性的最佳做法。由于WordPress无法猜测嵌入式资源的尺寸,因此仅当oEmbed iframe 标记同时包含两个尺寸属性时,才会添加loading="lazy"属性。

 

自定义延迟加载iframe

 

开发人员可以自定义是否将iframe以及是否进行延迟加载,其方式类似于对图片进行延迟加载的方式,主要的过滤条件是现存的wp_lazy_loading_enabled,默认情况下返回true,也就是默认开启延迟加载iframe。

 

例如,如果您希望默认情况下针对文章内容中的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标签。例如,您可以使用此过滤器跳过可能会在最初可见视口中出现的iframe上添加loading属性,以避免影响“最大内容绘画”度量标准。过滤器具有与wp_img_tag_add_loading_attr图像相关过滤器相同的签名。

 

这是一个示例代码段,该代码段将禁用将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

 

);

喜欢这个文章就点个赞分享给好友吧~

END
相关标签

发表评论

一次支付终身使用
免费版本更新
靠谱的技术支持