WordPress 在 5.5 版本实现了图片延迟加载（懒加载），然后在 5.7 版中扩展到 iframe 中，WordPress 5.9 版本又对延迟加载的实现进行了一些微调以提高性能。

为什么要进行微调呢？因为 WordPress 之前版本是给所有的图片和 iframe 都加上 loading="lazy" 来实现的，这样页面打开之后第一屏的图片和 iframe 也被标记为懒加载，这样会导致最大内容绘制（LCP）这个页面性能指标下降。

WordPress 的主题很多，所以页面的布局也是千变万化，页面的第一屏到底有几张图片没有统一的答案，但是 WordPress 官方基于 50 个最流行的 WordPress 主题做了分析测试，简单通过不给第一张图或者 iframe 设置懒加载这一简单微调，就可以带来了全面的 LCP 指标的改进，页面加载速度提高了 30%。

所以 WordPress 5.9 就实现了这一改进，不给第一张图或者 iframe 设置懒加载，以增强页面的 LCP 性能。

如何实现

WordPress 如何实现这一改进呢？

WordPress 之前版本就提供了wp_img_tag_add_loading_attr 和 wp_iframe_tag_add_loading_attr这两个过滤器来调整是否给图片和 iframe 设置懒加载，但是这里的调整并没有通过这两个接口实现的。

WordPress 希望开箱即用，所以新增一个新函数，并在函数内设置了一个计数器，以便可以跳过给页面上的第一个“内容图像或 iframe”设置懒加载。

这里解释一下“内容图像或 iframe”的意思，它指的是 WordPress 主循环中所有文章中内容中的图片和 iframe，以及文章的特色图片。文章的详情页和列表页都适用，在文章详情页，当前文章的第一个图片和 iframe 不是懒加载的，而在文章列表页，则所有文章的的第一个图片和 iframe 不是懒加载的，如果第一个文章没图和 iframe，则顺延下去。

自定义

因为大多数大多数主题是使用单列布局来显示文章的，所以不懒加载第一个内容中的图片或 iframe 可以增强了页面的 LCP 性能，而对于多列布局的主题，WordPress 现在提供了新的 wp_omit_loading_attr_threshold 过滤器，可用于更改应跳过懒加载的图片/iframe 的数量，如上可知默认值为 1。

例如，在列表页使用三列布局的主题就可以利用过滤器将列表页面上的该阈值修改为 3，这会让前三个内容图片/iframe 不会被懒加载：

add_filter('wp_omit_loading_attr_threshold', function($omit_threshold){
	if(!is_singular()){
		return 3;
	}

	return $omit_threshold;
});

标签：wordpress教学