第十五课 · 阶段四 技术 SEO

慢一秒、抖一下,用户就走了

页面快不快、稳不稳,是实实在在的体验。Google 把它拆成三个可量化的指标——Core Web Vitals(核心网页指标)。这一课认识这三个数,也把「它到底影不影响排名」这件事说清楚,不夸大也不忽视。

学完你能做什么
解释 LCP、INP、CLS 各测什么;区分真实用户数据与实验室诊断;读一份 PageSpeed Insights 报告,挑出最值得处理的体验问题。
1 三个指标

加载、交互、稳定,各测一件事

Core Web Vitals 目前是三个指标,各盯着体验的一个侧面:

LCP
加载 · Largest Contentful Paint

首个视口中最大的符合条件的图片或文本块,多久呈现。它不等于整页全部加载完。回答:「主要内容多快能看到?」

INP
交互 · Interaction to Next Paint

衡量访问期间点击、轻触、键盘交互到下一次画面更新的响应表现,重点关注慢交互。回答:「操作跟不跟手?」

CLS
稳定 · Cumulative Layout Shift

衡量页面生命周期中非预期的版面位移(如正要点的按钮突然被挤走),按位移的会话窗口计算。回答:「画面稳不稳?」

INP 已经取代了旧的 FID
如果你在别处看到 FID(首次输入延迟),那是旧指标——Google 已于 2024 年 3 月用 INP 正式取代它。INP 衡量得更全面(看整个访问期间的交互,不只第一次)。学新的就够了。
2 红黄绿

拖一拖,看每个数落在哪一档

每个指标都分三档:良好 / 需要改进 / 差。下面三条轨道是教学示意——拖动手柄,看数值落进绿区、黄区还是红区,感受一下各自的阈值在哪:

记住三个「良好」线就够用了:LCP ≤ 2.5 秒、INP ≤ 200 毫秒、CLS ≤ 0.1。注意 CLS 是个没有单位的分数(衡量位移比例),不是时间。

3 和排名的关系

是「会被看的信号之一」,但不保证排名

这里最容易被人写错,我们用 Google 的原话来把分寸拿准:

一次实验室满分,不等于真实访问达标
实验室数据(lab)在固定环境运行,适合找问题;真实用户数据(field)反映实际访问,PageSpeed Insights 和 Search Console 中常来自 CrUX。CWV 的良好评估按第 75 百分位(p75),移动端与桌面端分开看;CrUX 报告通常覆盖最近 28 天。因此一次 Lighthouse 高分不等于真实体验良好,也不是排名分数。

PageSpeed Insights 上方看真实数据,下方看 Lighthouse 诊断,别混成一个分数。常规 Lighthouse 加载测试不能直接测出完整访问的 INP,可用 TBT(总阻塞时间)等诊断线索定位脚本问题。新站或流量少的页面可能没有足够 field 数据;「暂无数据」既不是通过,也不是失败。还要看报告显示的是该 URL 还是整个来源站点的数据。

4 各改各的

每个优化手段,主要帮哪个指标?

三个指标的毛病不一样,药方也不同。下面每个做法,主要改善哪个指标?点错会给提示:

速度之外:手机和渲染也要能读到内容

移动优先索引(mobile-first indexing)指 Google 主要使用移动版内容来索引。手机端应保留与桌面端等价的主要正文、标题、图片说明和必要标记;布局可以不同,内容可以合理折叠,不要为了手机「清爽」删掉关键答案。响应式页面通常更容易保持一致。

JavaScript 渲染是脚本运行后才生成页面内容。自己浏览器里看得到,不等于爬虫一定读到:不要让关键正文只能在点击、滚动或登录后加载,也别屏蔽必要的脚本资源。有站点权限时,用 Search Console 网址检查的实时测试查看渲染后的 HTML 与截图,确认主要内容、链接和 meta 指令正确;无权限时检查手机预览与源代码,将爬虫渲染状态记录为未验证。

5 随堂自测

点一点、填一填,检查你会了没

练 真实页面练习 · 20 分钟

读报告,选一项最影响使用的问题

  1. 把一个公开页面放入 PageSpeed Insights,记录测试日期、移动端结果,以及是否有该 URL 的真实数据。
  2. 记录 LCP、INP、CLS 与数据范围;没有 field 数据就如实标记。查看实验室诊断,选一个具体问题,例如首屏大图过大、按钮响应被长任务阻塞或图片没有预留尺寸。
  3. 写出「现象—可能原因—拟改动—复测方法」。有站点权限时处理一项后用相同设备设置复测,并实际操作页面;field 改善要等数据窗口更新。对照手机与桌面主要内容,JS 页面另检查渲染后内容是否可读;无权限时交付检查清单,不改线上。
验收
交付报告链接或截图、数据来源说明和一个优化任务。能说明是哪项指标受影响、如何验证;预览中内容与功能正常。实验室前后数值单独记录,不把一次跑分变化当成真实用户已达标或排名已提高。