针对SEO和开发人员的核心Web重要指南

核心Web Vital，或者仅仅是Web Vital，是一组新的性能指标，有助于突出显示影响用户体验（UX）的网页开发方面：页面加载，交互性和视觉稳定性。 Google将在2020年的某个时候将“核心网络生命”排名因素作为“页面体验更新”的一部分。

这些指标集中于某些事件的完成时间，包括这些事件发生时的交互作用或视觉影响，同时页面加载到相对于用户体验的稳定点为止。 这意味着得分值可以随着用户与您的页面互动而改变。 当事件在秒表时间间隔内发生得更快时，您可以获得更好的分数。

每个Web Vital统计信息的性能指标均根据以下三个结果进行分级：

• 好（通过）
• 需要改进
• 失败

当前指标是：

• 最大的满意涂料（LCP）。 从页面加载开始到完全呈现用户视口中最大的图像或文本块之间的时间间隔。 您可能会在页面加载时看到分数变化，并且当内容可见但最大的节点仍在积压中时仍要显示。 这在节流的连接速度上更加明显。
• 第一输入延迟（FID）。 页面准备好与用户交互所需的时间，这意味着随着页面的组装，页面响应单击，滚动或键盘输入以处理其相应的事件处理程序需要花费多长时间。 主线程阻止脚本任务会大大延迟用户交互。
• 累积版式移位（CLS）。 由于DOM操纵或缺少主要媒体元素的尺寸属性而导致的视口的距离和比例的测量值。 例如，当我们无法为英雄图像定义尺寸时，页面上的文字首先只会被替换，从而给用户带来破坏性的内容布局“转变”。

PageSpeed Insights（PSI）的长期用户可能熟悉类似的指标，尽管其中可能并非全部，但许多指标仍会持续存在。 核心Web Vitals代表了这​​些其他指标的**，并源于它们带来的Developer Experience复杂性。 Web Vitals的简单性旨在消除噪音，从而获得受欢迎的清晰度和更少，更广泛的指标。

Google计划将更新限制在Web Vitals年度版本中，以防止网站开发人员和SEO过于频繁地发布目标文章，但是您可以期望Google会随着时间的推移添加新的指标。 看起来，下一个添加项将用于衡量页面动画; 例如，该指标正在开发中，今年不会推出。

如何分析移动和桌面Web Vitals分数

您在移动（电话）设备或台式机/笔记本电脑之间获得独立的Web Vitals分数。 在某些工具中，您可以指定要运行查询或测试的设备类别，并且在Google PageSpeed Insights之类的工具中都可用时，可以在它们之间进行切换。 PageSpeed Insights默认使用移动设备统计信息，因此您需要切换到桌面标签才能查看页面的桌面得分与移动得分之间的差异。

当Chrome用户体验数据可用时，Google已将Core Web Vitals指标添加到Search Console报表中。 如果您要在Search Console中访问Web Vitals分数，则仪表板会同时显示两个设备类别以及索引涵盖的各个URL的分数。 您可以深入到显示有问题的页面组。

作为其Chrome用户体验报告（CrUX）的一部分，Google公开了来自超过1800万个网站的现场数据，这些网站已统计出足以报告Web Vitals的数据。 数据存放在Google的BigQuery服务中，您可以在其中查询这些网站的统计数据。 累积后，每个月的第二个星期二仍在进行更新。

为了使用新的CrUX报告查看移动和台式机得分，您需要在SQL语句中将“电话”或“台式机”作为设备尺寸。 有趣的是，“移动”不工作，因为它不是列，而“平板”由于指定数据的稀缺而很少起作用。 例如，平板电脑数据可以在查询Google来源（域）时看到，但是对于安静的网站，您不会看到它。

了解实验室与现场数据

条件可能会导致分数变化很大，并且在浏览页面时分数可能会发生实际变化。 重要的是要了解在特定环境下如何将每个分数制成表格。

只有先确定要查看实验室数据还是现场数据，才能真正解释结果。 Web Vital的“实验室”数据是通过浏览器API收集的，作为页面加载事件计时器的一部分，并通过数学近似来模拟用户交互性，而“字段”数据则由从实际用户体验中收集的相同指标组成，这些指标是通过使用事件计数器来浏览页面值被传输到存储库。

SEO从业人员和开发人员都可以使用PSI，WebPageTest，Chrome开发工具以及通过新的“ Web Vitals” Chrome浏览器扩展程序实时访问实验室数据。 PSI和WebPageTest通过计算线程阻塞脚本任务的时间来计算页面加载事件的得分，并估计页面交互延迟。

实验室数据工具在您的工作流程中对报告和提高分数非常有用。 这些应该构成您TechSEO工具库的一部分。 对于开发人员来说，如果只有少数模板为您的网站提供支持，那么这些实验室数据可能就是您通常需要的全部数据，除非您开始发现实地数据中的问题使您措手不及。

您可以将Web Vitals JavaScript库引入您的工作流和测试管道。 该库可通过CDN获得，可以包含在生产HTML中，并可以编写成将独立收集的现场数据传输到要整理它们以用于报告的位置。 示例代码演示了如何将分数传输到Google Analytics（分析）。

Lighthouse还带有各种访问点，这些访问点在您的开发工作流程中可能会有用，并且其中包括一些其他测试，可以帮助确保您遵守现代Web标准。 Lighthouse可以帮助您调试要解决Web Vitals问题的情况。

将实验室结果与现场数据进行比较。 以Chrome开头的现代浏览器通过内置的JavaScript API来衡量用户在野外实际体验您的网站的方式。 您可以使用任何JavaScript来访问这些库，也可以选择根据自己的要求修改的Google库之一。 如前所述，Google会收集Chrome用户的CrUX报告，并有时会使用相同的浏览器API公开来自Chrome用户的字段数据。

有几种访问或可视化CrUX数据的方法。 您可以利用从BigQuery输出到其他Google服务的连接器来生成仪表板，例如DataStudio的预构建连接器。

通过使用Google Search Console验证网站的所有权，当您确认站点中的CrUX中具有字段数据时，访问字段数据会更容易。 仪表板在那里显示带有界面的字段数据，该界面允许您通过单击向下钻取而不是编写SQL查询。

或者，您可以简单地使用PSI，它可以为您提供多达28天的数据。 驱动该快速检查新近度报告的API也是一个独立的开源JavaScript库，您可以将其引入开发工作流程中，或用于为应用程序仪表板提供动力。 它可以用作独立的应用程序，在此进行演示，开发人员已经为此创建了一个漂亮的前端。

Web Vitals报表故障排除

由于某些计时的动态性质以及如何收集它们，您总是需要通过关联现场数据来验证实验室数据，以便调试差异。 例如，使用Web Vitals Extension时，后续页面加载可能会改变结果值。 发生这种情况可能有两个原因。

您的浏览器能够利用自己的缓存保留区，在刷新时更快地组合资源。 此外，该扩展程序还可以在浏览页面时以一种对逼近真实字段数据有用的方式来累积交互式值，而不是通过加和线程阻塞脚本任务的时间来计算分数。

为了使用Web Vitals Extension和Chrome Dev Tools获得更准确的本地结果，请记住在工作流程中使用Web浏览器快速移动时清空缓存数据或使用shift-refresh绕过它们。 另一个技巧是在Dev Tools中开始性能记录会话之前加载“ about：blank”，以使报告清晰启动。

理想情况下，没有充分的理由，实验室分数和实地分数不会有太大差异。 无论何时进行重大更改，实验室结果都将领先于现场数据。 这意味着，如果您在现场看到测试失败，并且您的实验室分数通过了改进，那么您要么需要耐心等待现场数据赶上，要么将现场数据独立地发送到Analytics（分析）进行验证。

您可能会想像在本地模拟的最棘手的现场数据得分将是CLS。 不一定是这种情况。 您可以设置一个选项，以使用Chrome扩展程序粘贴Web Vital的叠加层，在与页面交互时，您可以在导航时观看分数变化。

这也适用于FID。 FID分数开始为空。 通过首页交互（单击，滚动或键盘输入），线程阻塞任务的时间将添加到该时刻—这将成为您的得分。

最后，Chrome开发工具中非常详细的信息使您可以通过性能记录和回放将CLS排除到细粒度的级别。 在记录中寻找输出CLS移位的“体验”部分。 还有一个设置可以使用蓝色闪烁突出显示显示中的偏移，该闪烁会在元素偏移时包裹元素并添加到您的乐谱中。

工具时间

PageSpeed Insights。 测量Web Vitals的第一站应该是PageSpeed Insights。 您可以在一份报告中同时获得实验室数据和现场数据（如果有）。 您还将获得其他一些与改进页面失败有关的其他指标，尤其是影响页面速度和下载其资产的发现。

Web Vitals Chrome扩展程序。 使用Chrome扩展程序，您可以在页面加载时访问“ Web Vitals”，并且如前所述，您可以与页面进行互动以进行故障排除，以防出现“首次输入延迟”和/或“内容布局转换”问题。 浏览网站时，也可以逐页使用它。

WebPageTest。 使用此独立的测试工具，您可以在各种条件下配置您的方法。 该信息由Chromium团队的Google工程师构建，与您从Google本身获得的任何信息一样具有权威性，并提供了RESTful API。

Google Search Console。 如果您尚未验证对网站的所有权以使用Google Search Console，则应该这样做，以帮助您深入到问题区域，其中页面在该字段中出现故障-假定您在CrUX中显示。 您可以深入查找具有类似问题的页面组。 最终，它将您链接到PageSpeed Insights。

Web Vitals JavaScript API。 使用JavaScript直接从浏览器访问指标，并将其传输到您选择的存储库。 另外，您也可以将测试引入开发过程，并确保所做的更改不会对您的分数产生负面影响。

Chrome开发工具。 Chrome本身提供了一套终极工具，这些工具可以使用“性能”标签中的报告和页面加载记录中的非常详细的信息来发现或追溯问题。 种类繁多的工具以及无穷无尽的开关和选件是进行最严格的优化工作的理想选择。