跳到正文

核心网页指标

Core Web Vitals

中级网页

核心网页指标(Core Web Vitals)是一组衡量网页加载、交互响应和视觉稳定性的用户体验指标。它帮你发现页面看似已经打开,却还要等主要内容、点击后反应迟缓或布局突然跳动的问题。

你可能会说:「我想让网站打开后主要内容快点出现,点按钮反应快,页面也别突然乱跳。」

读之前建议先了解

动手看看

松果杂货铺
春日上新
限时优惠:满 99 元免运费
手冲咖啡套装
手冲咖啡套装
主图加载中…
手冲咖啡套装
陶瓷滤杯 · 分享壶
¥ 129
加入购物车
加入购物车
LCP · 主要内容
1.3 秒
3.8 秒
INP · 交互响应
80 毫秒
720 毫秒
CLS · 布局稳定
0.01
0.32
体验状态

切换体验状态,再点「重播」看商品页;也可以悬停、按住或用 Tab 聚焦购物车按钮。下方三个数字分别关注内容出现、交互响应和布局稳定。

文字和价格已经能看了,主图却还在加载。LCP 关注的是主要内容何时出现,不等于页面什么时候开始显示。

要点

  1. 1

    最大内容绘制看主体何时出现

    LCP 关注视口内最大的图片或文字块何时完成呈现。比如商品详情页先露出导航,但商品主图很久才出现,用户仍会觉得页面没加载好。

  2. 2

    交互到下一次绘制看响应快慢

    INP 关注用户点击、触摸或按键后,页面多久能显示相应反馈。如果筛选按钮点下去却迟迟没有变化,就可以沿着这项指标排查主线程是否被任务占住。

  3. 3

    累积布局偏移看画面是否乱跳

    CLS 衡量页面元素意外移动的程度。比如用户正要点搜索结果,顶部广告加载后把列表推下去,就会造成布局偏移;提前给广告位留空间通常能改善它。

容易混淆的地方

核心网页指标衡量的是网页体验,不等于网站的全部性能。它不能单独说明接口是否稳定、服务器花了多少钱,也不能代替完整的用户调研。浏览器开发者工具中的单次测试适合定位问题;判断真实用户是否普遍遇到问题,还要结合实际访问数据,并留意设备和网络差异。

什么时候用

适合用

  • 你上线了面向用户的网站,想判断首页主图加载慢、按钮反应迟缓或内容跳动是否影响真实访问体验。
  • 你让 AI Agent 优化商品页,希望有明确的网页体验指标来比较改动前后,而不只是听它说“已经提速”。
  • 你准备排查移动端落地页的流失问题,想先确认加载、交互和布局稳定性有没有明显短板。

不适合用

  • 你做的是原生手机 App,不是浏览器网页;可以改用对应平台的启动耗时、卡顿和界面稳定性指标。
  • 你只想评估一个后台 API 的处理能力,没有网页交互;用请求延迟、错误率和负载测试更直接。
  • 你在核算 AI 功能的模型调用费用;应查看 Token 用量和账单,核心网页指标回答不了成本问题。

练一练

一个商品页的导航很快出现,但主图迟迟不显示;点规格后页面卡一下,促销横幅加载时还把购买按钮挤下去。你会怎样让 AI Agent 排查?

让 AI 帮你做

请检查这个商品页的核心网页指标:分别定位影响 LCP、INP 和 CLS 的页面元素或任务,区分真实用户数据与本地测试结果。先说明瓶颈和证据,再提出改动,并给出改动前后的验证方法。

接下来学什么