LCP最大内容绘制等待中
—
主要内容多久出现？
页面打开时测一次
Skip to content
LAB / Web Vitals 心电图
这个页面，现在感觉怎么样？
实时测量你正在看的这一页：主要内容多久出现、会不会乱跳、点了多久才有反应。下面几个按钮会故意把它弄坏，再教你怎么修好。
LIVE主线程心跳— fps
每一次跳动：浏览器在正常出帧红色平线：主线程被卡住黄线：布局偏移蓝条：一次交互的耗时
CLS累积布局偏移良好
0.000
内容会不会乱跳？
一直在累计，取跳得最厉害的一段
INP交互到下一次绘制等待中
—
点了多久才有反应？
点一下页面上的任何东西
FCP—首次内容绘制
TTFB—首字节时间
长任务0阻塞 0ms
帧率—掉帧 0 次
动手捣乱
每个实验先按一下看看坏的样子，再打开「修好它」对比。
01
慢吞吞的按钮
INP点击后先同步算 300ms 再更新界面，这段时间浏览器画不出下一帧。
02
晚到的广告
CLS广告 0.6 秒后才加载出来，把下面的内容整体往下推。
03
一口气算完
长任务一口气算 400ms，主线程被占满，心电图上的心跳会停。
事件记录
数据来自浏览器自带的 PerformanceObserver，算法和 Google 的 web-vitals 一致，没有上报到任何地方。LCP、CLS、INP 目前只有 Chromium 内核的浏览器支持。想了解 LCP 是怎么测的，可以看 《前端性能监控指标之 LCP》。