什么是 Core Web Vitals（CWV）？

什么是 Core Web Vitals（CWV）？

Core Web Vitals (CWV) 是一组（包含三个）Web 性能指标。Google 的搜索引擎会测量这三个指标，以帮助确定在用户执行搜索后要显示哪些网站。虽然页面加载时间长期以来一直是搜索引擎优化 (SEO) 的重要组成部分，但自 2021 年中期以来，Google 一直将 CWV 作为其排名算法的一部分。

CWV 包括：

1. 最大内容绘制 (LCP)，衡量加载速度
2. 首次输入延迟 (FID)，用于衡量页面交互性
3. 累计布局偏移 (CLS)，用于衡量视觉稳定性

Web Vitals 如何影响 SEO？

所有搜索引擎都使用称为 Web 爬网程序或网络蜘蛛的机器人来分析网站。这些机器人确定每个网站上的相关内容，并帮助确定该网站应何时显示以响应搜索查询。Web 性能是 Google 机器人检查网站的一个方面。

目前尚不清楚 LCP、FID 和 CLS 对 SEO 的影响程度，因为 Google 对其排名算法大多保密。但是 CWV 确实在很大程度上影响了 SEO。Google 于 2021 年 6 月宣布将 CWV 纳入其算法。许多行业观察家进行了案例研究，证明了搜索排名基于网站 CWV 变化而上升或下降。

这在现实中如何发挥作用？假设 Google 必须在将网站 A 和网站 B 放在搜索查询“什么是 ARPANET？”的搜索结果顶部之间做出选择。网站 A 和网站 B 在提供有关互联网历史的事实方面享有盛誉，并且都提供有关 ARPANET 主题的相似详细信息。在其他条件相同的情况下，如果网站 A 的加载速度更快、响应更快，并且在加载时的跳转少于网站 B，Google 的算法可能会决定将网站 A 显示在搜索结果的顶部——即使两个网站提供相似水准的信息。

（搜索引擎排名比本例中描述的更复杂，并且有许多因素会影响网站在搜索中的显示位置。）

为什么 Google 会考虑 Web 性能？

像 Google 这样的搜索引擎希望尽快为搜索者提供最相关的信息。加载时间的延迟往往会让用户感到沮丧，与此相反，快速加载的页面会增加用户返回的几率。虽然 Google 占据了当今英语搜索市场的绝大部分份额，但糟糕的用户体验可能会导致搜索者转向其他来源获取信息。

出于类似的原因，DuckDuckGo 和 Bing 等其他搜索引擎也可能会考虑网络性能——尽管与 Google 一样，它们的页面排名算法如何工作尚不为外人所知。

什么是最大内容绘制 (LCP)？

LCP 测量加载网页的最大部分（通常是图像或文本块）所需的时间。

LCP 不测量加载整个网页需要多长时间，但它提供了一个很好的基准来指示网页加载的速度。通常，网页上最大的元素是其主要内容，因此其加载时间通常与用户感知页面已加载的时间保持一致。

专家建议 LCP ��多应为 2.5秒。但是，更快总是更好。

什么是首次输入延迟 (FID)？

FID 用于衡量用户第一次尝试与网页交互以及网页做出响应之间的时间。换句话说，FID 量化了一个人第一次点击屏幕并使某事发生的时间。理想情况下，网页的 FID 为 100 毫秒或更短。

假设 Alan 访问了一个名为“如何擦鞋”的网页。他在页面顶部看到一个鞋类清洁产品照片轮播，然后单击右箭头导航到下一张照片。FID 是从他单击箭头到下一张照片开始加载所经过的时间。

FID 不会测量请求的事件实际发生需要多长时间——Alan 的浏览器需要多长时间才能完成下一张照片的加载。它仅测量请求与开始满足请求之间的时间。

什么是累积布局偏移 (CLS)���

CLS 测量网页在加载时“跳跃”的程度。具体来说，它测量页面布局中最大的“突发”偏移。

布局偏移是指页面内容从最初出现的位置向上、向下或沿任何其他方向移动。在这个指标的语境中，突发是一组布局偏移，它们都在一秒钟内发生。一个突发可以长达 5 秒，并且包含任意数量的布局偏移。

想象一下，在 Alan 加载“如何擦鞋”页面后，他尝试单击右箭头以查看轮播中的下一个图像。然而，图像轮播突然向下移动到页面下方，Alan 最终点击了加载在轮播上方的文本。因为网页内容没有同时加载，��页发生了偏移，导致 Alan 产生困惑。

此类网页的 CLS 分数可能很差。它显然移动了很多，将照片轮播向下移动了数十或数百个像素。

如何测量 CLS

Google 使用以下公式计算 CLS 分数：

影响分数 * 距离分数 = 布局偏移分数

• 影响分数是指当布局偏移发生时，屏幕的变化百分比。
• 距离分数衡量一个元素在屏幕上移动的距离，也是以屏幕百分比的形式表示。

如果网页在 400 像素高的屏幕上加载，然后在加载新元素时其中 200 个像素发生偏移，则影响比例为 200/400，即 50%。如果新元素将另一个元素向下移动 50 像素，则距离分数为 50/400，即 12.5%。

要计算布局移位分数，请取这两个百分比并将它们写成小数，然后将它们相乘：

0.50 * 0.125 = 0.0625

如果这是网页的最大移动量，则网页的 CLS 分数为 0.0625。

虽然理想的情况是网页在加载时根本不会发生偏移，但这仍然是一个不错的分数。专家建议网页的 CLS 分数为 0.10 或更低。

开发人员如何针对这三个指标优化网站？

如何改善 LCP

• 使用内容交付网络 (CDN)：CDN 将内容缓存在世界各地，以便内容更快地到达用户处。
• 优化图像：图像通常是页面的最大元素。缩减图像文件大小有助于加快图像的加载时间。

如何改善 FIP

• 缩减 JavaScript 函数的大小：代码繁重的动态网页可能会导致输入延迟，因为浏览器必须等待所有代码加载后才能执行。JavaScript 极简化有助于加快此过程。
• 构建静态网页：静态 HTML 网页的加载速度比动态网页快得多，当通过 CDN 分发时尤为如此。���解静态站点生成器或 Jamstack，这是一种强调静态内容的开发理念。

如何改善 CLS

• 最小化第三方页面元素：与页面的其余部分相比，页面上的第三方元素从不同的位置加载。因此，它们可能会在稍微不同的时间加载，从而在加载时更改页面的布局。最大限度地减少这些第三方元素的使用会减少由此产生的布局偏移的数量。
• 为嵌入内容保留空间：许多第三方元素（例如广告）对于网站的功能或业务模式至关重要，并且无法消除。开发人员可以在浏览器获取实际元素之前在网页上为这些元素保留空间以加载。
• 确保以最佳尺寸加载图像：这与一般优化图像的过程略有不同。台式电脑、平板电脑和智能手机都需要尺寸略有不同的图像，因为它们的屏幕尺寸各不相同。如果浏览器首先加载大的、桌面优化的图像，然后因为使用的是智能手机而需要获取移动优化的图像，这可能会导致页面上的内容在加载不同大小的图像时跳转。
• 包括图像和视频的高度和宽度：高度和宽度属性告诉浏览器图像将有多大，以便他们可以在图像或视频加载之前保留该空间。我们的 HTML5 视频文章提供了有关如何为视频执行此操作的更多信息。
• 使用 CSS 纵横比框：开发人员可以使用许多 CSS 技术来利用纵横比为页面元素保留空间——在这里了解更多信息。

Cloudflare 还提供了几项专门用于改进 Core Web Vitals 的服务。请参阅本文以了解更多信息：如何使用 Cloudflare 优化网站的 Core Web Vitals。

还有哪些重要的其他网站性能指标？

除了 CWV，还有许多其他“Web Vitals”。首次内容渲染 (FCP)、DOMContentLoaded (DCL)、可交互时间 (TTI) 和首字节时间 (TTFB) 对 SEO 的影响程度不同，但它们可以帮助开发人员识别影响 CWV 的问题。

（就其本身而言，TTFB 并不是一个特别有用的指标。但它可以作为开发人员需要修复的其他问题的标示。）

想要了解更多信息的人可以下载此白皮书，其中包含定义了许多性能指标的词汇表。