Core Web Vitals

核心网页指标Core Web Vitals:终极指南

确保页面提供出色的体验对于在登陆页面和完成业务目标后满足用户的需求至关重要。

这就是为什么自从 Google 在 2021 年 6 月作为页面体验更新的一部分推出 Core Web Vitals 以来,这些指标成为一种评估用户体验的可量化方式,实际上超出了搜索排名。

本文解释了每个 Core Web Vitals 指标衡量的内容,如何分析分数,以及如何提高它们,作为 2023 年 SEO 策略的一部分。

文章目录

什么是 Core Web Vitals?

Core Web Vitals 是衡量用户在 Web 上的体验的基本真实 Web 指标。 它们由三个指标组成,分别是最大内容绘制 (LCP)、 首次输入延迟 (FID) 和累积布局偏移 (CLS)。

Core Web Vitals 衡量用户体验的特定方面:

  • Largest Contentful Paint 衡量加载性能 — LCP 确定页面加载期间主要内容最有可能加载的时间点。
  • First Input Delay (首次输入延迟) 衡量交互性 — FID 评估用户必须等待多长时间才能与页面交互。
  • Cumulative Layout Shift 测量视觉稳定性 — CLS 总结可见页面内容布局中的意外变化。

为什么 Google 推出 Core Web Vitals?

要了解 Google 为何推出 Core Web Vitals,需要了解 Google 的使命 。

Google 旨在为用户提供准确且有用的结果,以帮助他们实现搜索意图。然而,这不仅应该从内容方面理解,还应该从技术 SEO 的角度来理解。

为什么?因为当给定页面由于 Web 性能问题而无法为他们提供他们正在寻找的内容时,用户可能无法完全满足他们的搜索意图。例如,如果页面运行缓慢或其元素意外移动,用户可能会在进入主要内容之前就不满意。

[…]网站速度始终是用户体验的一个重要方面,这就是为什么 Google 推出了 Core Web Vitals,这是一组衡量网页加载性能、交互性和视觉稳定性的指标,以衡量现实世界的用户体验。

这就是为什么 Google 明白性能明显滞后的页面应该下降排名,因为它们不一定能帮助用户找到他们搜索的内容。

此外,引入 CWV 作为排名信号也使人们对页面体验信号的认识浮出水面。从那时起,不仅开发人员和 SEO 都清楚地知道,优化 Web 性能有助于网站的整体健康状况。

除了强调页面体验因素的重要性外,CWV 还有助于:

  • Google 衡量网站在 Web 上的表现,以及
  • 网站站长会优先考虑他们的工作,并针对特定的阈值进行设置。

Google Core Web Vitals 更新是何时引入的?

2020 年 5 月,Google 宣布 Core Web Vitals 将成为评估 Page Experience 以获得更好的 Web 的排名因素。

一年多后的 2021 年 6 月,Core Web Vitals 作为 Google Page Experience 更新的一部分正式推出。

最初,主页体验信号仅用于移动排名。但是, 自 2022 年 2 月再次推出以来,主页体验更新也会影响您在桌面设备上的排名 。

Core Web Vitals 是排名因素吗?

是的,Core Web Vitals 是公认的 Google 排名因素。

这些指标作为页面体验更新信号的一部分上线,包括之前存在的因素,如移动设备友好性、HTTPS 和无侵入性插页式广告。

Core Web Vitals 如何影响 SEO?

Core Web Vitals 是以特定、可衡量的方式确定用户体验的指标。

改进的用户体验意味着用户在访问网站时可以轻松找到他们正在寻找的内容 ,并且他们更有可能返回。

Core Web Vitals 是公认的 Google 排名因素, 但它们对排名的影响并不清楚。

以下是 John Mueller 在 2021 年 2 月 26 日的 Google SEO 办公时间对有关 Core Web Vitals 对搜索结果影响的问题的回答:

到目前为止,相关性仍然更为重要。因此,仅仅因为您的网站在 Core Web Vitals 方面比某些竞争对手更快,并不一定意味着,到了 5 月,您将跃升至搜索结果的第一位。 […] 在搜索结果中显示该网站对我们来说应该是有意义的。因为正如你可以想象的那样,一个非常快速的网站可能是一个完全空的网站。但这对用户不是很有用。因此,当涉及到 Core Web Vitals 时,牢记这一点很有用。这是用户注意到的事情。我们将开始使用它进行排名。但它不会完全改变一切。因此,如果您做错了,它不会破坏您的网站并将其从索引中删除。如果你做对了,它不会让你从第 10 页跳到第一位。

对于 SEO 社区的成员来说,衡量 Core Web Vitals 对排名的影响一直很困难。当页面体验更新推出时,搜索中还发生了许多其他更新,例如垃圾邮件更新和 2021 年 7 月的核心更新 。

这使得将 CWV 的影响与其他更改区分开来变得很棘手 , 现在是你应该考虑利用技术 SEO 服务的时候 。

此外,考虑到所有其他外部因素、算法调整以及 Google 处理这些变化需要多长时间,我们怎么去将 CWV 隔离为排名变化的直接原因呢?

满足 Google 建议的 CWV 指标所有阈值的页面的排名比平均水平高出一个百分点, 相当于提高了 37%。同时,至少未通过一项 CWV 指标的页面在 SISRIX 的可见度指数 中的排名低 3.7%。

Core Web Vitals 的影响都远远超出了简单的排名因素。 用户体验可以影响业务成功——例如,它可以提高转化率。

John 在回应 Reddit 的一篇帖子时总结道:

[…] Core Web Vitals 要记住的另一件事是,它不仅仅是一个随机的排名因素,它还会影响网站在排名后的可用性(当人们实际访问时)。如果你获得更多流量(来自其他 SEO 工作)并且你的转化率很低,那么该流量不会像你有更高的转化率时那样有用(假设 UX/速度会影响你的转化率,通常就是这样)。CWV 是识别和量化常见用户烦恼的好方法。

Core Web Vitals 的三大支柱是什么?

致力于提高 CWV 指标绝对是一个不容忽视的 SEO 方面。

但在动手优化过程之前,让我们仔细看看这些指标中的每一个。

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

LCP 是一个指标,专注于页面主要内容加载所需的时间。

换句话说,LCP 量化了用户需要多长时间才能看到他们正在寻找的内容在屏幕上呈现。

此外,视区中最大的元素通常是用户需要立即看到的元素。主内容的最大元素的示例通常是主图图像、视频或大段文本。

First Input Delay 首次输入延迟 (FID)

FID 衡量用户与页面交互所需的时间。

该时间是从用户进入网页后首次与网页交互到浏览器可以开始处理该交互的时间进行测量的。

这些交互可以包括以下作:

  • 单击导航中的链接,
  • 在注册表单字段中输入电子邮件地址,
  • 从下拉菜单中选择一个选项。

FID 情况的一个例子是,当采取行动时,浏览器对你的行动做出反应的时间明显延迟。

这也意味着 FID 可以帮助你发现在浏览器主线程上运行的任务会给你的网站用户带来多长的体验。

Cumulative Layout Shift 累计布局偏移(CLS)

CLS 确定在页面加载期间页面上的元素移动量,从而衡量内容的视觉稳定性。

页面元素应尽可能稳定,以便用户可以轻松点击,并确保布局偏移不会阻止他们完成所需的动作。

为了提供更详细的描述,分数 0 表示页面的内容在页面的生命周期内是完全静态的,而分数越高意味着内容是移动的。建议你将 CLS 分数保持在 0.1 以下。

Core Web Vitals 的阈值是多少?

对于每个 Core Web Vitals 指标,Google 确定了对应于不同分数的适当阈值:

  • 需要改进

以下是每个指标的具体阈值:

 需要改进
LCP≤ 2.5s≤ 4s> 4s
FID≤ 100ms≤ 300ms> 300ms
CLS≤ 0.1≤ 0.25> 0.25

为了提高大多数用户达到设定目标的几率您应该将至少 75% 的网页浏览量设定在这三个指标中每个指标的“良好”阈值内。 选择此衡量标准是为了确保网页为大多数用户提供良好的体验,无论使用的设备和网络状况如何。

还应该注意的是,除非没有收集到足够的数据,否则每个页面都会测量 CWV 指标。如果是这种情况, 则可以从整个网站或其某些部分推断出分数 。

Ahrefs 对 Core Web Vitals 进行了一项研究 ,并分析了大量网站的分数。它显示,在 2022 年,大约 33% 的网站通过了 CWV 指标,这一分数比前一年高出 10 个百分点。

但最重要的是, 根据 Google 的研究 , 在通过 Core Web Vitals 阈值的网站的情况下,用户放弃该页面的可能性降低了 24%。

Core Web Vitals 的候选指标

在 2021 年,Chrome 宣布正在考虑将两个额外的性能指标——响应能力和流畅度——用于 Core Web Vitals。

目前,First Input Delay (首次输入延迟) 衡量输入延迟的延迟。但是,它确定浏览器准备处理请求所需的时间,但不评估初始用户输入在页面生命周期内的总事件持续时间。这就是新的 Responsiveness (响应能力) 指标将捕获的内容。

了解如何在 web.dev on Responsiveness 的博文中衡量此指标 。

同时,Smoothness 将测量动画中或滚动过程中的“卡顿”或“冻结”,以帮助了解丢失的动画帧对用户的影响程度。该分数将显示动画对用户来说的流畅程度。

要了解有关 Smoothness 指标的概念及其测量计划的更多信息, 请查看 web.dev 上的 Smoothness 上的帖子 。

如何测量 Core Web Vitals?

可以使用多种工具来测量 Core Web Vitals。 确保知道这些工具使用哪些数据:

  • Field Data – 取自真实用户
  • Lab Data (实验室数据) – 从预定义的条件中收集

Chrome 用户体验报告

Chrome 用户体验报告 (CrUX) 包含来自数百万个网站上真实用户的 Core Web Vitals 的公开匿名数据。此数据集还包括有关设备和连接类型的信息,以便更全面地评估和比较不同技术和站点之间的用户体验。

CrUX 对网站所有者和开发人员具有巨大的价值 ,可以帮助他们评估页面在 Web 上的性能。

除此之外, 请查看使用 CrUX 数据的其他一些选项 。

Lighthouse  灯塔

可以在 Chrome DevTools 中访问 Lighthouse: 请务必注意,Lighthouse 包含实验室数据,这意味着你将无法使用它来诊断所有 CWV 指标。 一个适当的示例是 FID,它需要测量用户交互,因此无法在实验室环境中模拟它。 要在 Lighthouse 中分析 Core Web Vitals,请使用隐身模式,因为添加到 Chrome 的任何插件或扩展程序都会影响页面的加载方式并显示不准确的结果。 在要分析的页面上选择 Generate report 后,您将看到评估结果和一些其他实际详细信息,例如 Best Practices 和 SEO checks。 还可以查看建议的作,以进一步改善页面的加载。

Google Search Console 中的 Core Web Vitals 报告

可以在 Google Search Console 中找到专门针对 Core Web Vitals 的报告。在主 GSC 视图中,将在体验部分核心网页指标找到它。

打开其中一个报告后,可以查看具有相应状态的 URL 的概览,包括导致这些状态的现有问题。

如果单击状态,将显示受问题影响的 URL 列表。然后,可以开始解决问题。使用此报告的好处是 ,可以查看网站中所有已编入索引的页面的数据,而不必分析每个 URL。

Google Search Console 报告的数据来自 Chrome 用户体验报告,反映了访问这些 URL 的真实用户的体验。

PageSpeed Insights

PageSpeed Insights 是一个有价值的工具,用于检查页面在移动和桌面设备上的性能 ,可以为改进页面提供有用的建议。

至关重要的是,此工具可以显示页面的实验室和现场数据。

如果不想检查域中的每个页面, 可以专注于分析每种类型的几个页面 ,以了解它们的表现以及哪些页面模板可能需要调整。

例如,如果你有一个电子商务网站,请首先检查不同类型产品页面的性能,以及类别和联系页面,以及包含购物车或用于促进付款的页面。

通用 SEO 工具

一些流行的 SEO 工具包括检查 CWV 的功能。

一种这样的工具是 Screaming Frog——它的付费版本允许你在连接到 PageSpeed Insights API 后分析 CWV 指标。可以将获得的数据导出为.csv 以用于进一步分析。

另一种选择是使用 WebSite Auditor,它提供了一个机会来批量分析和细分所有页面的 CWV 指标,以简化改进它们的过程。

如何改进 Core Web Vitals?

尽管所有 Core Web Vitals 都属于同一组,但每个都专注于网站性能的不同方面,并且需要独特的方法。

以下是可以用来提高每个指标的 Core Web Vitals 分数的清单:

Core Web Vitals 指标 如何优化它们
Largest Contentful Paint 最大内容绘制 (LCP)
  • 注意服务器响应时间,例如,考虑使用 CDN 并启用缓存。
  • 对阻止渲染的资源进行故障排除:延迟、缩小或删除非关键或未使用的 JavaScript 或 CSS 文件。
  • 调图像格式和尺寸。
  • 压缩文本资源的大小。
First Input Delay 首次输入延迟 (FID)
  • 最大限度地减少浏览器主线程被 JavaScript 文件阻塞的时间,例如,将较长的 JavaScript 任务分解成更小的任务,并在服务器端生成尽可能多的内容。
  • 压缩或删除非关键或未使用的 CSS 代码。
Cumulative Layout Shift 累积布局偏移 (CLS)
  • 使用 font:display 和 link rel=preload 值管理自定义字体加载并确定其优先级。
  • 使用纵横比指定图像和视频的宽度和高度元素。
  • 注意动态注入内容的实现。

Core Web Vitals 最佳建议

2023 年 1 月,谷歌发布了改进 CWV 的最佳实践清单。尽管上一次 Core Web Vitals 更新是在一年前推出的,但发布更新的文档证明 Google 仍然负责 CWV 的持续改进。

在该文档中,谷歌强调它理解优先考虑 Core Web Vitals 优化工作的困难。这就是为什么他们最近的建议是关键但实施起来也很现实的。

此外,谷歌表示,大多数网站已经遵循了文档中提出的解决方案。

Google 关于 2023 年改进 CWV 的一些建议包括优先发现 LCP 元素,避免为获得更好的 FID 分数而进行大量渲染更新,以及避免使用诱导布局的 CSS 属性来防止布局偏移的动画。

如需进一步阅读,请查看 web.dev 上排名靠前的 CWV 推荐文章 。

如果未通过 Core Web Vitals 会怎样?

当页面未通过 Core Web Vitals 评估时,可能想知道它会对网站的性能产生多大的影响。

如你所知,由于 Core Web Vitals 是已确认的排名因素,CWV 结果会影响移动和桌面排名。

但是,如果你不关心优化这些信号,我有个坏消息要告诉你—— 它们的影响可能会超出你在 SERP 中的地位。

较差的 Core Web Vitals 分数可能在三个层面上反映网站的健康状况:

用户体验恶化

由于主要内容的加载时间超出预期,或者即使没有采取任何行动,页面的元素也会移动,如果用户在页面完全加载之前离开页面,请不要感到惊讶。

当用户在页面上结束旅程时(导致高跳出率),他们可能会前往你的竞争对手网站。

这就是为什么优化 Core Web Vitals 的目标不仅应该是通过评估,而且要使页面比竞争对手更快、更令人满意地探索。

由于搜索可见性差,网站自然流量减少

当排名下降时,用户更难在 Google 上找到你。

当第二页的排名显然对大量流量没有贡献时,第一页的顶部和底部排名也会产生巨大的差异。 根据研究的数据 ,Google 上第一名的平均点击率为 28.5%,而第十名的平均点击率为 2.5%。

随着每个位置的平均点击率显着下降,如果你的页面被 SERP 所掩盖,你不应该指望大量的自然流量。

阻碍业务增长

如果忽视, 用户体验和缺乏自然流量都会导致你的收入损失。

因为当用户因为排名较低而无法在 Google 上找到你时,就会失去展示最佳内容的潜力。此外,如果竞争网站比你的网站更快,它们就是你的潜在客户可以去、停留和转化的地方。

如你所见,照顾好你的 Core Web Vitals 与你的网站和所有营销漏斗阶段的品牌发展有关。

如果你关心自然流量和网站访问者的满意度,你绝对不应该忽视糟糕的 LCP、FID 和 CLS 分数。

后续步骤

以下是你现在可以执行的操作:

  1. 联系我们
  2. 从我们这里接收个性化计划来处理你的 Web 性能问题。
  3. 享受你的自然流量!

还在犹豫是否要给我们留言?利用我们的 Web 性能服务 ,让你的网站比竞争对手更快。

结束语

无论你是将它们视为重要的排名因素,还是更像是评估用户体验的可衡量方式,都可以预期 CWV 会对你的业务目标产生积极影响。

这就是为什么我们不需要进一步的研究来确定 Core Web Vitals 应该成为你网站 SEO 策略的固定元素。 如果花时间处理这些指标,你的用户将访问你的网站并获得满意的体验。

好消息是你不必独自完成所有工作。联系我们获取我们的网站速度优化服务  ,以加快你的网站速度并超越你的竞争对手。

内容创作不易,如果觉得Nat写的东西对您有一定的帮助,请不要吝啬对Nat的赞赏,谢谢!

提升网站的盈利能力

联系Nat并了解如何实现!
滚动至顶部

联系Nat

与Nat取得联系,我会在短时间内合理的规划关于建站,网站优化,及SEO推广方面的任何问题。