什么是 Core Web Vitals 以及如何优化它

2021 年，谷歌将页面体验作为排名因素。 它的主要目的是提高网络性能。 随着页面体验更新，如果您希望您的网站在谷歌搜索结果中排名，核心网络活力已成为一个重要的考虑因素。

当有人在谷歌上搜索特定关键字时，谷歌将如何确定它必须在顶部呈现哪个网站以及在底部呈现哪个网站。 好吧，毫无疑问，它首先考虑的是内容。 内容将始终主导排名，但除了内容之外，谷歌还衡量网页的许多其他元素，如关键字、这些关键字在页面中的使用、反向链接等等。 页面性能也是其中之一。 谷歌通过核心网络生命力衡量页面性能。

在本文中，我们将讨论 Core Web Vitals 以及如何对其进行优化以在搜索结果中排名更高并获得更多流量。

什么是核心网络生命力

Largest Contentful Paint、First Input Delay 和 Cumulative Layout Shift 是构成 Core Web Vital 的三个关键性能指标，它们衡量页面为用户加载的速度和效率，以及网站元素的交互性和稳定性在整个加载过程中保持不变。

让我们进一步分解它以便更好地理解。

1. LCP（Largest Contentful Paint）

LCP 评估网站首屏最大元素（图片、视频、动画、文本等）加载和显示的速度。

一个好的 LCP 是 2.5 秒，而 2.5-4 秒之间的任何东西都需要改进，超过 4 秒被谷歌认为是差的。

最大的内容油漆统计

1. Largest Contentful Paint 占 Google Lighthouse 性能得分的 25%。
2. 43% 的移动 URL 和 44% 的桌面 URL 通过了 2.5 秒的 Largest Contentful Paint 基准。
3. 根据研究，B2B 网站的平均移动 Largest Contentful Paint 分数为 7.05s，远高于获得及格分数所需的 2.5s 分数。
4. 根据研究，零售网站的平均移动 Largest Contentful Paint 分数为 9.17s，远高于获得及格分数所需的 2.5s 分数。

2. FID（首次输入延迟）

页面的 FID 是浏览器开始处理事件处理程序以响应用户与页面的第一次交互（例如单击、点击）所花费的时间。

良好的 FID 低于 100 毫秒，而介于 100-300 毫秒之间的任何东西都需要改进，高于 300 毫秒被认为是差的。

第一个输入延迟统计

1. 首次输入延迟占 Google Lighthouse 性能得分的 25%。
2. 89% 的移动 URL 和 99% 的桌面 URL 满足 100 毫秒的首次输入延迟基准。

3. CLS (Cumulative Layout Shift)

CLS 是一种有用的以用户为中心的衡量视觉稳定性的指标，因为它有助于量化用户遇到意外布局更改的频率。 这是视觉稳定性测量的重要方面。

良好的 CLS 低于 0.1，而介于 0.1 和 0.25 之间的任何东西都需要改进，而高于 0.25 则被认为是差的

累积布局变化统计

1. Cumulative Layout Shift 占 Google Lighthouse 性能得分的 5%。
2. 46% 的移动 URL 和 47% 的桌面 URL 通过了 .1 的 Cumulative Layout Shift 基准。

现在为什么 Core Web Vitals 很重要

像 Core Web Vitals 这样的工具有助于提高您的网站在搜索结果中的排名。 它们至关重要，因为它们可以告诉 Google 网站的运行状况以及可以改进的地方。

不可否认，Core Web Vitals 提升了用户体验作为排名元素的重要性。

因此，如果您在一个内容质量几乎相当的领域进行竞争，那么针对 Core Web Vitals 进行优化会产生巨大的差异，这意味着如果 Google 必须显示具有相同内容质量的两个页面，那么它会更喜欢具有良好的 Core Web Vitals 得分。 请记住，没有什么可以取代您网站上的优质内容。

Google 的 John Mueller 对 Core Web Vitals 的看法

Core Web Vitals 要记住的另一件事是，它不仅仅是一个随机排名因素。 它还会影响您网站排名后的可用性（当人们访问时）。 如果您获得更多流量（来自其他 SEO 努力）并且您的转化率很低，那么该流量将不会像您拥有更高转化率时那样有价值（假设 UX/速度会影响您的转化率，这通常会影响）。

简而言之，拥有可靠的 Core Web Vitals 不仅仅是搜索引擎优化。 每个网站所有者都应努力提升访问者的整体体验。

即使您的网页内容非常出色，您仍然需要确保网站的每个方面都经过优化以获得较高的搜索引擎排名，以便您的网站对目标受众可见。 Core Web Vitals 还强调了用户体验的重要性。

如何衡量 Core Web Vitals

您可以在几个测试、报告和扩展的帮助下检查您网站的核心网络活力。

其中最重要的是：

• PageSpeed Insights 的 Core Web Vitals 评估；
• Google Search Console 中的 Core Web Vitals 报告；
• Core Web Vitals Chrome 扩展程序。

1. PageSpeed Insights 中的核心 Web Vitals 评估

Google PageSpeed Insights (PSI) 分为两个部分：

• 确定您的实际用户体验（Core Web Vitals 评估）
• 确定性能问题（实验室数据、PSI 分数）。

专注于第一部分以提高您的 Core Web Vitals 分数。 Field Data 报告合并了此分析。 本研究的数据来自 Chrome 用户体验报告 (CrUX)。 此数据基于实际用户与您网站的互动。 谷歌在确定搜索引擎排名时会考虑这些字段结果。

PSI 的“诊断”部分也是一个很好的资源，可用于详细了解可以改变三个指标中的任何一个的因素：

PSI 在确定总体优化分数和提供优化建议时会考虑真实用户指标和实验室数据。

虽然此信息很有用，但它是在实验室中使用特定设备和网络在受控环境中收集的。 但是，您网站的某些访客可能使用过时的技术或功率不足的连接。 这就是为什么将实验室结果与您网站的实际性能进行比较并不是一个好主意。

PSI 并不总是提供字段摘要。

当 CrUX 没有从现场收集到足够的数据时，就像小型网站经常出现的情况一样，就会出现这样的问题。 值得庆幸的是，我们可以从其他来源收集现场数据。

2. Google Search Console 中的 Core Web Vitals 报告

Google Search Console (GSC) 中添加了两份新的 Core Web Vitals 报告，一份用于移动设备，一份用于桌面设备。

每个报告都提供有关字段数据和 URL 组性能的信息。

这些报告非常适合发现跨多个 URL 的常见问题。 因此，您将收到有关整个网站的信息，而不仅仅是一页。

例如，如果您有大量相同的页面，其中最大的元素是图像，则每个页面的 LCP 指标都相同。 在这种情况下，GSC 会在每个页面上发现 LCP 问题。

简而言之，这些新的 GSC 报告是跟踪整个站点的核心网络生命力性能的最显着方法。

3.使用Chrome用户体验报告（CrUX）获取现场数据

可以通过以下两种方式访问​​ CrUX 数据集

• Chrome 用户体验报告 API - 要访问此开发人员必须熟悉 JavaScript 和 JSON。
• BigQuery – 需要 Google Cloud 项目和 SQL 技能。

您需要做的不仅仅是通过 PSI 或 GS​​C 传递页面。 但是，它们提供了更多用于排列和可视化数据的选项。 例如，BigQuery 具有数据切片和与其他数据集连接的功能。

如果您拥有实施这两种策略的资源和技术知识，请尝试这两种策略。

关于 Core Web Vitals 的一些重要统计数据

1. 前 100 个桌面域中有 56% 通过了 Core Web Vitals
2. 重品牌效应——主要品牌即使表现不佳也排名很高。
3. 2022 年 2 月，前 100 名移动设备中有 61% 通过了 Core Web Vitals
4. 2022 年 2 月，美国前 100 个域名的平均加载时间在桌面上为 2.38 秒，在移动设备上为 2.32 秒——低于谷歌 2.5 秒的合理阈值。
5. 2022 年 2 月，桌面和移动设备的平均 CLS 分数分别为 0.11 和 0.08——这是前 100 大网站的移动设备平均 CLS 首次低于谷歌 0.1 的合适阈值
6. 2020 年 1 月，只有 22% 的桌面和 27% 的移动前 100 个域分别通过了 Core Web Vitals。 快进到 2022 年 2 月，这一比例在台式机上翻了一番以上，达到 56%，在移动设备上达到 62%。 这表明表现最好的域在网络性能方面取得了显着进步。
7. Top 100、B2B、Healthcare 和 Dict/Reference 站点在两种设备上的平均 LCP 为 2.5 秒或更短。
8. 平均而言，旅行的移动 LCP 比字典/参考网站差 1.6 倍。
9. 平均而言，Travel 的桌面 LCP 比 B2B 域差 1.5 倍。
10. 位置 1 的 URL 比位置 9 的 URL 更有可能通过 Core Web Vitals 评估 10%。
11. 从位置 1 到位置 5，每个位置的 Core Web Vitals 评估通过率降低了 2%。

如何优化核心网络生命力

既然我们已经牢牢掌握了 Core Web Vitals 及其功能，我们可以将注意力转向一些建议的改进 Core Web Vitals 的步骤。 请记住，您的测试结果将决定您提高分数所需采取的步骤。 因此，必须考虑 PageSpeed Insights（或您使用的其他测试工具）提出的意见和建议。

以下是经过验证的提高 Core Web Vitals 分数的基本策略。

1.使用内容分发网络

使用 CDN 可以在很大程度上提高站点性能。 使用 CDN 的网站加载速度相对较快。 为什么？ 因为 CDN 使服务器和最终用户之间的数据传输变得快速。

CDN 是一个庞大的互连服务器网络。 您可以使用 CDN 将您网站的内容存储在许多服务器上。 当用户访问您的网站时，地理位置最近的服务器会向他呈现网站，从而减少数据传输时间。

通过使用 CDN，您可以减少用户的 LCP 加载时间。 Time-to-First-Byte 也可以通过使用 (TTFB) 来减少。

2.优化图像

另一种提高 LCP 的方法是通过图像优化。 如果图像具有高分辨率，则它们的尺寸会很大，并且需要花费合理的时间来加载，这会对 LCP 分数产生不利影响。

使用压缩图像可以加快加载速度。 TinyJPG 等许多网站都可以免费减小图像的大小而不影响其质量。 通过确保图像的大小和尺寸正确，可以进一步优化图像。

因此，明智的做法是确保您没有在网站的某些区域使用不必要的图像尺寸。 包括适当的属性可以帮助您的浏览器为页面的各个部分提供理想的空间量，从而减少不断改变布局的需要。

通过更改源代码，您可以更改媒体文件的宽度和高度属性。

3.实现延迟加载

您的 LCP 和页面加载时间都可以从使用延迟加载中获益。 Smush 只是提供延迟加载的几个 WordPress 插件的一个例子。

延迟加载，也称为按需加载，是一种提高网页内容性能的方法。

延迟加载有助于仅加载必要的部分并延迟加载其余部分，直到用户需要它，这与批量加载相反，批量加载一次加载整个网页并一次性呈现。

4.优化您的网站字体

您在网站上使用的字体会像图像一样影响其加载时间。 这是因为每个字体粗细组合都需要浏览器加载整个字体系列。

Web 字体优化是提高站点速度的简单方法。 这是因为优化的网络字体在用户计算机上占用的空间更少，加载速度更快。

另一方面，如果尚未加载相关的网络字体，浏览器可能不会自动呈现文本组件。 但是，切换到替代字体可能会导致不必要的布局更改，从而降低您的 CLS 分数。

在为您的网站决定字体时要小心。 如果您使用两种以上的字体而不是将每种字体应用于每个元素，最好使用全局字体来选择性地应用必要的类型和粗细。 使用此方法，您可以将字体下载限制为内容所必需的字体。

5.升级您的 WordPress 主机

如果站点加载时间过长，则可能表示更改托管计划。 将您的托管从共享托管更改为专用托管可以在很大程度上提高 FCP。

与其选择最便宜的，不如选择提供您需要的所有功能的最佳托管站点是一个明智的决定。 WordPress 主机提供的服务质量对于网站的成功至关重要。 它具有深远的影响，从页面加载时间到安全性。 特别是如果您有一个大型或复杂的网站，这不是偷工减料的地方。 相反，升级您的托管服务提供商或计划是优化您的网站和缩短加载时间的最快但最强大的策略之一。

托管阅读： Bluehost Review

6.消除渲染阻塞资源

如果没有随附的 HTML、CSS 和 JavaScript 文件，则无法呈现网站页面。 这些文件都包含可以禁止人们访问他们试图查看的内容的脚本。

但是，您可以通过删除渲染阻塞资源和任何不需要的 CSS 或脚本来防止这些脚本对您的用户体验产生负面影响（并反过来帮助提升核心网络生命力）。

有许多方法可以实现这一点。 第一个是从 JavaScript 和 CSS 中删除任何多余的空格或注释。 此外，您可以通过合并文件来减小 JavaScript 和 CSS 的大小。

7.延迟加载JavaScript

这是消除渲染阻塞元素的另一种方法，可以显着提高 FID。

这通过阻止 JavaScript 文件的加载使网页加载速度更快。

它加载页面的其他内容，而不是等待 JS 文件加载。 除此之外，您还可以配置您的站点以快速加载出现在首屏的关键 CSS 脚本。 您可以通过从主要 CSS 文件中提取材料并将其内联到您网站的代码中来实现这一点。

8.实施内容缓存。

在增强用户体验方面，智能内容缓存是您可以使用的最强大的工具之一。 HTTP 协议的中央内容交付技术使用缓存，或临时存储早期请求的内容。 如果内容的缓存策略允许，传送链中任何一点的组件都可以存储它的副本以加速后续请求。

缓存对提高 Core Web Vital Scores 有很大帮助。

9.预加载英雄图片

英雄图片通常是出现在首屏内容之上的最重要的元素。 所以，如果他们加载得更快，那么整体用户体验就会大大提高。 使用“rel=preload”链接属性可以大大降低 LCP，这对于加载了 CSS 或 JavaScript 的英雄图片特别有用。

10.避免将广告或弹出窗口置于其他内容之上。

低 CLS 分数是由于在顶部添加内容而导致页面内容移动的结果。

为广告、iframe 和其他形式的动态内容留出空间。

不为它们分配特定空间肯定会破坏布局，就像图像和视频一样。 为避免内容溢出容器，请使用overflow: hidden 属性并选择具有足够大小的容器。

11.分解长任务

这必须是您的首要任务。 当长任务延迟主线程时，它不能及时响应用户的请求。 通过分解它们可以显着提高网站性能。 这减少了 FID 并增强了 UX

12.停止或推迟运行任何不必要的第三方脚本

如果您自己的网站脚本与第三方的脚本冲突，则可能无法按时运行。 考虑哪些脚本对最终用户最有帮助，并给予它们更高的优先级。 广告和弹出脚本不应位于列表的顶部。

根据 Searchmetrics SEO 可见性，美国前 10 大域名在核心网络生命力方面的表现如何。

所有指标以及域是否通过了核心网络生命力指标，每月都会在域级别进行报告。 2022 年 2 月，75% 的维基百科桌面页面加载时间不到 1.1 秒，该域的 FID（以毫秒为单位）和 CLS 均得分为 0，通过了 Core Web Vitals。

基于 Searchmetrics SEO 可见性指标的移动设备 CWV 的前 10 名。

在可能的情况下，使用域的移动版本。 然而，这主要依赖于 CrUX 的数据收集。 与桌面版相比，通过 Core Web Vitals 的移动网站比例更高。

结论

Core Web Vitals 改变了游戏规则，可以改善每个人的网络体验。 这些衡量标准将继续包含在 Google 的排名系统中。

这就是为什么即使您没有发现任何异常，也必须密切关注它们。

为了保持网站的成功运行，不断提升用户体验至关重要。 多亏了众多有用的工具和插件的可用性，这个过程可以变得比其他方式更简单、更容易。 或者，如果您觉得这让您望而生畏，那么您可以聘请开发人员为您完成这项工作。