我刚开始做网店那会儿，一直以为页面速度是开发人员的事。直到有一天，店铺内容没有任何变化，搜索排名却往下掉了，我才坐下来从头把它弄明白。原来 Google 有一套由三项指标组成的体系，用来衡量你的顾客真实的体验，叫作 Core Web Vitals。理解这三个数字并不难，它能告诉你，在顾客眼里——也在 Google 眼里——你的店铺到底是快还是慢。
这篇文章里，我会用通俗的语言讲清楚这三项指标，附上 Google 公布的「良好」阈值，然后再谈谈它们为什么对排名和营收都有影响。
什么是 Core Web Vitals
简单说，Core Web Vitals 是 Google 用来判断一个网页在真实用户使用时快不快、顺不顺的三项衡量标准。它们不是在理想状态的实验室机器上测出来的，而是在访问你店铺的真实顾客的手机和网络上测出来的。
这三项指标是 LCP（页面出现得快不快）、CLS（布局会不会乱跳）和 INP（点下去会不会马上有反应）。每一项都对应着顾客打开页面时的一种具体感受。
Google 以第 75 百分位为准来评分——也就是 75% 的访问——并把手机和桌面端分开。说白了：必须是大多数顾客都觉得这个页面可以接受，才算得上「良好」，而不是只有少数运气好的访问。
LCP——页面出现得快还是慢
LCP 是 Largest Contentful Paint（最大内容绘制），指屏幕上最大的元素出现的那一刻。这通常是页面顶部的横幅图、主商品图，或是一大块标题区。顾客看到这个，就会觉得页面加载完了。
按照 Google 的标准，良好的阈值是 2.5 秒以内。超过 4 秒就算差。介于两者之间的属于「需要改进」。
想象一个顾客点了 Facebook 广告里的商品链接，站在马路中间盯着一片空白的白屏等着。每过一秒，他离开的可能性就增加一分。对于服装或化妆品店——这类店的图片通常都很重——LCP 是最容易拖慢的地方。
通常拖慢 LCP 的原因有：图片太重又没压缩、页面打开时后台运行的应用太多，或者主题在显示主要内容之前先加载了一堆不必要的东西。
CLS——布局会不会乱跳
CLS 是 Cumulative Layout Shift（累积布局偏移），衡量加载过程中元素移动的幅度。按照 Google 的标准，良好的阈值是 0.1 以内。
这是每个人都遇到过的恼火事。你正要点「加入购物车」，结果一条横幅或一张加载慢的图片突然插进来，把按钮往下挤，你的手指就误点到别的地方去了。有时候还会误点到广告。这正是布局偏移。
菜单是常见的「肇事者」。如果导航栏在内容之后才加载，它就会在顾客正在阅读或点击的时候，把下面所有东西往下挤。顾客说不出那是什么感觉，但他看到的是一个乱糟糟的页面，于是失去了信任。
降低 CLS 的常见做法，是提前给图片、横幅和菜单预留好位置，这样它们加载时就会填进已经留好的空位，而不会把其余内容推来挤去。挑选菜单应用时，要优先选那种出现时不会让内容跳动的。
INP——点下去会不会马上有反应
INP 是 Interaction to Next Paint（下次绘制交互），衡量从顾客交互（点击、触摸、输入）到屏幕做出反应之间的延迟。按照 Google 的标准，良好的阈值是 200 毫秒以内。
有个细节值得记住：根据 Google 的说法，INP 已于 2024 年 3 月 12 日正式取代 FID（First Input Delay，首次输入延迟），成为 Core Web Vitals 中的一员。原因是 FID 只衡量第一次交互，而 INP 会追踪整个会话里的所有交互——更贴近真实情况。如果你看到旧文档里还在提 FID，那么现在该关注的数字是 INP。
INP 跟「这个页面卡不卡」的感受密切相关。顾客在手机上打开汉堡菜单，点了一下，半秒之后菜单才终于弹开。在这半秒里，他以为设备卡死了，又点了一下，然后就开始烦躁。菜单在后台运行的代码越多，这个延迟就越糟糕。
也正是这个时候，我开始认真留意自己装的菜单应用。我换成了 Navi+（naviplus.io），一部分原因就是它做了优化，不会拖慢页面。用底部的移动端 Tab Bar 菜单或 Slide Menu 时，顾客直接点击它的响应灵不灵敏，会直接影响 INP，所以一款轻量的应用能让这个数字更容易控制。
为什么你应该关心 Core Web Vitals：SEO 与营收
直白地问一句：这三个数字值得操心吗，还是只是个技术细节？
值得。Google 已经确认，页面体验（其中包含 Core Web Vitals）是一项排名因素。它不是最重要的因素——好内容仍然是根基——但当两个页面内容同样好时，速度就可能成为 Google 决定把谁放在前面的那个因素。一家慢吞吞的店铺，很容易就在你正在争夺的那些关键词上输给一个更快的页面。
连锁反应其实挺简单：店铺慢，排名就低；排名低，自然流量就少；流量少，订单就少。对于那些重度依赖 SEO 而不投广告的卖家来说，这是一个免费的客源，你可不想白白漏掉。
速度不只影响排名，也影响转化率。根据 Baymard Institute（这个数字汇总自 50 项研究），电商的平均弃购率大约在 70%。原因有很多，但一个加载慢或者卡顿的页面肯定帮不上忙。当顾客都已经走到购物车了还得继续等，或者因为布局跳动而点错东西，他离开的概率就上去了。
让人安心的是，这三项指标都是可以测量、可以改进的。你不用靠猜。打开 Google Search Console 或 PageSpeed Insights，输入你店铺的网址，工具就会告诉你 LCP、INP、CLS 现在处在什么水平，哪里亮了红灯。
给忙碌的人一个实操顺序：
- 检查图片是不是太重（影响 LCP）。
- 排查你装的应用，找出那些在后台跑大量代码的（影响 INP）。
- 检查菜单和横幅在加载时会不会让内容跳动（影响 CLS）。
很多店铺日积月累装了一堆应用，而菜单每个页面都会出现——所以一款轻量、又不会把布局挤来挤去的导航应用，是一笔值得考虑的投入。
你不需要把自己变成工程师。你只需要明白这三个数字说明了顾客的什么感受，定期查一查，并且在挑选工具时——尤其是每个页面都会出现的菜单应用——留意它是不是在拖慢你的店铺。
本文是更完整的指南 导航与页面速度——挑选一款不拖累 Core Web Vitals 的菜单应用 的一部分。