Core Web Vitals：它们是什么以及如何测试它们？

最后更新于 2020 年 9 月 17 日

任何经营网站的人都知道让网站尽可能顺利地运行是多么重要。 落后、结构不良的网站无法传达出一种可信赖感和可信度。 普通网络用户需要有这种感觉，才能感到足够舒适以使用您的网站。 为了更好地帮助您和世界各地的 Web 开发人员改进他们的网站，Google 最近发布了 Core Web Vitals。 这是一个新程序，它提供了一系列指标来帮助确定网站的质量和潜在用户体验。 在本文中，我们将分解主要指标或 Web Vitals，以及如何测试它们以确定您的网站的状况。

什么是主要的网络生命力？

在确定站点提供的服务质量时，必须查看一些指标以形成清晰的画面。 谷歌已经为普通网络开发人员缩小了范围。 他们已经确定三个指标是可以评估网站的主要组成部分。 这三个指标是最大内容绘制 (LCP)、首次输入延迟 (FID) 和累积布局偏移 (CLS)。

Largest Contentful Paint是衡量网页加载速度的指标。 它标志着已测量相关页面的主要内容的点。 这是衡量页面上最大的文本（或图像）块加载所需的时间。 通常，您希望网站上最大的内容绘画的加载时间不超过 2.5 秒。 当然，这是网页设计中值得考虑的一点。

首次输入延迟衡量您的网站在用户与页面交互时的行为方式。 这涉及诸如响应能力之类的事情。 每当用户点击您的页面时，网站响应该点击所花费的时间是通过第一次输入延迟来衡量的。 通常，任何快于 100 毫秒的东西都是好的，但在那之后，你会想要做一些改进。

最后， Cumulative Layout Shift测量页面上视觉效果的稳定性。 它是对页面意外布局偏移量的可量化度量。 对于这三个指标中的每一个，您都希望达到所有页面加载的第 75 个百分位或更高。 就这些指标而言，这将被视为“通过”。

如何衡量核心网络生命力？

我们已经确定这些指标与执行良好的SEO 活动一样重要，那么它们是如何衡量的呢？ 由于 Google 将核心网络生命力视为用户体验的脊梁，因此他们致力于提供衡量它们的工具。 以下是衡量其网站核心 Web Vitals 性能的三种方法。

通过 Chrome 用户体验报告，谷歌收集了每个核心网络重要的匿名真实用户体验。 这很有用，因为这意味着不需要预先设置外部应用程序。 事实上，谷歌已经提前处理好了。 此外，PageSpeed Insights 等工具在同一平台上运行，这意味着您可以立即使用它们。

虽然这种方法相当简单，几乎不需要你的输入，但这种方法提供的分析并不是很详细。 它忽略了包括每页浏览遥测等。 这将帮助某人准确诊断网页的任何潜在问题。

使用 JavaScript

或者，可以使用 JavaScript 来处理核心 Web Vitals。 最简单的入门方法是简单地在其库中为 web-vitals 提取 JavaScript 的条目。 这提供了准确的即用型 Web API。 此外，Chrome 网上应用店提供了一个名为Web Vitals Chrome Extension的扩展程序，它允许您报告每个网络生命体征，而无需编写任何代码。

最后，可以使用实验室工具来测量每个核心网络生命力。 这对于那些希望在网站启动之前了解其性能的人特别有用。 然而，这并不意味着可以忽略现场指标。 用户体验受到多种因素的影响。 示例包括网络条件和可能在用户端运行的其他程序。 因此，一旦您的站点启动并运行，利用现场工具测试对您最有利。 这是确保一切井井有条的简单方法。

其他要了解的指标

虽然涵盖的核心网络生命力是最重要的考虑因素，但还有其他有价值的网络质量指标需要考虑。 毕竟，任何对网站性能和客户享受网站的改进都是可取的。 这些措施通常有助于微调网页的诊断。 其中一些包括诸如 Time to First Byte 之类的措施，这对您网站上用户的加载体验很重要，以及 Time to Interactive，如果您遇到网站上的交互性问题，这将很有帮助。 两者虽然重要，但不可现场测量，因此，它们的地位与主要的核心网络生命力不同。

灯塔 6.0 怎么了？

如果您有兴趣评估网站的质量，如果您正在寻找快速诊断，那么可以帮助您入门的一种工具是 Lighthouse。 这个审计程序是自动化的，它在 Chrome DevTools 中既可以作为 Chrome 商店提供的扩展程序，也可以作为节点模块和 CLI 使用。

最新版本的 Lighthouse 融合了 Google 对 FDI 和 CLS 等核心网络生命力指标的重视，并评估了您的网站在这些指标方面的表现。 现在，Lighthouse 提供的关于您网站的性能分数已更新为包含这些新模型，这意味着旧的加权模型现在已调整为如下所示：

这些新变化对网站的绩效评估产生了切实的影响。 只有 20% 的站点的评估分数有所提高，而在新实施的加权量表中，大约 50% 的站点的分数下降了 5 分或更多。

Chrome 开发者工具

Chrome DevTools 与 Lighthouse 一样，也经历了一些新的变化，以更好地为 Web 开发人员服务。 这些更改中最主要的是修复了问题选项卡，该选项卡在之前的迭代中经常出现问题和混乱。 此外，性能面板现在会在记录您的负载性能后在页面底部记录总阻塞时间。 该工具测量页面看起来正常运行但实际上由于 JavaScript 阻塞主线程而实际上不可用的时间，从而阻止页面对用户输入进行操作。 最后，Chrome UX 仪表板现在按内容网络生命力细分页面，允许用户将其网站的性能与其竞争对手以及整个行业的性能进行比较。

简而言之，Core Web Vitals 是衡量网页用户体验的指标。 随着事情的发展，它可能会以微小和重大的方式发生变化。 当您优化您的网页时，请尽量保持健康的核心网络生命力，您一定会让那些光顾您网站的人感到满意。