LCP、INP、CLS测试方法

b2m:做网站或APP的都知道，代码写得再漂亮，如果用户打开慢、点着卡、画面乱跳，那就是失败的产品。以前我们看技术指标很抽象，现在Google推出了三个“硬指标”：LCP、INP和CLS。它们就像体检报告里的血压、心率一样，直接决定了用户对你产品的第一印象。搞懂这三个指标的测试逻辑，比盲目改代码有效得多。

一、LCP：最大的那块板子什么时候刷出来

LCP全称是“最大内容绘制”，简单说就是页面上那个最大的文字块或者图片，到底花了多少秒才显示在屏幕上。这是用户感知“加载完没”的第一道门槛。

测试LCP最直观的方法是用Chrome浏览器的开发者工具（F12），找到Performance面板，重新加载页面后查看“Largest Contentful Paint”的时间戳。实际使用中，如果你的主图是个几兆的大图，LCP通常会被它拖累。判断标准很明确：从用户发起请求到这块大元素完全渲染，时间越短越好。一般要求控制在2.5秒以内，否则用户会觉得网站像蜗牛爬。解决思路通常是压缩图片格式、启用浏览器缓存，或者把关键CSS内联，别让浏览器去外网多跑一趟腿。

二、INP：点下去之后，系统是不是愣了半天

INP全称“互动到下次绘制”，它取代了旧的FCP指标，更真实地反映用户操作后的反馈速度。以前只看页面加载完没有，现在要看你点击按钮、滚动屏幕时，系统是不是有“卡顿感”。

测试INP同样依赖Chrome DevTools，在Performance面板中观察“Long Tasks”长任务。当你点击一个菜单或提交表单时，如果页面停顿超过200毫秒没反应，INP分数就会变差。不少开发者容易忽略JavaScript的主线程阻塞问题，比如某个脚本在处理复杂数据时占用了大量CPU，导致用户的点击指令排队等待。判据很简单：确保每一次用户交互，系统在200毫秒内能完成重绘。办法是把耗时的计算拆分成小片段，用Web Worker处理后台逻辑，别在主线程上堆砌功能。

三、CLS：页面会不会突然“抖”一下

CLS全称“累积布局偏移”，专门抓那些“鬼畜”的页面跳动。比如广告突然插入，把下面的文字挤下去了；或者字体加载太慢，导致文字从一大坨变成正常大小，位置发生了偏移。这种视觉上的不稳定最让人抓狂。

测试CLS推荐使用Chrome的“Web Vitals”扩展插件，它能实时高亮显示发生布局变化的区域。实际场景中，给图片设置固定的宽高属性是最基础的防抖动手段，不给尺寸等于让浏览器猜位置，一旦图片下载完瞬间撑开容器，偏移就产生了。另外，固定导航栏高度、避免动态插入广告而不预留空间，都是控制CLS的关键。只要保持这些元素在加载前后的位置相对静止，CLS就能维持在极低水平。

📌总的来说，记住‘LCP看首屏快不快、INP看交互顺不顺、CLS看画面稳不稳’这一句就够了，三者缺一不可，共同决定用户体验的底线。

爱采购产品库海量丰富，能让您快速高效锁定心仪产品，各位商家老板别再犹豫，赶紧体验起来！