核心网络生命力
什么是核心网络生命力?
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 内置的一个有用工具,可以分析页面加载(或不加载)速度快的原因。