WordPress 5.9优化延迟加载性能提升页面速度

WordPress 5.5 版本首次引入了延迟加载图像的功能，随后在 5.7 版本中扩展至 iframe 元素。在即将发布的 5.9 版本中，这一功能将迎来性能优化升级。根据 2021 年中期的性能分析报告，WordPress 的懒加载机制曾导致轻微的性能回归，主要体现在最大内容填充时间（LCP）指标上。分析指出，由于初始视口中的图像和 iframe 被标记为延迟加载（几乎所有图像都添加了 loading=”lazy” 属性），从而影响了加载速度。为解决这一问题，建议通过跳过第一个内容图像或 iframe 的延迟加载来优化性能。尽管 WordPress 无法 100% 确认此方法的有效性，但分析显示在 50 个流行主题上的测试中，该改进使页面加载速度提升了 30%，显著改善了 LCP 性能。WordPress 5.9 已正式实施这一优化，进一步增强了 LCP 性能表现。

### 如何实现

目前，开发者仍可通过 wp_img_tag_add_loading_attr 和 wp_iframe_tag_add_loading_attr 过滤器来调整哪些图像和 iframe 应延迟加载或不加载。然而，为提升开箱即用性能，WordPress 5.9 引入了一项新机制：自动跳过页面上的第一个“内容图像或 iframe”以避免延迟加载。这里的“内容图像或 iframe”指的是当前主查询循环中任何帖子内容内出现的图像或 iframe，以及这些帖子的特色图像。这一机制适用于“单个”和“存档”内容页面：在“单个”页面中，唯一帖子的第一个图像或 iframe 将不会被延迟加载；而在“存档”页面中，查询结果中的第一篇文章的图像或 iframe 同样不受延迟加载影响。

### 自定义行为

对于大多数采用单列布局的主题，不延迟加载第一个内容图像或 iframe 的方法能有效提升 LCP 性能。但对于多列等复杂布局的主题，WordPress 5.9 提供了新的 wp_omit_loading_attr_threshold 过滤器，允许开发者自定义应跳过延迟加载的图像/iframe 数量——默认值为 1。建议主题作者在初始视口中可能存在多个内容图像/iframe 的情况下使用此过滤器。例如，一个使用三列帖子网格的主题可以通过设置该过滤器，覆盖档案页面上的默认阈值，使前三个内容图像/iframe 不被延迟加载。以下代码片段展示了如何实现这一功能：

“`php
function skip_lazyloading_on_first_three_archive_images( $omit_threshold ) {
if ( is_home() || is_archive() ) {
return 3;
}
return $omit_threshold;
}
add_filter( ‘wp_omit_loading_attr_threshold’, ‘skip_lazyloading_on_first_three_archive_images’ );
“`

### 未来展望

延迟加载实现的改进将显著提升依赖此功能的站点的 LCP 性能，同时对默认启发式方法不适用的站点不会产生负面影响。这只是一个良好的开端，未来随着基于块的主题进一步推动语义内容规范的实现，我们将能借助块信息对延迟加载机制进行更精细的调整。更多背景信息可参考 #53675。

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