如何审核 Core Web Vitals
了解如何使用 Screaming Frog SEO Spider 审核您的 Core Web Vitals。
如何使用 SEO Spider 审核 Core Web Vitals
您可以使用 Screaming Frog SEO Spider 和 PageSpeed Insights API 轻松衡量您网站上每个页面的 Core Web Vitals (CWV)。
以下是 Core Web Vitals 的简要介绍以及如何将其集成到您的抓取结果中。
什么是 Core Web Vitals？
Core Web Vitals 是一组真实世界的指标，Google 将在（2021 年 6 月）使用这些指标来衡量加载网页时用户体验的关键方面。
除了作为 Google 评分的小信号外，他们还在探索使用符号标记搜索结果，以指示具有良好或不良 CWV 分数的页面。
最初，Google 将使用的三个指标是：
最大内容渲染时间
最大内容渲染时间 (LCP) 是衡量页面整体加载速度的指标——页面加载速度越快越好。当大部分内容加载完毕时，它会在时间轴上标记出来。
下面您可以看到页面加载的图示，其中包含首次内容渲染时间 (FCP) 和最大内容渲染时间 (LCP)：
交互到下次绘制
交互到下次绘制 (INP) 使用 来自 Event Timing API 的数据来衡量您的网站对用户交互的反应速度。
INP 评估页面在其整个生命周期内对任何点击、轻击和/或交互的延迟，并报告最长的持续时间，忽略异常值。
INP 的目标是最大限度地减少用户交互后绘制下一帧所需的时间。较低的 INP 意味着页面始终能够快速响应用户交互。
累积布局偏移
页面的累积布局偏移 (CLS) 衡量 URL 加载时的稳定性。我们都遇到过令人沮丧的经历，即阅读新闻网站时，文章文本会随着导航的加载而向下跳动，而 CLS 衡量的是整个页面上的这种情况。
下面您可以看到页面加载时的图示。在每个步骤中，都会添加内容，导致之前的元素上下移动：
Core Web Vitals 评估
Core Web Vitals 基于 Chrome 用户体验报告 (CrUX) 提供的真实用户指标。虽然可以使用模拟实验室数据来衡量性能，但当没有真实用户数据时。此 CrUX 数据基于过去 28 天的用户页面访问量。
最初，这些 Web vitals 将仅成为 Google 算法在移动页面上的组成部分，但桌面版也将在稍后推出。
每个 Web Vital 都通 过三个分类进行基准测试：良好、需要改进和差。
要使页面“通过” Core Web Vital 评估，必须在所有三个指标中都被认为是“良好”。
通过 Core Web Vital 评估将为 URL 提供最大的排名优势。
Google 提供了每个阈值的便捷图示：
- 最大内容渲染时间 (LCP)：衡量加载性能。为了提供良好的用户体验，LCP 必须在页面首次开始加载后的 2.5 秒内发生。
- 交互到下次绘制 (INP)：衡量交互性。为了提供良好的用户体验，页面的 INP 必须为 200 毫秒或更短。
- 累积布局偏移 (CLS)：衡量视觉稳定性。为了提供良好的用户体验，必须保持 CLS 为 0.1 或更小。
如何查看页面的 Core Web Vitals
您的网站的 Core Web Vitals 会被记录并存储在 Chrome 用户体验报告中，有各种 API 可以连接到此报告，但您最常在两个位置看到它们。
对于单个 URL，您可以使用 PageSpeed Insights (PSI)，它会标记页面是否已通过 Core Web Vitals 评估：
或者，您可以在 Google Search Console (GSC) 中查看页面样本，它会显示一段时间内的性能：
但是，在 PSI 中，您一次只能使用一个 URL，而在 GSC 中，您只能看到页面被标记为良好、需要改进还是差，而看不到各个分数。
如何在 SEO Spider 中分析
相反，使用 Screaming Frog SEO Spider 和 PageSpeed Insights API，我们可以大规模地收集站点上每个页面的 Core Web Vital 数据（对于 CrUX 和实验室数据）。要进行设置，只需按照以下步骤操作：
1. 连接到 PageSpeed Insights API
启动 Screaming Frog SEO Spider 并转到“Configuration > API Access > PageSpeed Insights”，输入免费的 PageSpeed Insights API 密钥：
有关生成 API 密钥的分步说明，请单击 此处。
2. 选择您的指标
连接到 PSI API 后，单击“Metrics”选项卡。首先，选择您想要移动数据还是桌面数据（请记住，CWV 最初仅适用于移动数据）。
接下来，选择您希望为每个 URL 报告的 PageSpeed Insights 中的确切数据。我们建议使用默认选择，因为它将包括来自 CrUX 报告的数据、来自 Google Lighthouse 的实验室数据以及用于改进领域的机会数据。但是您可以选择或删除每个指标以满足您的需求。
注意，某些指标（例如 Core Web Vitals 评估）仅在 14.2 及更高版本中可用。
如果手动选择，可以在 CrUX Metrics 下找到 Core Web Vitals，在 Lighthouse Metrics 下找到实验室数据：
3. 抓取网站
打开 SEO Spider，在“Enter URL to spider”框中键入或复制您要抓取的网站，然后点击“Start”。
或者，以上传一组 URL 以在列表模式下进行分析（Mode > List）：
该网站将被抓取，CWV 数据将通过 PSI API 合并。因此，只需等到抓取和 API 进度条都达到 100%。
4. 查看 PageSpeed 选项卡
单击 PageSpeed 选项卡，因为它将显示所有已发现的 URL，这些 URL 具有从 API 报告的速度数据：
PSI Error 和 PSI Status 列将指示 API 是否未能获取特定 URL 的任何数据。有关更多信息，请参阅我们的 常见问题解答。
5. 分析结果
进入 PageSpeed 选项卡后，如果向右滚动，您将看到从 API 收集的 CrUX 指标：
您将找到的第一列（如果已启用）是“Core Web Vitals Assessment”。如果它在所有三个 Web Vitals 中都被认为是良好，则它将被标记为通过或失败。
在上面的屏幕截图中，我们可以看到顶部 URL 的 LCP 为 2.1 秒（低于 2.5 秒），CLS 为 0.01（低于 0.10），INP 为 181 毫秒（低于 200 毫秒）。因此，此 URL 在每个指标中都被认为是良好的，并且通过 CWV 评估。
在这里，您应该检查哪些页面失败以及它们在哪个指标中失败。然后尝试通过站点增强来提高评分。
如果 CWV 的 URL 没有填充数据，那是因为没有足够的真实世界速度数据，因为该页面没有足够的访问者。只有最受欢迎的页面通常在 Chrome UX 报告中具有足够的真实世界字段数据。
如何改进 Core Web Vitals
您可以检查各个领域以提高您的 web vital 性能，您可以通过启用 PageSpeed Insights API 设置中的机会直接在 SEO Spider 中查看其中许多领域。
如果已启用，您可以在 PageSpeed 选项卡中查看每个机会的各种过滤器：
选择其中一个过滤器将显示所有可以通过所述增强功能改进的页面以及它们可能带来的时间节省。如果您然后突出显示一个 URL 并选择下方的 PageSpeed Details 选项卡，您将看到有关该页面的更多信息——包括该页面的所有机会以及每个机会的各个资源：
最后，您可以使用顶部菜单“Reports > PageSpeed”下拉列表批量导出站点上的机会数据。
如何优化最大内容渲染时间
许多因素会影响页面的最大内容渲染时间，通常任何可以提高整体加载时间的因素都会降低 LCP。一些需要检查的领域包括：
图像优化 – 诸如图像之类的大文件会大大增加页面的整体大小以及下载所有资产所 需的时间。确保每个图像都已正确调整大小，并在适当的情况下使用延迟加载。您可能还需要考虑更新、更高效的图像格式，例如 WebP，或改进现有图像文件的编码。
您可以在 SEO Spider 中相应的 PageSpeed 过滤器中查看其中许多机会：
- 正确调整图像大小
- 延迟加载屏幕外图像
- 有效地编码图像
- 以下一代格式提供图像
提高服务器响应时间 – 慢速服务器将导致响应缓慢并增加加载时间。尝试尽可能地减少此响应时间。这通常可以通过改进的托管或使用内容分发网络 (CDN) 来完成。
要查看的机会过滤器：
- 减少服务器响应时间 (TTFB)
删除渲染阻塞资源 – 在解析 HTML 时，遇到的任何样式表或 CSS 都会导致解析器暂停，从而延迟 LCP。理想情况下，您会延迟任何非关键 CSS 和 JavaScript，以加快主内容的加载速度。
要查看的机会过滤器：
- 消除渲染阻塞资源
优化您的资源 – 除了阻止渲染之外，诸如 JavaScript、CSS 和字体等文件都需要时间来下载和处理。尝试缩小并删除页面加载中任何不必要的文件。
要查看的机会过滤器：
- 缩小 CSS
- 缩小 JavaScript
- 删除未使用的 CSS
- 删除未使用的 JavaScript
- 启用文本压缩
- 预连接到所需的来源
- 预加载关键请求
- 使用视频格式制作动画内容
如何优化交互到下次绘制
交互到下次绘制可能会受到大型脚本的长时间执行的影响，因此请尝试尽可能地减少这种情况。最初需要检查的一些领域包括：
优化您的 JavaScript – 通过删除脚本中不必要的部分（或整个脚本），您可以减少执行和渲染这些文件所花费的时间。这还包括捆绑包中的任何重复模块以及现代浏览器中不再需要的旧 JavaScript。
要查看的机会过滤器：
- 缩小 JavaScript
- 删除未使用的 JavaScript
减少使用的第三方脚本的数量 – 通过删除任何不必要的插件或未使用的脚本，您将减少要传输的数据和要渲染的资产。在某些情况下，可以延迟加载第三方代码，以减少对初始页面加载的影响。
您可以在下方 PageSpeed 详细信息的 Overview 选项卡中检查页面上使用的第三方资源的总数。
最大限度地减少主线程工作 – 如果浏览器正忙于渲染主线程，则用户交互将被延迟，直到完成此操作。如果您减少主线程执行时间，用户交互将感觉更灵敏和即时。
要查看的机会过滤器：
- 尽量减少主线程工作
- 减少 JavaScript 执行时间
降低资源计数和大小 – 页面所需的每个资源都需要时间来请求、下载和执行。通过减少所需的请求数量和总下载大小，您将加快页面的执行速度。
要查看的机会过滤器：
- 缩小 CSS
- 缩小 JavaScript
- 删除未使用的 CSS
- 删除未使用的 JavaScript
- 启用文本压缩
如何优化累积布局偏移
对 CLS 的大多数改进都是通 过确保页面以适当的顺序渲染并为每个资产定义间距来实现的。一些最初需要检查的领域包括：
在资源上使用高度和宽度属性 – 所有图像、广告、视频和 iframe 都应具有定义的 <height> 和 <width> 属性。这将确保页面加载时具有这些资源的适当间距，而不是在添加它们时移动其他内容。
向下加载内容 – 优先考虑从上到下的页面加载，以便内容不会添加到上方并向下推其他资产——这通常在 cookie 横幅中看到。
确保自定义字体不会导致 FOIT/FOUT – 如果自定义字体在页面加载的后期应用，这可能会导致文本在被替换时闪烁 (FOUT)，或者在渲染自定义字体之前显示不可见的文本 (FOIT)。理想情况下，应预加载任何自定义字体，以确保在将文本添加到页面时将其应用于文本。
避免非合成动画 – 非合成动画在低端设备上或在页面加载的同时运行密集型任务时可能会显得不稳定，从而导致布局偏移。为避免这种情况，请使用高性能、仅合成器的动画。
要查看的机会过滤器：
- 确保文本在 Webfont 加载期间保持可见
- 图像元素没有显式的宽度和高度
- 避免大型布局偏移
有用提示
- Web Vitals 带来的排名提升不是二元的。这意味着，被归类为“需要改进”的页面，会比同样被归类为“需要改进”但性能更差的页面获得更多的排名提升。但是，所有被归类为“良好”的页面将获得相同的排名提升。
<https://twitter.com/JohnMu/status/1395798952570724352> - 如果您的 URL 没有显示任何 CrUX 数据，并且 PSI 状态列为“成功”，则可能是该 URL 没有收到足够的真实用户访问，无法为 CrUX 报告生成足够的速度数据。您可以通过在 PageSpeed Insights 中运行该 URL 来验证这一点，它会显示一条消息。在这种情况下，您应该使用具有 CrUX 数据的类似页面（在布局上），或者您可以使用模拟的实验室数据代替。实验室数据可以在“指标”选项卡的“Lighthouse”下拉菜单下找到（默认情况下启用）。
- 当某些指标可用但其他指标不可用时，您也可能会收到部分字段数据。
<https://twitter.com/rick_viscomi/status/1403094734990712843> - 使用实验室数据时，唯一不可用的指标是 INP（因为这需要“时间跨度”模式和用户交互）。您可以改用 Total Blocking Time (TBT) 来代替，作为衡量资源被阻止频率的指标，这将增加 INP。
- 还可以使用 Origin 数据，该数据指示整个域中 Web Vitals 的平均值。但是，我们理解 Google 会单独处理页面，或者在没有数据的情况下使用来自类似页面的 Vitals。
- 如果分析大型站点，您可能会达到 PSI 配额限制。在这些情况下，您可能需要等待它重置，或者分析较小的页面样本。您可以在此处查看您当前的配额限制。
- CrUX 数据基于过去 28 天的用户交互，因此对站点的任何更改都需要 28 天才能反映在 CrUX 中。在此之前，您仍然可以使用实验室数据作为粗略的衡量标准。
- 要查看页面 LCP、CLS 和影响 INP 的长任务的可视化指示，您可以在 Chrome 开发者工具的“性能”选项卡中记录和查看加载时间线。选择 Web Vitals 复选框：
总结
本教程有望帮助您使用 SEO Spider 分析和改进 Core Web Vitals，更重要的是，改善用户体验。
我们强烈建议您进一步阅读 –
- How to Audit Core Web Vitals – Tom Crewe
- Web Vitals – Google Developers
如果在遵循上述指南后遇到任何问题，请查看以下常见问题解答 –
- Why Is My PSI Key Invalid?
- Why Do I Receive An Error Status For The PSI API?
- Why Do PSI Scores Differ To A Browser?
- Does The PageSpeed Insights API Affect Analytics?
或者，请通过支持与我们联系，我们可以提供 帮助。