如何针对 Google Core Web Vitals 进行优化

如何为 Core Web Vitals 推出做准备

2021 年 15 月 10 日更新

修复企业网站上糟糕的用户体验已成为许多优先事项列表的首位。

我们已经知道的一件事是，谷歌计划使用并建立在其新的谷歌搜索控制台核心网络生命力报告的基础上。 它旨在帮助企业做更多的事情，只是让他们的页面被抓取和索引，更多的是让它们对用户更有价值。

什么是 Google Core Web Vitals？

Google Core Web Vitals 是 2019 年添加到 Google Search Console 的一组报告，其中包含一小组围绕加载速度的核心指标。 它们帮助搜索营销人员和开发团队了解网站交付其网页的好坏。 谷歌根据每个网页在为网站访问者提供令人愉快的体验方面的表现对其进行评分。 Core Web Vitals 报告详细说明了网页如何根据实际使用数据（也称为现场数据）执行。

这些新的排名因素正在迅速接近。 虽然每个站点都从添加基本模式标记类型中受益，但使用嵌套并坚持更重要的内容以避免代码膨胀。

2021 年 10 月 5 日，Google 在 YouTube 演示文稿中上传了有用的提示，标题为如何改进最大内容的绘画以获得更好的页面体验。

Google 关于如何获得更好的最大内容绘制 (LCP) 分数的提示：

图像通常是最大内容绘制问题的原因。 节省的每一口都可以加快页面加载速度。 使用现代图像格式，如 AVIF 和 WebP。 有很多边缘情况与您的 LCP 分数的计算方式有关。

什么是 Google 页面体验？

页面体验是用户体验的一个子集。

页面体验集中在最常影响用户体验的网络产品的技术方面。 虽然它没有衡量和反映内容质量或视觉设计等 UX 设计方面，但所有页面体验信号基本上都在创建网站的开发团队的控制之下。 这些信号对整体用户体验有直接影响。

Google 有意推广页面体验的举措旨在对网络产生积极影响。 把它想成是积极的。 拥有这些与业务指标相关的额外性能指标有助于更轻松地获得非技术团队成员的认可。

让我们后退一点，回顾一下我们是如何到达这里的。

网站速度和 Google Core Web Vitals 的历史

Google Page Experience 的推出时间是什么时候？

2020 年 11 月 10 日，谷歌宣布，“排名中的页面体验信号将于 2021 年 5 月推出。新的页面体验信号将 Core Web Vitals 与我们现有的搜索信号相结合，包括移动友好性、安全浏览、HTTPS 安全性、和侵入性的插页式指南”。

让我们备份并获得清晰的概述。 2010 年，Google 首次开始使用网页在台式计算机上的加载速度作为排名信号。

从 2015 年开始，Google 一直将移动友好度作为排名信号。到 2018 年，移动优先索引流程正式启动。 当 Google 确定网站已准备好进行移动优先索引时，网站管理员和网站所有者会在 Search Console 中收到通知。 这发生在 Google 在为搜索目的进行评估的过程中评估您网站的移动版本； 你不能触发它。

2020 年初，谷歌在其谷歌搜索控制台中引入了一套新的工具，称为 Core Web Vitals。 它明确表示，这些报告中的指标将在 2021 年成为排名信号。Core Web Vitals 扩展了之前的网站速度指标，以帮助企业解决某些网页移动广告和支持文件加载的问题。

Web Core Vitals 的引入提醒任何不关心移动友好性的散乱的网站所有者，这显然很重要。 虽然 Mobilegeddon 更新推出缓慢，但现在必须正视让网站为移动用户提供更好体验的重要性。

谷歌在网站速度和移动方面的工具和报告方面的投资向网站所有者发出了信号，即他们需要让他们的网站更易于使用，或者希望只是一张在线电话卡。 今天我们宣布，排名中的页面体验信号将于 2021 年 5 月推出。

Google 搜索页面体验由哪些基本指标构成？

排名前三的 Google 搜索页面体验指标说明：

• 加载： LCP 评估特定网页上最大的内容元素（例如特色图片、英雄图片或 H1 标题文本）需要多长时间才能在访问者的视口中显示。 寻求获得 1.2 秒或更短的 LCP。
• 交互性： FID（首次输入延迟）：时钟从用户第一次与您的页面交互（如单击链接、触发按钮等）到浏览器响应该交互的时间运行。 这个测量值来自人们第一次点击的任何交互元素。 这在访问者需要做某事的页面上很重要，因为这是页面变得可交互的时候。 也称为 TBT 报告（在 GTmetrix 中）； 它表示页面加载过程中调用的脚本阻塞了多少时间。 寻求获得 150 毫秒或更短的 TBT。
• 视觉稳定性： CLS 指示在页面加载时访问者体验到的页面布局有多少变化。 寻求 0.1 或更低的 CLS 分数。

要审核您的内容以确定其是否符合使用“快速页面”徽章标记的 Core Web Vitals 阈值，请使用 Google 的开发人员工具来评估加载速度。 为了协助完成这些优化任务，GTmetrix 变得更加复杂。 GTmetrix Reports 添加了一种新的评分方法。 以前的 PageSpeed 和 YSlow 报告已更新为整体 GTmetrix 等级。 在 Lighthouse 的支持下，GTmetrix 用户现在可以获得性能和结构分数。

什么是首次输入延迟 (FID)？

FID 是一个分数，用于评估浏览器在处理用户执行点击或点击等操作之前需要多长时间来管理其他任务。 这表明了 UI 体验对用户的响应程度，并衡量了 CPU 对 JavaScript 处理的负担。

页面在页面加载和页面生命周期中执行 JavaScript 的方式直接影响 FID。 如果访问者在应用程序完全准备好之前尝试完成操作，那么 JavaScript 完全执行所需的时间很重要。

改善首次输入延迟的方法：

• 延迟或消除第三方文件或跟踪像素。
• 推迟所有非必要的脚本。
• 改进 JavaScript 执行。

GTmetric 和其他瀑布可以很好地跟踪性能，以揭示过度消耗加载时间的位置。 一旦确定，就可以对其进行调查和解决。

什么是新的 Google 页面体验指标？

谷歌将通过其新的页面体验指标向用户展示网页核心网络生命力的质量。 这已经显示在一些 SERPS 中。 它的大小和形状类似于指示 Accelerated Mobile Page 状态的 AMP 图标。 由于谷歌擅长测试和制作交互，这可能看起来会有所不同，因为它被更广泛地采用。

虽然 Core Web Vitals 指标提供了比我们以前在 Google Search Console 报告中获得的更详细的信息，但在全面推出后，很可能会出现许多误报。

如何确定最重要的核心 Web 重要任务

在进行更深入的网站性能优化之前，首先关注最具影响力的加载速度指标。

1.首先解决所有标记为“差”的问题。

2. 接下来优先考虑哪些问题会对 URL 产生负面影响，或者哪些问题会损害您的创收最多的 URL。

3. “需要改进”的问题现在是优先级列表中的下一个。

大幅改进布局内容转换的需求让我感到非常惊讶，但它显然是获得最佳 SEO 结果的因素。 该页面在内容上方没有延迟加载广告，没有侵入性插页式广告，并且所有图像的宽度和高度都已正确定义。 但是，原始特色图像的大小为 1280 x 860 像素。 这导致了图像大小调整问题； 当浏览器加载它时，他们将其调整为 1200 x 800 像素。 这会导致布局偏移和随之而来的加载延迟。 确保您的图像大小适合 JASON-LD Schema 标记。

当您修复了所有 URL 中的特定问题后，您可以确认您是否修复了所有 URL 的问题。 单击开始跟踪以开始为期 28 天的监控会话，以检查您的站点中是否存在此问题的实例。 如果在 28 天期限内您网站上的任何 URL 中均未出现此问题，则认为该问题已解决。 任何 URL 中存在该问题足以将该问题标记为未修复； 但是，无论问题状态如何，各个 URL 的状态都会在整整 28 天内处于评估状态。

关于 CVW 的常见问题

学习、排除故障和测试/调整许多选项以提高 CWV 分数可能需要花费大量时间。 以下是答案：

如何计算 CLS 分数？

页面的 CLS 分数是通过将加载时意外移动的用户屏幕的比例乘以它经过的距离来计算的。 网站有时甚至会面临一半的屏幕受到内容转移的影响。 这让观众很恼火。 同时，内容必须在屏幕上移动的距离也会考虑在内。因此，要计算 CLS 分数，请将受影响的屏幕区域 (0.5) 乘以经过的距离 (0.15)，您可以获得一个有用的分数。

造成内容布局移位问题的常见原因有哪些？

• 删除特色图片上的边距：在一个网站上运行 Lighthouse 工具和 Chrome 开发工具，图形类 =“featured-media”代码被证明是一个问题。 通过添加这个额外的 CSS 代码.featured-media { img display: none; } .featured-media { img display: none; } ，桌面的性能得分立刻提升了两个满分。
• 解决字体加载方式的任何问题：一些网页设计师喜欢花哨的标题网页字体的外观； 但是，它们的加载方式通常会导致布局偏移。 测试以发现是否存在需要解决的缓存稀释的潜在问题以及字体的整体大小是如何交付的。 我们发现，通过指定 fallback font-display，通过添加{ font-display: fallback;} ，我们可以使用 font face 指令改善元素的渲染行为。
• 动态注入内容：这通常发生在将横幅或表单动态添加到页面时。 此外，无法看到“x”以退出弹出窗口的用户可能会感到沮丧。 此外，当页面元素可用时，它们仍然是页面被重新排列和“移动”的罪魁祸首。
• 缺乏图像规范：当页面的图像有错误、不良或没有指定图像尺寸时，浏览器会在没有这些信息的情况下增加工作和时间来加载页面，然后需要稍后转移来计算它。
• 没有尺寸的页面嵌入、广告和 iframe ：通过通知浏览器这些视觉页面元素所需的布局空间，您可以避免浏览器需要在每个视觉就位后移动。

遵循上述 CLS 改进策略后，同一站点的 Cumulative Layout Shift 得分现在为 0.01。 这对于帮助改善网站的移动搜索结果大有帮助。

加载 CSS Async 可以改进哪些核心 Web Vitals 指标？

因为这是人们首先看到的，所以在首屏部分计算的指标意味着确保用户可以快速看到关键内容。 一些内容和支持文件可以在后台加载，直到您达到“完全加载时间”。

Holistic SEO 的所有者 Koray Tugberk GUBUR 表示，“在将 CSS 文件作为异步加载和提前为用户打开网页之间的关系中，一些 Pagespeed 指标比其他指标受到更积极的影响。 更快的 CSS 文件加载尤其改善了 First Paint、First Contentful Paint、Largest Contentful Paint 和 Speed Index 指标”。

将您的关键内容放在易于看到的位置以匹配搜索者的意图。 不要让网站访问者等待寻找问题的答案。

Google 如何衡量加载速度？

PageSpeed Insights 中的改进和诊断建议来自实验室测试； 从现场结果中收集的性能指标更加准确。 一旦您对如何提高 PageSpeed 有了大致的了解，Google 对此评分的逻辑就会对您的网络重要结果产生积极影响。

三个新的性能指标涵盖了这个 Web 性能世界。 它们通过 Chrome 中的 API、Android 上的 Chrome、Chromium Edge 浏览器得到支持。 Google 用于衡量页面体验的数据来自 Chrome UX 报告 (CRUX)。 它由全球 Chrome 浏览器中的真实页面加载提供的匿名性能统计信息组成。

CRUX 独立于缓存状态，评估所有常规页面加载，包括登陆和会话中网页。 它在单页应用程序中跳过软导航，也称为路线更改。 软导航有可能受到惩罚。 较低的 CLS 分数和 LCP 值表明遇到意外布局变化的用户变化减少。

图像压缩对 CWV 分数有多重要？

您无需牺牲图像质量即可获得良好的 CWV 分数。

今天的浏览器可以在提供时管理高分辨率图像。 当您仍然想压缩它们时，只使用您需要的大小，以便在高分辨率显示器上看起来很棒。 您可以使用 CND 并考虑从不太复杂的图像或背景开始。 了解并遵循 Google 的图片指南。

@Jamsession18 于 2021 年 3 月 26 日问 Google 的 John Mueller：

“你能回答我关于所用图像质量的问题吗？ 我在一家新闻网站工作，该网站目前正在针对 CWV 进行优化，为此，我们的技术正在以牺牲图像质量（现在的图像模糊）为代价将图像压缩到极端水平。 值得付出代价吗？”

“这听起来是个坏主意。 页面体验只是我们考虑排名的众多因素之一，但如果用户不喜欢您的内容，他们就不太可能转换（无论您希望他们如何转换），也不太可能想要回来。” -???? 约翰 ？？？？ @约翰穆

现场数据和实验室数据有何不同？

区别之一是 Lab 数据对测试有用，Field Data 更适合排名。

实验室数据是关于在独特环境中发现的性能数据。 Chrome 开发工具和webpagetest.org 工具通常用于获取实验室数据。 字段数据包含从使用 Chrome 浏览器访问您网站页面的用户集合中收集的数据。 字段数据是填充您的 Google Search Console 报告以及 Google Page Speed Insights（其页面报告依赖实验室和字段数据）的内容。

可以通过 BigQuery 使用自动化来获取字段数据。 对于没有获得大量自然流量的较新站点或页面，您可能会发现没有可用的字段数据。

为什么改进所有三个 Web Core Vitals 指标很重要？

所有三个 Core Web Vitals (CWV) 基准测试都表明了提供良好用户体验所需的关键组成部分。 必须满足 3 个指标中的每一个，才能获得 2021 年 5 月推出的相关 Google 排名信号提升的资格。Google 为我们提供了 6 种方法来衡量这些核心 Web Vitals。 正如我们从 Google 的高级网站管理员趋势分析师 John Mueller 那里了解到的，必须满足所有最低要求才能从即将到来的算法更新中受益。

“我的理解是，我们看看它是否处于绿色状态，然后就可以判断它是否正常。 所以如果它是黄色的，那么它就不会是绿色的，但我不知道最终的方法是什么。

有许多因素结合在一起，我认为一般的想法是，如果我们能够识别出一个页面符合所有这些标准，那么我们希望在搜索排名中适当地使用它。

我不知道会采用什么方法，有些事情可以，有些事情不完全可以，比如如何平衡。” ——约翰·穆勒

这使得快速加载页面与慢速加载的感知变得非常重要。 满足所有三个指标是一个机会； 小企业可以提升他们的 SEO 并获得竞争优势，帮助他们赢得新业务。 每个网站的重点都应该放在改善移动搜索结果而不是桌面体验上，因为这对最大数量的搜索者来说最重要。

像很多搜索营销一样，整体方法是最好的。 很容易过度关注网站性能的一个领域而忽视其他需要关注的领域。 这方面的一个例子是添加所有你能想到的模式标记，当它可能只是添加价值不大的代码时。 阅读我们的电子商务模式标记综合指南，以最好地放大您的产品在 SERP 中的可见性。

进行搜索的人是否能够分辨出哪些网站通过了 Core Web Vitals 测试？

想要在点击进入页面之前发出页面速度、页面响应能力和页面视觉稳定性因素已被企业考虑的信号的人将看到一个徽章。

约翰·穆勒 (John Mueller) 表示，谷歌可能会在通过谷歌 Core Web Vitals 的页面的搜索结果中引入徽章。 徽章将充当各种过滤器。 它向使用 Google 搜索的人确认，如果他们点击进入带有此 CWV 徽章的网页，他们可以获得积极的体验。

核心 Web Vitals 测试工具

测试您的 Core Web Vitals 时，使用隐身窗口绕过不需要的问题。

现在有几种工具可用； 我们更喜欢灯塔。 通过使用许多，您可以获得更多的整体观点。 但是，它们在应用程序、技术熟练程度所需的技能水平和报告方面存在很大差异。 Search Console 作为每个网站的核心 Web Vitals 仪表板非常有用。 根据谷歌的说法，获得整个网站的鸟瞰图对于成功至关重要。 Chrome 扩展程序和 PageSpeed Insights 更适合那些快速的页面评估。 随着时间的推移，我们会在这里添加更多内容。

一旦这项工作到位，我们将亲自报道您的搜索营销进度报告。 我们希望您了解并享受这些好处。

改进技术 SEO 方面始终需要必要的支持和开发人员资源才能完成。 与各种规模的企业合作的搜索营销人员一直在为预算批准而苦苦挣扎。 今天，每个网站的性能现在都有一个明确的重要性分数。 如果过去有人没有认真对待这一点，那么现在它就是一个严峻的现实。 为什么要等到你在排名中受到惩罚？

多年来，谷歌见证了这些斗争，并听取了 SEO 询问如何获得支持。 这家科技巨头通过在其 Google Search Console 报告中透明化并将其确立为额外的排名信号，巧妙地强调了性能的重要性。 最好将 Google 页面体验描述为一组衡量一个人与网页交互的满意度的因素。 专注于您的客户和网站访问者，以及如何让他们在您的网站上获得最佳体验。

概括

根据谷歌在 CRUX 中衡量的 Core Web Vital 性能指标的优化，可能会在未来产生巨大的推动作用。 但即使在这些网络生命力成为排名因素之前，它也会对您网站的用户体验产生积极影响。 消费者想要更快的体验。 提高加载速度问题会导致跳出率降低、页面会话长度增加、用户满意度得分更高、转化率更高、SEO 流量增加。 最终，所有这些都会导致收入增加。

页面性能优化的好处在于它通常通过相对较小的代码改进来实现。

Hill Web Creations 可以通过全面的技术 SEO 审核来引导您的优化工作。