WordPress 6.3 将提高 LCP SEO 性能

WordPress 宣布 6.3 计划于 2023 年 8 月发布，目前已发布Beta 4。该版本将帮助网站获得更好的 Core Web Vitals SEO 分数，特别是在 Largest Contentful Paint (LCP) 方面。

虽然页面速度在主流搜索引擎中不是最重要的排名因素（内容才是最重要的因素），但页面速度很重要，因为它可以带来更高的销售额并提高广告浏览量和点击次数。

作为网站管理者，关注用户体验可以帮助确定用户与网站互动的时间、他们是否会推荐该网站以及他们是否会一次又一次地返回。

Largest Contentful Paint 最大内容绘制 (LCP)

最大内容绘制 (LCP) 是衡量渲染最大图像或文本块所需时间的指标。该指标的基本前提是揭示用户对加载网页所需时间的感知。

测量的是网站访问者在浏览器中看到的内容，称为视口。

WordPress 在 6.3 中实现的优化实现了长期努力，在特定元素上精确使用 HTML 属性，以实现最佳的 Core Web Vitals 性能。

获取优先级 HTML 属性

获取优先级，在 HTML 中写为 fetchpriority，是图像、CSS 和 JavaScript 等网页元素（资源）的 HTML 属性。

fetchpriority 的目的是告诉浏览器哪些网页资源需要以最快的速度下载，以便呈现网站访问者在浏览器中看到的内容以及视口中的内容。

不在视口中的内容（即用户必须向下滚动页面才能看到的内容）的优先级低于页面顶部和网站访问者视口中的内容。

获取优先级允许发布者控制哪些资源具有高优先级，哪些资源具有低优先级。

WordPress 6.3 包含一项新功能，可将 fetchpriority 属性添加到最有可能出现在网站访问者视口中的图像中。

WordPress 现在会自动将值为“high”的 fetchpriority 属性添加到它确定最有可能是“LCP 图像”的图像，即视口中最大内容元素的图像。

该属性告诉浏览器优先考虑该图像，甚至在计算布局之前，这通常会将 LCP 提高 5-10%”

WordPress 使用 fetchpriority 所做的一件很酷的事情是它仅适用于最小尺寸阈值的图像。

这意味着 fetchpriority 属性不会应用于导航按钮等小型资源。

WordPress 自动 fetchpriority 的另一个功能是它永远不会覆盖现有的 fetchpriority 属性。

注：fetchpriority 属性是一个提示，而不是一个指令。浏览器会尽量尊重开发者的偏好，如果发生冲突，浏览器也可能会根据需要应用其对资源优先级的偏好。优先级提示不应与预加载混淆，它们都是不同的，因为：预加载是强制获取而不是提示。

完善延迟加载

网站访问者在访问网站时在浏览器中看到的第一件事就是在视口中。

理想情况下，应优先考虑网站访问者访问时渲染第一个视口所需的网页元素。

第一个视口下方的元素不需要立即下载。

延迟加载是一种告诉浏览器哪些图像和 iframe 对于加载第一个视口屏幕并不重要的方法。

使用延迟加载属性允许首先下载立即需要的网页元素。

WordPress 最初对网页上的所有图像实现了延迟加载属性，无论它是否重要。

虽然将延迟加载应用于对于渲染首屏内容很重要的图像并不理想，但测试表明，与不应用延迟加载属性相比，它仍然有所改进。

WordPress 6.3 通过检测哪些图像是关键图像来解决这个问题。

延迟加载属性不适用于关键图像，从而允许尽可能快地下载这些图像。

最后，用于检测初始视口并应用 fetchpriority 和加载属性的新流程可用于在 WordPress 的未来版本中应用进一步优化。

更改可能会影响第三方插件

WordPress 提醒依赖核心懒加载逻辑的插件开发人员，这种情况已经发生了变化。

现在有一个新的单一函数可以控制 fetchpriority 和 loading 属性。新函数：wp_get_loading_optimization_attributes( string $tag_name, array $attr, string $context )

示例：

$attr = array(
	'src'    => 'my-image.jpg',
	'width'  => 500,
	'height' => 300,
);
$attr = array_merge(
	$attr,
	wp_get_loading_optimization_attributes( 'img', $attr, 'wp_get_attachment_image' )
);
echo '<img';
foreach ( $attr as $key => $value ) {
	echo ' ' . sanitize_key( $key ) . '="' . esc_attr( $value ) . '"';
}
echo '>';

请注意，该示例使用“wp_get_attachment_image”上下文，该上下文通常仅在 wp_get_attachment_image() 函数中使用。

依赖旧逻辑的开发人员可能需要更新他们的插件。这对于发布商来说很重要，这样他们就知道在更新到 WordPress 6.3 后要优先更新他们的插件。