Core Web Vitals(核心网页指标)详解:这是一组由 Google 用作衡量用户体验标准的指标。本文整理提升 Core Web Vitals 的具体方法。
围绕 Core Web Vitals 的讨论热度很高,尤其在 Google 更新之后——该更新基于加载(loading)、交互性(interactivity)与视觉稳定性(visual stability)来衡量页面体验。如今一个公认的事实是,Google 在不断自我超越,尽其所能地提供更优的用户体验。在这条进化之路上,这家科技巨头使用三项指标 collectively 称为 core web vitals 来衡量用户交互与体验。
这也是为何 SEO 圈内人人都在讨论这个术语,并热衷于提供技巧,试图借这次变化把缓慢的网站变成获客机器。可惜,这些所谓的「专家」意见往往制造了更多困惑,反而掩盖了 Google 真正想传达的信息。
与 Google 的其他更新一样,本次更新旨在让搜索者的生活更轻松,并为站长提供必要工具与指南。本文将讨论这些工具、指南,以及 Google 希望你为跟上最新算法变更所做的事,让我们深入了解。
什么是 Core Web Vitals?
Core Web Vitals 是一组 Google 用作衡量用户体验标准的指标。其中,最大内容绘制(Largest Contentful Paint,LCP)用于衡量加载,首次输入延迟(First Input Delay,FID)追踪交互性,累积布局偏移(Cumulative Layout Shift,CLS)追踪视觉稳定性。也就是说,LCP 影响页面加载速度;FID 影响用户能多快与网页交互;CLS 评估用户与页面交互时的体验质量。
站长可以使用 Google 提供的免费工具 PageSpeed Insights 来检查网站的 LCP、FID 与 CLS。该工具会列出性能表现及可改进之处。下面逐一深入解析这三项要素,了解其原理与优化方法。
最大内容绘制(LCP)
如前所述,Google 非常关注页面加载速度,因为来自移动设备的搜索量已超过 PC 端。加之生活节奏加快,多数人都在路上完成搜索,完全没有耐心等待加载过慢的网页。因此 Google 倾向于呈现加载更快、体验更优的结果。
此外,注意力时长的缩短使速度成为刚需,而 Google 通过评估「最大块视觉内容加载所需时间」来衡量速度。这是一种聪明的做法,因为其余内容都会加载得更快。理想情况下,LCP 加载时间应低于 2.5 秒,超出则需修复。
你可以使用多种字段(field)或实验室(lab)工具检查 LCP,但最便捷的诊断方式仍是 PageSpeed Insights,它会明确指出需要修复的内容,从而节省大量时间与成本。在 LCP 中,通常会出现四类问题——客户端渲染问题、较高的服务器响应时间、JavaScript 与 CSS 的低效渲染阻塞(render-blocking),以及不受控的资源加载时间。
首次输入延迟(FID)
FID 是衡量交互性的关键指标,通过评估网页响应能力来反映用户体验。它测量用户首次交互到浏览器处理该请求之间的时间,可以是点击、点按或其他形式的互动,计算时排除加载时间。站长应始终努力将 FID 控制在 300 毫秒以内,以体现网页的响应性与优越体验。任何延迟或卡顿都需立即处理。
关于 FID 需注意:它仅表示处理代码中定义的事件所花时间,而非整个请求的处理时间。这是因为开发者的代码定义了事件,有时这些事件不会立即运行,问题就出在这里。开发者常假设事件定义后会很快执行,但事实未必如此,用户于是体验到卡顿,即所谓的输入延迟(input latency)。当浏览器线程被其他任务(如大型 JavaScript 文件)占用而忽略其他事件时,就会发生这种情况。借助 Core Web Vitals 报告,你可以迅速修复这一问题。
累积布局偏移(CLS)
网页布局的突然变化会给用户带来不便,因此 Google 通过累积布局偏移(CLS 分数)来衡量它。CLS 追踪可见元素位置改变、帧发生偏移时出现的意外布局位移,其计算借助 Layout Instability API,该 API 追踪布局位移条目并报告不稳定的元素。当然,并非所有布局偏移都是坏事,低于 500 毫秒的偏移会被排除在计算之外,因为它们被认为是可以预期的。
提升 Core Web Vitals 分数的方法
在讨论完 Core Web Vitals 之后,下面来看如何优化这三项指标、提升网站排名。
修复服务器端相关问题
通常站长会在站内 SEO(on-page SEO)上投入,却看不到排名明显变化。如果你正处此境,是时候关注技术 SEO(technical SEO)了,最佳起点就是你的服务器。服务器效率对提供优越用户体验至关重要,最简单的判断方式就是分析首字节时间(Time to First Byte,TTFB)。
TTFB 用于衡量服务器响应所请求内容所需的时间,它有助于确定服务器响应时间。每当用户通过浏览器连接网站,都会向服务器发送请求(称为客户端请求),服务器处理该请求的时间直接影响用户体验。满足甚至超越用户期望的唯一方法,就是降低服务器响应时间。
你可以通过优化服务器来缩短响应时间,但这需要你对服务器有足够的控制权。其他措施包括部署 CDN、使用签名交换(signed exchanges)以及利用缓存快速提供 HTML 页面。TTFB 偏高的其他原因还有效率低下资源分配与配置错误,这些需要逐一排查修复。尽管这些技术听起来简单,但确实能有效降低服务器响应时间。
实施懒加载(Lazy Loading)
当网站布满视觉元素时,高效管理资源变得必要,否则会严重影响整体页面加载时间、拉低排名。可行的解决方案是延迟加载网页上的重型元素,这正是懒加载插件的作用。它让站长延后初始化资源与对象,从而减轻对网站整体性能的压力。如果你使用 WordPress 站点,可以轻松选用多款免费插件来实现。
优化并压缩图片
图片是最大的资源消耗者,控制其体积是降低页面加载时间的可靠方法。你可以使用免费工具在保真或不保真的情况下压缩图片,有些工具还允许你更改图片格式以使其更轻量、更快。
如果调整图片格式,建议坚持使用最轻量的 JPG。尤其对最大图片而言,这能降低 LCP 并提升 Core Web Vitals 分数。你可以手动或使用 SmushIT 之类的插件来压缩优化图片。由于手动操作耗时,更推荐像 SmushIT 这样的压缩插件,它可以同时压缩现有与新图片,一键即可完成。
减少 JavaScript(JS)执行
如果锁定并延迟未使用的 JS,FID 会得到大幅改善。这减少了解析 JavaScript 的时间并加快流程。你可以使用 Async 或 Defer 选项来实现;若技术不熟练,建议坚持使用 defer 选项——顾名思义,它延迟非必要脚本、加载关键脚本。
但首先需判断是否有此必要。你可以使用 GTmetrix 或 Chrome 浏览器的「检查代码」(Inspect code)选项来确认。我们推荐 GTmetrix,因为它会列出可延迟的脚本,让流程更便捷,并明确告知可延迟多少代码而不损害性能。随后你可手动调整代码,或借助第三方插件 / 工具完成。
为图片与嵌入内容设置合适的尺寸
糟糕的 CLS 分数(超过 0.1)会迅速摧毁网页排名,因为它是构成 Core Web Vitals 的三要素之一。因此应控制影响 CLS 分数的因素,如图片、广告、嵌入内容的大小与位置等。
最佳管理方式是为每张图片、广告与嵌入内容设置尺寸并保持规整。当你为这类元素分配高度与宽度时,就为各元素预留了充足空间,浏览器加载时便不会混乱并拖慢加载时间。
确保网站具备响应式设计
如果你搜索任意关键词并点击排名靠前的站点,会发现它们都针对移动设备进行了优化。这种普遍现象源于 Google 的移动优先(mobile-first)更新,它将网站响应能力列为排名信号。如今 Core Web Vitals 已影响排名,但这并不意味着你可以忽视移动友好网站的力量。
你仍需要这样的网站,因为站点在多设备上的适配能力会直接影响 Core Web Vitals 的三大方面:
FID 会受影响,因为代码未针对 PC 以外的设备专门优化;CLS 受冲击最严重,因为页面元素会在未定义设备上突然加载;加之视觉外观杂乱、代码执行混乱,FID 同样会受影响。因此,请务必使用同时面向 PC 与移动设备设计的网页主题。
如果你为移动版网站使用独立域名或子域名,请务必添加规范标签(canonical tags),防止内容被标记为重复。最后,分别检查桌面端与移动端各页面的加载速度并相应优化。
确保表单与嵌入资源通过 HTTPS 提供
众所周知,Google 致力于让互联网对所有人更安全。在此过程中,Google 推行了 HTTPS 无处不在(HTTPS everywhere)倡议,在减少数据包嗅探(packet sniffing)与凭据窃取等犯罪方面成效显著。然而多数网站并未足够谨慎地落实这一措施,以兼顾 SEO 与安全双重收益。
除表单与嵌入资源外,将所有其他网页迁移到 HTTPS 也很重要,但这说起来容易做起来难,尤其当你的站点庞大、安装了多张 SSL 证书时。这种情况下,部分 SSL 可能已过期,对应网页需要重新加密。你可以使用 Screaming Frog 之类的安全工具轻松检测 HTTP 页面并迁移至 HTTPS,从而提升网站 SEO 与线上声誉。
审查网站安全问题
数字化导致网络犯罪数量激增,为此搜索引擎结果页(SERP)已将 HTTPS 等安全措施作为排名信号加以激励。此外,Google 在整理任意搜索词站点列表前,还会考量多项其他安全参数。若不确定网站安全状况,可在 Search Console 中调取安全问题(Security Issues)报告,它会指明需要修复的内容,让你的站点更符合 Google 的期望。
总结
你知道吗?68% 的线上体验始于搜索引擎——这仅是搜索引擎巨大潜力的冰山一角。因此,全球企业持续投入 SEO 也就不足为奇。然而,2021 年借力 SEO 的唯一方式,就是跟上 Google 的算法更新,这正是你需要关注网站 Core Web Vitals 的原因。
如前所述,你可以使用 Google 提供的免费工具 PageSpeed Insights 检查 Core Web Vitals 分数,然后落实建议的改动来提升排名。Google 的这一举措旨在通过呈现相关结果为用户提供更优体验。与 Google 其他更新一样,Core Web Vitals 已有明确定义,Google 也为站长提供了充足资源来跟进。因此,不要被自称 SEO 大师的不请自来的建议带偏,而是借助 PageSpeed Insights,通过必要微调来提升你的 Core Web Vitals。