WordPress自动给图片增加fetchpriority属性的作用和控制方法

本站所有文章均为博主人工写作,绝无AI辅助成分,请放心参阅。

在WordPress升级到近期版本6.3以后,官方为了进一步提升WP的SEO表现,即在Largest Contentful Paint (LCP)方面的表现,会自动给一些图片添加一个新属性 – fetchpriority。字面意思可以理解为元素加载的优先级。参考文档点这里(https://www.searchenginejournal.com/wordpress-6-3-will-improve-lcp-seo-performance/491691/)。

我自己的WordPress博客,正文中就发现有一部分图片由原本WP自动给与的懒加载属性(loading=lazy)变成了这个优先加载属性(fetchpriority=high)。

通常这个属性会被添加在多图文的第一张图片中,如果第一张图片是一张小图片,则会顺延至后面的图片。这个过程不需要博客编写者参与,WP会自动完成这项它自认为的优化工作,但对于代码敏感的开发者,就有一点难受了。

如果一个页面需要默认所有图片懒加载,不需要WP“自说自话”地定义优先加载的图片,怎样去掉这个属性呢?这里介绍有两种方式。

第一种,彻底屏蔽掉fetchpriority这个属性

function brain1981_disable_fetchpriority( $loading_attrs ) {
	unset( $loading_attrs['fetchpriority'] );
	return $loading_attrs;
}
add_filter( 'wp_get_loading_optimization_attributes', 'brain1981_disable_fetchpriority');

第二种,给需要添加这个属性的图片一个“门槛”
参考官方文档https://developer.wordpress.org/reference/hooks/wp_min_priority_img_pixels/

function set_min_priority_img_pixels( $threshold ){
	// Set minimum threshold of 200x200 pixels for small thumbnail images.
	$threshold = 40000;
	return $threshold;
}
add_filter( 'wp_min_priority_img_pixels', 'set_min_priority_img_pixels' );

设置一个最小的图片尺寸,如果你把40000这个数字替换得很大,理论上也等于完全屏蔽了这个属性的生成。注意这里的40000指图片的长宽像素乘积,即“像素面积”。

WP的升级,总能让人学到一些新的前端小知识,虽然它们并不每次都是有用的,多知道一些总也没有坏处。

本站所有文章均为原创,欢迎转载,请注明文章出处:https://blog.brain1981.com/3167.html。百度和各类采集站皆不可信,搜索请谨慎鉴别。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以查看本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注