Core Web Vitals：定义、LCP、FID 和 CLS 简介以及 Core Web Vitals 优化技巧
已发表: 2021-03-172021 年的非凡之处不止于此。 搜索引擎已经发展并变得比以往任何时候都更具竞争力。 谷歌计划推出一项改变游戏规则的新指标，用于在其搜索引擎上对网站进行排名。 良好的用户体验和页面体验将成为一个关键的排名因素——这一切都要归功于谷歌新推出的和即将推出的核心网络生命力。
随着预计在今年晚些时候推出谷歌的核心网络生命力，对于公司来说，根据这个排名因素赶上和优化他们的网站变得越来越重要。
如果您不知道什么是核心 Web Vitals，它由什么组成，以及您可以做些什么来优化您网站的核心 Web Vitals，请继续阅读。 这个博客是给你的。
在本博客中，我们将介绍核心 Web Vitals 的可用区，并帮助您优化您的网页。 让我们开始。
什么是核心网络生命力？
图片来源：web.dev
核心网络生命力是 Google 用来评估您网站的整体用户体验的排名信号或一组标准和指标。 Google 核心 Web Vitals 评估您网站的速度、响应能力和视觉稳定性以及现有的用户体验信号，以评估整体页面体验和用户友好性。
谷歌计划推出这个新的排名信号，试图改进它研究你的页面提供的整体体验的方式。 该搜索引擎将汇总这些数据的顶点，以在其 SERPS 上对您的网站进行排名。
您网站的排名越高，其知名度就越高。 随着页面体验成为一个重要的排名元素，你不可避免地要关注它。 要检查您网站的 Core Web Vitals 数据，请查找您的 Google Search Console 帐户的“增强功能”部分。
为什么 Core Web Vitals 很重要？
Core Web Vitals 是排名信号，是 Google 的“页面体验”分数的一部分。 这很重要，因为谷歌正在将页面体验作为谷歌的官方排名因素。 
图片来源：backlinko.com
以下是核心 Web Vitals 很重要以及它对您很重要的一些原因：
- 对于即将推出的网站来说，这是一个巨大的排名机会，可以在早期充分利用谷歌排名评估的这一新变化。
- 在两个具有相似内容质量和网站排名的网站之间的战争中，页面体验可以发挥重要作用。
- 核心网络生命力现在变得越来越重要，因为如果网站不符合新的页面体验标准，在谷歌的 SERP 上享有无与伦比的排名的网站现在面临着失去当前排名的风险，而这些网站的排名则输给了同样具有竞争力的网站。
考虑到所有因素，请务必记住，您的页面体验分数只是 Google 用于对网站进行排名的大约200 个排名因素之一。
为了保持领先地位并享有与其他人相比的竞争排名优势，您应该继续优化现有的页内和页外 SEO 策略，同时优化您网站的核心网络生命力。 虽然您不会在一夜之间失去排名，但您肯定可以通过提前优化网络核心生命力来提高排名机会。
核心网络生命力的三个信号：
图片来源：web.dev
Google 在其核心 Web Vitals 评估中考虑的前三个页面速度和用户交互测量包括：
- 最大含量涂料 (LCP)
- 首次输入延迟 (FID)
- 累积版式偏移 (CLS)
信号 1：最大内容涂料 (LCP)：检查加载性能
LCP 是 Google 用来计算您的页面体验分数的第一个核心网络重要指标。 它测量您的网页的加载性能。
最大内容绘制或 LCP 可以定义为从实际用户的角度加载您网站上的页面所需的持续时间。 简单来说，您的用户从点击链接到在屏幕上看到您网站的大部分内容所花费的时间称为 LCP。
LCP 关注页面速度方面真正重要的事情，即用户能够无障碍地查看您的页面并与之交互。
要检查您的 LCP 分数，请使用 Google 的 Page Speed Insights。 你所要做的就是：
- 访问Google 的 Page Speed Insights工具。
- 在搜索框中输入您的网站。
- 单击分析。
点击“分析”后，Google 会向您显示当前页面的综合报告。 通过它了解您网站中的差距。 结果还将让您根据 chrome 浏览器数据深入了解您的网页在现实世界中的性能。
您还可以直接在 Google 的 Search Console (GSC) 上查看您的 LCP 数据。 我们建议不要使用 Google 的 Page Speed Insights，原因如下：
- 在 PageSpeed Insights 上，您将获得一份关于您在搜索栏上输入的单个网页的报告以供分析。 在搜索控制台上，您将看到整个网站的 LCP 数据。
- 通过 Google 的 Search Console，您将获得网站上好、坏或介于两者之间的 URL 的完整列表。
- Google 的 LCP 指南将您网站的 LCP 分类为“好”、“差”和“需要改进”。
理想的 LCP 测量时间为 2.5 秒或更快。 您页面的主要内容加载速度越快，您的 LCP 分数就越高。 如果您有一个包含大页面和多种功能的大型网站，这对您来说可能具有挑战性。
信号 2：第一个输入延迟 (FID)：检查交互性/响应性
第一次输入延迟是谷歌的第二个核心网络。 它衡量交互性。
简单来说，首次输入延迟 (FID) 是指页面变为交互式所需的时间。 您可以说它测量页面上发生活动所需的持续时间。 更具体地说，它衡量用户在您的页面上实际执行某些操作所需的时间。
理想的 FID 测量时间小于 100 毫秒。
以下是为 FID 评分计算的一些页面交互示例：
- 用户从菜单中选择选项所需的时间。
- 用户在字段中输入您的电子邮件所需的时间。
- 用户单击站点导航中的链接所花费的时间。
对于收集用户数据或要求登录详细信息的商业网站，FID 评分非常重要。
信号 3：累积布局偏移 (CLS)：检查视觉稳定性
累积布局偏移 (CLS) 是衡量视觉稳定性的核心网络至关重要。 它是一个度量所有不是由用户交互引起的布局更改的指标。 换句话说，我们可以说这个指标考虑了页面加载时的视觉稳定性。
如果页面加载时页面上移动的元素越多，则 CLS 就越高。 如果网页加载时移动的元素较少，则 CLS 越低。
您的 CLS 越低，您的页面得分性能就越好。
小于 0.1 的 CLS 分数被认为是网页的理想选择，因此请确保在优化您的网站以获得最佳页面体验的同时将其作为目标。
如何优化三个 Web Vitals（LCP、FID、CLS）
优化三个 Web 核心生命力对于提高页面性能和网页的整体页面体验非常重要。 以下是一些可以改进它们的方法。
如何优化最大内容绘制 (LCP)：
以下列出了您可以采取哪些措施来改善您网站的 LCP：
- 缩小CSS：CSS越小，LCP 越快。
- 删除大页面元素：幸运的是，Google 的 Page Speed Insights 会向您显示您的网站上是否存在减慢页面 LCP 的元素。 一旦你确定它是什么，你就可以快速解决它。 例如，在 Google 的 Page Speed Insights 上对 Techmagnate 的 LCP 分数的分析显示此元素是错误的：
- 升级您的网络主机：更好的主机带来更快的加载速度（包括 LCP）。
- 删除不必要的第三方脚本：尽可能避免使用第三方脚本。
- 设置延迟加载：延迟加载意味着仅当用户到达您的网页上具有图像的那个点时才会加载图像。 通过设置延迟加载，可以更快地实现 LCP。
执行上述提示可以帮助您提高获得良好 LCP 分数所需的 LCP 完美度。 您的 LCP 得分越高，您的页面体验得分和排名机会就越大。 因此，如果您还没有，请立即优化您的 LCP。
如何优化首次输入延迟 (FID)：
以下是您可以采取的一些步骤来提高您网站的 FID 分数：
- 最小化（或延迟）Javascript：最小化或延迟页面上的 JS 可以帮助您提高网页的 FID 速度，因为您的浏览器加载 JS 的需求减少或消除。
- 删除非关键的第三方脚本：谷歌分析和热图等第三方脚本会对 FID 和内容加载速度产生负面影响。 确定对您的网站不重要的内容，如果它们对您的网页不重要，则将其删除。
- 保持较低的请求计数和较小的传输大小：优化代码以限制请求计数并最小化 HTML 文件、媒体、图像等的传输大小。
如何优化累积布局移位 (CLS)：
以下是您可以采取的一些简单措施来改进您的 CLS：
- 在您的网页上为广告元素分配保留空间：执行此简单任务将确保您的内容保持在应有的位置。 没有指定广告空间的网页往往会弄乱内容结构和定位，有时会在页面上上下推动它，从而导致高 CLS 和糟糕的页面体验分数。
- 在首屏下添加新的 UI 元素：当用户浏览您网站上的页面时，他们希望元素保持在原处。 通过添加 UI 元素，您可以确保发生这种情况并且页面内容结构不受影响。
- 对媒体使用设置大小属性维度：对视频、图像、GIF、信息图表或其他媒体元素等媒体使用设置大小属性维度很重要。 这样做将向您显示该元素将在该页面上占用多少空间，从而帮助您保护您的网页免受前所未有的内容错位。
我们的网站设计和开发服务有助于优化 Core Web Vitals 分数。
如何衡量 Web Vitals 分数：
既然您知道了三个核心网络生命力是什么，这里有一些工具可以帮助您衡量它。
- Google 的 Search Console：另一个用于分析您的核心网络生命力的强大且极其方便的工具是 Google Search Console。 它在增强部分下带有独特的核心网络生命力报告，您可以在每次进行网站审核时检查该报告。 最好的部分：搜索控制台不是展示单个网页的页面性能，而是一次性显示所有网页性能数据。
- PageSpeed Insight： Google 的 PageSpeed Insight 是一个强大的工具，它可以向您展示您网页的核心网络生命力以及您可以改进的宝贵建议。
- Lighthouse： Lighthouse 是另一个 Google 工具，您可以使用它来衡量您的核心网络生命力。 它以前设计用于审计 PWA，现在已转变为监控性能的有效工具。 凭借额外的功能和 SEO 检查，灯塔可以恰当地描述为分析网页速度和页面体验数据的有效工具。
- GT Metrix： GT Metrix 是一个网站性能测试和监控网站。 它是一个免费工具，您可以使用它来评估您的 LCP、TBT 和 CLS 性能。
如何使用 Screaming Frog 审计 Core Web Vitals：
审计核心网络生命体征的概念相对较新。 对于那些想要保持准备并优化您网站的核心网络生命力的人来说，使用像 Screaming Frog 这样的工具会有所帮助，特别是如果您已经订阅了其高级会员资格。
这是您需要的：
- Screaming Frog 的付费版本。
- PageSpeed Insights API 密钥。
- 您要审核的网站的域。
让我们开始。
第 1 步：将 PageSpeed Insights API 密钥连接到 Screaming Frog
使用 Screaming Frog 优化您的核心 Web Vitals 的第 1 步包括将您的 PageSpeed Insights API 密钥与其连接。 连接它们后，您可以在 Screaming Frog 仪表板上逐页访问 PageSpeed Insights 数据和建议。
以下是您应该遵循的步骤：
- 打开 Screaming Frog → 配置 → API 访问 → PageSpeed Insights。
- 将 PageSpeed Insights 中的 API 密钥分页到“密钥”框中。
- 点击“连接”。
- 单击“连接”后，单击“指标”。
- 选择您要审核的指标，然后单击“确定”。
第 2 步：抓取网站。
下一步包括抓取您的网站。
您所要做的就是将您要抓取的网站域名输入显示为“输入蜘蛛的 URL”的框中。 输入后，等待“抓取”和“API”进度条加载。
一旦它们加载到 100%，您就可以分析您的数据。
第 3 步：向有关当局报告问题。
该工具加载您的数据后，您将获得网站上所有网页的汇编。 在这里，您需要根据百分比数字分析未达到最低核心 Web 生命值阈值的网页数量。
以下是您可以遵循的一些步骤：
- 单击顶部导航栏。
- 单击分页。
- 从下拉菜单中单击页面速度。
- 单击导出。
导出数据后，填写以下列：
- 最大内容绘制时间（毫秒）：放置一个过滤器以查找具有 4000 毫秒或更多 LCP 的页面。
- 总阻塞时间（毫秒）：放置过滤器以查找具有 300 毫秒 TBT 或更多的页面。
- Cumulative Layout Shift：放置过滤器以查找具有 0.25 CLS 或更多的页面。
基于此数据，您可以创建报告并将其发送给客户。 如果您针对内部页面体验优化要求进行此审核，您可以将此数据发送给相关团队，他们可以相应地执行页面优化。
第 4 步：使用建议报告分页问题。
现在，这是有趣的一步。 您现在知道您网站上未达到最低核心 Google Web Vitals 标准的网页的百分比。 接下来是什么？
根据您要定位的指标，对相关问题进行简洁的编译。 以下是您可以执行的操作：
- 在“概览”选项卡的右侧，向下滚动到 PageSpeed。
- 在这里，您将找到与您网站的页面速度相关的问题和建议，包括改善您的核心网络生命力的潜在解决方案。
- 页面速度的下拉菜单将包括各种指标，例如：
- 消除渲染阻塞资源（影响 LCP）
- 缩小 CSS（影响 LCP）
- 缩小 JavaScript（影响 FID）
- 删除未使用的 CSS（影响 LCP）
- 删除了未使用的 Javascript（影响 FID）
- （还有很多）
- 单击问题以查看受影响页面的数量并将此数据导出到您的工作表中。 这样做将帮助您导出所有具有相关问题的 URL。
- 根据这些数据，您可以就从您的网页中删除或推迟这些元素做出判断。
附加阅读：什么是页面速度 SEO
第五步：后期审核优化，再次爬取网站并进行对比。
确定影响核心 google web Vitals 的因素后，您可以进行优化。 优化后，您的工作是再次抓取您的网站以评估结果。
将优化后不满足最低核心 Web Vitals 要求的网页百分比与优化前的数字进行比较。
您应该考虑的其他页面体验因素：
以下是 Google 认为对用户体验必不可少的主要附加因素列表：
- 安全浏览：如果您的网站不允许安全浏览，将被视为违反页面体验标准，您将获得较低的页面体验分数。 因此，请确保您的网站不包含恶意或欺骗性内容，例如恶意软件。 您可以在 Google 的安全问题报告中查看您网站的安全合规标准。
- HTTPS：以 HTTPS 开头的网站更有可能拥有安全的站点连接。 如果您没有以 HTTPS 开头的网站，请在此处了解如何使用 HTTPS 保护您的网站。
- 移动设备友好性：使用 Google 的移动设备友好性测试检查您的网页是否适合移动设备。 如果您的网页在此快速评估中未显示为“适合移动设备”，请执行策略以针对手机和平板电脑优化您的网站。 除其他外，改进 UX 和 UI 以及完善画布外导航会有所帮助。
- 无侵入性插页式广告：您网页上的内容应该易于用户访问。 缺少它会使您的页面体验得分较低。 以下是您应该避免的最重要的事情，以使您的用户更容易访问网页内容：
- 避免使用阻止大部分网站内容的弹出窗口。
- 避免显示覆盖整个屏幕的独立插页式广告。 这是侵入性的，因为用户必须在访问主要内容之前将其关闭。
结论：
Google 已准备好在 2021 年 5 月推出核心 Web Vitals 作为关键排名信号。公司需要提前针对这一关键排名标准优化其网站。
在此博客中，我们说明了您可以采取的急需的步骤来改善您的网络核心生命力。 我们已经讨论了什么是核心网络生命力、核心网络生命力的前三个指标，以及您可以做些什么来优化您的网页以获得良好的核心网络生命力 SEO 分数。
我们还为使用 Screaming Frog 进行网站审计的用户概述了一个快速的分析页面体验的技巧。 我们希望我们在这里提供的信息有所帮助。 在您的网站优化策略中实施它们以保持您的 Google 排名。
如果您有任何疑问或疑问，请在评论部分告诉我们。
我们很想听到您的声音。