核心网络生命力

什么是核心网络生命力？

Core Web Vitals 是 Google 认为对网页的整体用户体验很重要的一组特定因素。它们显示按状态（差、需要改进、好）指标分组的 URL 性能。性能输出是根据实际的现场用户数据生成的。Core Web Vitals 由三个特定的页面速度和用户交互测量值组成：最大内容绘制、首次输入延迟和累积布局偏移。

简而言之，Core Web Vitals 是 Google 的“页面体验”分数（基本上是 Google 评估页面整体 UX 的方式）的一部分因素。

您可以在Google Search Console帐户的“增强功能”部分找到您网站的核心网络活力数据。

为什么核心 Web Vitals 很重要？

谷歌计划让页面体验成为谷歌官方排名因素。

页面体验将是 Google 认为对用户体验很重要的多种因素的混合体，包括：

• HTTPS
• 移动友好性
• 缺少插页式弹出窗口
• “安全浏览”（基本上，您的网页上没有恶意软件）

Core Web Vitals 将是该分数的一个非常重要的部分。

事实上，从公告和名称本身来看，可以公平地说，核心网络生命力将构成您页面体验得分的最大部分。

重要的是要指出，出色的页面体验分数不会神奇地将您推向 Google 的第一名。事实上，Google 很快指出页面体验是他们用来在搜索中对网站进行排名的几个（大约 200 个）因素之一。

也就是说，没有必要惊慌失措。谷歌表示，您必须在明年之前提高您网站的 Core Web Vital 分数。

但是，如果您想在此之前提高您的 Core Web Vitals 分数，那很好。

因为在本指南中，我将分解所有三个 Core Web Vitals。并向您展示如何改进它们中的每一个。

最大内容绘画 (LCP)

LCP 是从实际用户的角度来看加载页面所需的时间。

换句话说：这是从点击链接到在屏幕上看到大部分内容的时间。

LCP 不同于其他页面速度测量。许多其他页面速度指标（如TTFB和 First Contextual Paint）不一定代表用户打开网页时的感受。

另一方面，当谈到页面速度时，LCP 专注于真正重要的事情：能够看到您的页面并与之交互。

您可以使用Google PageSpeed Insights检查您的 LCP 分数。

这很有帮助。尤其是在发现需要改进的地方时。使用 Google Pagespeed Insights 而不是像webpagetest.org这样的工具的另一个好处是，您可以看到您的网页在现实世界中的表现（基于 Chrome 浏览器数据）。

也就是说，我建议查看 GSC 中的 LCP 数据。

为什么？

好吧，就像 Google PageSpeed Insights 一样，Search Console 中的数据来自 Chrome 用户体验报告。

但与 PageSpeed Insights 不同的是，您可以在整个网站上看到 LCP 数据。因此，您无需一个接一个地分析随机页面，而是获得一份好、坏……或介于两者之间的 URL 列表。

说起来，谷歌有具体的 LCP 指南。他们将 LCP 速度分为三个等级：好、需要改进和差。

简而言之，您希望网站上的每个页面都在 2.5 秒内达到 LCP。

对于大型网页来说，这可能是一个真正的挑战。或具有很多功能的页面。

例如，我们网站的这个页面有几十张高分辨率图片。

这就是为什么该页面上的 LCP 为 5.1 秒（这被认为是“差”）。

那不是借口。但这表明改进 LCP 并不像安装 CDN 那样简单。在这种情况下，我们可能不得不从页面中实际删除一些图像。并清理页面的代码。

努力工作？一定。值得？确实。

有了这些，您可以采取一些措施来改善您网站的 LCP：

• 删除任何不必要的第三方脚本： 我们最近的 pagespeed 研究发现，每个第三方脚本都会使页面速度降低 34 毫秒。
• 升级您的虚拟主机：更好的托管 = 更快的整体加载时间（包括 LCP）。
• 设置延迟加载：延迟加载使图像仅在有人向下滚动您的页面时加载。这意味着您可以显着更快地实现 LCP。
• 删除大页面元素： Google PageSpeed Insights 会告诉您您的页面是否有降低页面 LCP 速度的元素。

• 缩小您的 CSS：笨重的 CSS会显着延迟 LCP 时间。

第一输入延迟 (FID)

接下来，让我们看看谷歌的第二个 Core Web Vital：First Input Delay。

所以此时，你的页面已经实现了FCP。但问题是：用户可以与您的页面互动吗？

好吧，这正是 FID 测量的内容：用户实际与您的页面交互所花费的时间。

交互的例子包括：

• 从菜单中选择一个选项
• 单击站点导航中的链接
• 在字段中输入您的电子邮件
• 在移动设备上打开“手风琴文本”

Google 认为 FID 很重要，因为它考虑了现实生活中用户如何与网站互动。

和 FCP 一样，他们对什么是可接受的 FID 有具体的标准。

是的，FID 从技术上衡量页面上发生某些事情需要多长时间。所以从这个意义上说，它是一个页面速度分数。但它更进一步，衡量用户在您的页面上实际执行某些操作所花费的时间。

对于 100% 内容的页面（如博客文章或新闻文章），FID 可能不是什么大问题。唯一真正的“交互”是向下滚动页面。或捏合以放大和缩小。

事实上，我的 Search Console 甚至没有为我的网站报告 FID。

我想这是因为我真的没有任何登录页面。或其他人需要立即输入内容的页面。

但对于登录页面、注册页面或其他用户需要快速点击某些内容的页面，FID 是巨大的。

例如，想想这样一个页面的加载体验：

对于这样的登录页面，加载内容所需的时间并不是那么重要。重要的是您可以多快开始输入您的登录详细信息。

有了这些，您可以采取一些措施来提高网站的 FID 分数。

• 最小化（或推迟）JavaScript：当浏览器加载 JS 时，用户几乎不可能与页面交互。因此，最小化或延迟页面上的 JS 是 FID 的关键。
• 删除任何非关键的第三方脚本：就像 FCP 一样，第三方脚本（如 Google Analytics、热图等）会对 FID 产生负面影响。
• 使用浏览器缓存：这有助于更快地在页面上加载内容。这有助于您的用户的浏览器更快地完成 JS 加载任务。

累积布局偏移 (CLS)

Cumulative Layout Shift (CLS) 是页面加载时的稳定性（也称为“视觉稳定性”）。

换句话说：如果页面上的元素在页面加载时四处移动，那么您的 CLS 就很高。这不好。

相反，您希望页面元素在加载时相当稳定。这样，当页面完全加载时，用户不必重新了解链接、图像和字段的位置。或者错误地点击了某些东西。

以下是 Google 为 CLS 制定的具体标准：

如您所见，这是我需要努力的事情。尤其是在手机上。

您可以执行以下一些简单的操作来最大程度地减少 CLS。

• 为任何媒体（视频、图像、GIF、信息图表等）使用 set size 属性尺寸：这样，用户的浏览器就知道该元素将在该页面上占用多少空间。并且不会在页面完全加载时即时更改它。
• 确保广告元素有预留空间：否则它们可能会突然出现在页面上，将内容向下、向上或向一侧推。
• 在首屏下方添加新的 UI 元素：这样一来，它们就不会将用户“期望”留在原处的内容向下推。

了解更多

UX 的基础知识：Core Web Vitals（以及一般的 Google 的“页面体验”指标）正在尝试量化用户体验。因此，您的用户体验通常越好，您的页面体验分数就越高。谷歌的“用户体验基础”指南是一本极好的入门书。

Complete Guide to Page Speed and SEO：了解您网站的加载速度如何影响 SEO。以及改进它的方法。

Chrome Lighthouse 概述：Google Chrome 内置的一个有用工具，可以分析页面加载（或不加载）速度快的原因。