什么是核心 Web Vitals 以及如何改进它们？

谷歌宣布之前推出新的页面体验算法更新，这为网站所有者提出了一系列全新的期望。

更新的很大一部分集中在三个新指标上，称为 Core Web Vitals，Google 将使用它来确定您的网站是否提供良好的用户体验。

什么是 Core Web Vitals？

这些指标包括：

• 累积布局偏移 （CLS）
• 最大内容绘制 （LCP）
• 首次输入延迟 （FID）

为了帮助您通过核心网络指标测试，我们将探讨如何通过简单的步骤识别您网站上的问题并优化您网站的性能。

Core Web Vitals 清单：审核您的网站体验

在你开始努力改善你的核心网络生命力之前，你需要知道你的网站在哪里落后。因此，让我们通过一个简单的清单来寻找优化机会：

1. 查看 Google 核心网页指标报告
2. 识别潜在问题
3. 使用 PageSpeed Insights 进行更深入的挖掘
4. 使用核心 Web 指标扩展程序实时检查各个页面（可选）

1. 在 Google Search Console 中查看您的核心网络指标报告

谷歌在他们的搜索控制台上添加了一组新的报告。在本文中，让我们重点介绍 Core Web Vitals 报告。

当您单击该选项卡时，您会看到两个不同的图形：一个用于您网站的移动体验，另一个用于您网站的桌面体验。

如上图所示，NexHealth 在移动设备上有 204 个较差的 URL，在桌面上有 190 个。我们建议您先查看移动版报告，因为 Google（主要）使用您网站的移动版进行索引编制（以下是 Google 提供的有关优先将移动设备编入索引的详细信息）。

单击“打开报告”后，Google Search Console （GSC） 将显示您的页面失败的位置。在这种情况下，最大内容绘制 （LCP） 似乎超过 4 秒——远远超出了 2.5 秒的最佳速度。

单击该问题将显示出现相同问题的 URL 列表。

要查看其余的 URL，只需单击示例页面，即可看到其余页面。

2. 识别潜在问题

这就是它变得有趣的地方。Search Console 向我们展示了 190 个存在 LCP 问题的网址。但是，这些页面中的大多数实际上是与应用程序相关的页面。

当然，在您的应用程序上拥有出色的用户体验与在您的网站上一样重要，但对 SEO 来说可能不那么重要。

例如，对于登录页面来说，优化其首次输入延迟 （FID） 可能更为关键，因为用户关心的是能够添加其凭据并登录其帐户。

在这种特殊情况下，加载背景图像所需的时间并不是什么大问题。

注意：约翰·穆勒（John Muller）证实，相关性仍然是谷歌SEO办公时间的一个关键排名因素。因此，请根据用户的意图相应地调整优化策略。

3. 使用 PageSpeed Insights 更深入地挖掘问题

如果您查看屋顶设计的累积布局偏移 （CLS），您可以看到它超过 0.25 秒;0.1 秒是达到“良好”分数的最佳 CLS 时间。

这些绝对是您想在 Google 上排名的页面，因此让我们通过单击右侧的快捷方式来查看您在 PageSpeed Insights 中的主要页面。

这就是为什么不要只依赖一种工具很重要的原因。你要确保你看到大局。

页面速度工具不会注册任何 CLS 问题，但它确实会在“关于我们”页面上识别 LCP 问题。

该工具还提供了有关这些问题的更详细报告以及解决这些问题的潜在指导。

提示：您还可以使用GTmetrix运行测试以收集更多数据进行比较。

4. 使用核心 Web Vitals 扩展检查您网站上的主页（可选）

如果您想更进一步，您还可以使用核心 Web Vitals 扩展程序检查各个页面，以实时发现问题。

在浏览器上安装它后，扩展程序将在页面加载时测量这三个指标。

提示：利用这段时间查看页面的整体效果。单击不同的链接，查看图像的大小和格式，浏览您的网站并写下出现的任何问题。

在完成此清单时，请在文档或电子表格上做笔记，并相应地设定目标。

现在您已经有了要处理的 URL 和问题的列表，是时候进行实际优化了。

如何提高您的核心 Web 指标分数

尽管我们将单独讨论每个至关重要的网络，但必须将您网站的速度理解为不同元素和交互的组合。

可以改善 CLS 的东西也可能帮助你解决 FID，有时即使是“不相关”的优化也可能影响你的核心 Web 生命力，而这并不是你的意图。

最后，谷歌正在推动为用户提供更好的用户体验，而不仅仅是为了让你达到特定的数字。

也就是说，让我们从改进累积布局偏移开始。

如何改进您网站的 CLS

拥有稳定的布局对用户来说很重要，因为当事情突然开始移动时，可能会导致非常不舒服的情况。

一个简单的例子是误点击：

• 在某些情况下，它可能会很烦人，例如在导航菜单时移动事物，使您单击其他页面。
• 在电子商务场景中，它也可能成为压力和焦虑的来源（例如，想要取消订单但点击“确认”）。

您希望为用户保持一致，以便他们能够进行最佳交互。

那么你是怎么做到的呢？

1. 为所有图片添加宽度和高度属性

这样做基本上会告诉浏览器其布局中需要为图像节省多少空间。

例如：

<! — set a 640:360 i.e a 16:9 — aspect ratio →
<img src=”laptop.jpg” width=”640" height=”360" alt=”Macbook Air M1 2021” />

如果您在添加这些属性后放慢浏览器速度并加载页面，您会注意到它现在将在加载图像时保留文章的空间，从而防止布局移动。在优化响应式图像时，您可以使用 srcset 告诉浏览器要选择哪些图像以及它们的尺寸：

<img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="Puppy with balloons"
/>

2. 静态预留广告位空间

这样一来，您就可以在加载广告代码库之前设置元素的样式。

由于广告网络提供不同尺寸的广告，因此您需要在不同的场合、不同的浏览器和（如果可能的话）查看不同的帐户，以确定元素的最佳尺寸。

此外，请尽量避免在页面或英雄版块的顶部添加广告。对他们来说，最好在内容流中加载，甚至更好的是，在屏幕外加载。

3. 使用 link rel=preload 和 font-display 优化字体渲染：可选

如果您的自定义字体在 100 毫秒之前未加载，使用 rel=preload 将使浏览器显示回退字体，从而防止不可见文本的闪烁。

另一方面，如果您的自定义字体是在 100 毫秒之前下载的，浏览器将在不交换字体的情况下显示它。这样可以防止布局移动以适应新字体。

如何提高您网站的 LCP

假设您单击一个链接，在目标页面上，您会看到背景中的文本块和大量白色，持续约 3 秒钟。

你的第一个想法是什么？当它发生在我们身上时，我们脑海中闪过的第一件事是“这一页坏了”。

LCP 是向用户发出的信号，表明他们到达的网站功能正常并具有他们正在寻找的内容。

您希望您的首屏内容尽快可见，包括您想要呈现给用户的任何视频或图像。

在优化 LCP 时，您需要关注一个词：速度！

1.优化你的图像

图像文件大小是 LCP 的重要因素。文件大小越大 = 加载时间越慢。

要减小其大小，您可以执行以下三项操作：

• 设置正确的尺寸：4000 x 4000 张图像没有意义。想想你将如何使用你的图像，以及它的最佳尺寸是什么。在大多数情况下，1200 x 1200 绰绰有余。
• 使用 JPG 而不是 PNG：只需更改格式，您就可以大幅减小图像文件的大小。
• 使用 TinyJPG 压缩图像。

2. 升级您的托管计划。

更快的服务器响应将提高页面的加载速度。

查看服务器性能的一种简单方法是使用 KeyCDN 等工具测量页面首字节时间 （TTFB）。

结束语

为您的受众提供最佳的用户体验对于长期成功至关重要。

除了排名之外，用户体验优秀的页面具有更好的转化率和更高的回访用户，并且更有可能被分享。后者可能意味着更多的有机链接，这可以进一步提高你的排名。