采自:埃克森数字营销

什么是核心网页指标?

核心网页指标是指一系列 Google 认为在网页整体用户体验中很重要的特定因素。核心网页指标由三个特定的页面速度和用户交互衡量组成: 最大内容绘制(LCP),首次输入延迟(FID)和累积布局偏移(CLS)。

简而言之,核心网页指标是 Google“页面体验”评分的一个项目组成(基本上就是 Google 用于评估页面用户体验的方式)。

打开网易新闻 查看精彩图片

你可以在谷歌搜索管理平台账号中的“核心网页指标”栏中找到你网站的核心网页指标数据。

为什么核心网页指标很重要?

谷歌计划将页面体验作为官方公布的排名因素。

打开网易新闻 查看精彩图片

页面体验将是谷歌让认为对用户体验非常重要的混合因素,它包括:

  • HTTPS
  • 移动端友好
  • 少弹窗
  • “安全浏览”(基本上,你的页面上没有恶意软件)

而核心网页指标将是评分的重要因素。

事实上,根据公布和名字本身来判断,可以说核心网页指标将构成你页面体验得分的最主要部分。

重要的是要指出,一个好的页面体验评分不会马上地把你推到谷歌的第一位置。事实上,谷歌很快指出,页面体验是他们用来对搜索中的网站进行排名的众多因素之一(大约200个)。

打开网易新闻 查看精彩图片

也就是说,没有必要害怕。谷歌表示,在明年之前,你必须提高你网站的核心网页指标分数。

打开网易新闻 查看精彩图片

因此,如果你能在谷歌官方实施核心网页指标的排名因素之前,去优化这些内容将会有很好的效果。

下面我们将在这篇指南中分解三个核心页面指标。并揭示如何去优化每一个核心网页指标。

最大内容绘制(LCP)

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

也就是: 从点击链接到在屏幕上看到大部分内容的时间。

LCP 不同于其他测量页速的方法。许多其他页面速度指标(如 TTFB/第一字节时间 和 First Contextual Paint/第一内容绘制)并不一定代表用户打开网页的情况。

另一方面,LCP 关注的是对于页面速度来说什么才是真正重要的: 能够看到你的页面并与之交互。

你可以使用 Google PageSpeed Insights 来检查你的 LCP 得分。

打开网易新闻 查看精彩图片

这个工具很有帮助。

特别是在发现需要改进的地方时。

在 webpagetest. org 这样的工具上使用 Google page peed Insights 的另一个好处是,你可以看到你的页面在现实世界中的表现(基于 Chrome 浏览器的数据)。

打开网易新闻 查看精彩图片

我建议你在 GSC 中查看 LCP 数据。

打开网易新闻 查看精彩图片

就像 Google PageSpeed Insights 一样,搜索控制台中的数据来自 Chrome 用户体验报告。

但是与 PageSpeed Insights 不同的是,你可以在整个站点上看到 LCP 数据。因此,与其一个一个地随机分析页面,不如得到一个好的、坏的或介于两者之间的 url 列表。

说到 LCP,谷歌有特定的 LCP 指导方针。他们把 LCP 速度分为三个方面: 好的、需要改进的和差的。

打开网易新闻 查看精彩图片

简单讲,你需要将网站上每个页面的LCP优化到2.5秒以内。

这对于大型或者有很多功能的网页来说是一个不小的挑战。

例如,如果你发现自己的某个页面的LCP为5.5秒。

那在谷歌LCP中是比较差的得分。

改进 LCP 并不像安装 CDN 那么简单。在这种情况下,我们可能需要从页面中删除一些图片。并清理页面的代码。

肯定会比较麻烦,但值得一做。

以下是你可以用以提升网站LCP的一些策略:

  • 删除任何不必要的第三方脚本: 我们最近的研究发现,每个第三方脚本放慢了页面34毫秒。
  • 升级你的网络主机: 更好的主机 = 更快的总体加载时间(包括 LCP)。
  • 设置延迟加载: 延迟加载使图像只有在有人滚动你页面时才会加载。这意味着你可以更快地实现 LCP。
  • 删除大的页面元素: Google PageSpeed Insights 会告诉你你的页面是否有元素减慢了页面的 LCP。

打开网易新闻 查看精彩图片

接下来,让我们来看看谷歌的第二个核心网页指标: 首次输入延迟。 因此,在这一点上,你的页面已经实现了 FCP,但问题是: 用户能否与你的页面进行交互? 这正是 FID 衡量的: 用户与你的页面进行实际交互所需要的时间。这种互动包括:谷歌认为 FID 很重要,因为它考虑到了现实中的用户如何与网站互动。 和 FCP 一样,他们对于什么是可接受的 FID 有特定的标准。

  • 缩小你的 CSS: 笨重的 CSS 可以显著延迟 LCP 时间。

首次输入延迟(FID)

打开网易新闻 查看精彩图片

  • 从菜单中选择一个选项
  • 点击网站导航中的链接
  • 在字段中输入你的邮箱
  • 在移动设备上打开“折叠文本”

打开网易新闻 查看精彩图片

FID 从技术上衡量一个页面上发生事情(人与页面的互动)需要多长时间。所以在这个意义上,它是一个页面速度得分。但是它更进一步,测量用户在你的页面上做互动所需的时间。

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

当然在实际中很多网站都没有FID报告。

我们猜测应该是因为页面中没有登录页。或者是其他页面可以供人们进入后可以马上输入一些内容。

对于登录页,注册页,或其他需要用户快速点击某些东西,就会产生很多FID数据。

例如,看下这个页面的加载体验:

打开网易新闻 查看精彩图片

对于这样的登录页面,加载内容所需的时间并不是那么重要。重要的是你能多快开始输入你的登录信息。

这里有一些可以用作提高你的网站的 FID 分数的侧率。

  • 最小化(或延迟) JavaScript: 浏览器加载 JS 时,用户几乎不可能与页面进行交互。所以最小化或者推迟页面上的 JS 是 FID 的关键。
  • 删除任何非关键的第三方脚本: 就像使用 FCP 一样,第三方脚本(如 Google Analytics、 heatmaps 等)会对 FID 产生负面影响。
  • 使用浏览器缓存: 这有助于加载页面上的内容更快。这有助于用户的浏览器更快地完成 JS 加载任务。

累积布局偏移 (CLS)

累积布局偏移(CLS)是指一个页面在加载时的稳定性(又名“视觉稳定性”)。

换句话说: 如果页面上的元素随着页面的加载而移动,那么你就得到了一个高 CLS。这很糟糕。

打开网易新闻 查看精彩图片

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

以下是 Google 对 CLS 的具体标准:

打开网易新闻 查看精彩图片

正如你所看到的,我们需要在移动端解决一些问题。

打开网易新闻 查看精彩图片

以下是一些可以用于最小化CLS的策略:

  • 对任何多媒体(视频、图片、 gif、信息图等)使用设置大小属性维度: 这样,用户的浏览器就能准确地知道该元素在该页面上占用了多少空间。并且不会在页面完全加载时动态地改变它。
  • 确保广告元素有一个存储的空间: 否则它们可能突然出现在页面上,将内容向下、向上或向侧面推送。
  • 在页面下方添加新的 UI 元素: 这样,它们就不会将用户“期望”保留的内容推下去。