无需登录 数据私有 本地保存

Web Vitals 本地模拟器 - LCP/FID/CLS面板

开发工具 性能 LCP Web Vitals 性能 模拟
37
0
0
0

⚡ Web Vitals 本地模拟器

模拟 LCP（最大内容绘制）、FID（首次输入延迟）、CLS（累计布局偏移）三个核心指标，直观理解性能评分。

--
LCP
最大内容绘制 待测试
-- ms
--
FID
首次输入延迟 待测试
-- ms
--
CLS
累计布局偏移 待测试
--
LCP 模拟器
模拟大内容元素的加载过程
等待加载...
 Hero Image
加载中：0 ms
FID 模拟器
模拟主线程阻塞导致的输入延迟
20ms (良好)120ms600ms (差)

点击下方按钮，体验输入延迟

CLS 模拟器
模拟内容意外插入导致的布局偏移
40px (轻微)100px260px (严重)
📰 页面内容区域

这是一段正常的页面内容。用户正在阅读这里的文字，突然...

📌 推荐卡片

相关内容推荐区域

更多正文内容。用户已经滚动到这个位置，布局看起来很稳定。

标签A 标签B 标签C

页面底部信息 ©2024

累计 CLS：0.000
测试历史记录
#时间指标值评级
暂无测试记录，开始测试吧
常见问题 & 知识点
什么是 LCP（Largest Contentful Paint）？
LCP 测量页面主要内容加载完成的时间，关注的是视口内最大的可见元素（如图片、视频、大文本块）完成渲染的时刻。Google 建议 LCP 在 2.5 秒以内为良好，2.5~4 秒需改进，超过 4 秒为差。优化方法包括：预加载关键图片、使用 CDN、优化服务器响应时间、压缩资源。
什么是 FID（First Input Delay）？
FID 测量用户首次与页面交互（点击按钮、链接等）到浏览器实际响应该交互的延迟时间。它反映了主线程的繁忙程度。Google 建议 FID 在 100 毫秒以内为良好，100~300 毫秒需改进，超过 300 毫秒为差。优化方法：拆分长任务、延迟加载非关键JS、使用 Web Worker。
什么是 CLS（Cumulative Layout Shift）？
CLS 测量页面生命周期中所有意外布局偏移的累积分数。每次偏移由 影响比例（impact fraction）× 距离比例（distance fraction）计算。Google 建议 CLS 在 0.1 以下为良好，0.1~0.25 需改进，超过 0.25 为差。常见原因：无尺寸的图片/广告、动态注入内容、Web 字体加载。优化方法：为所有媒体设置宽高属性、预留广告位空间、使用 transform 做动画。
为什么 CLS 是累积的？
CLS 不是单次偏移的分数，而是整个页面生命周期中所有意外布局偏移的总和。这意味着即使每次偏移很小，累积起来也可能导致较差的 CLS 评分。例如，一个页面上发生 3 次 CLS=0.08 的偏移，总 CLS 就是 0.24（已接近"差"的阈值）。这也是为什么持续监控 CLS 非常重要。
Core Web Vitals 对 SEO 有什么影响？
自 2021 年起，Google 将 Core Web Vitals（包含 LCP、FID、CLS）纳入页面体验排名信号。良好的 Web Vitals 评分可以提升搜索排名，尤其在高竞争关键词中更为明显。同时，优化这些指标也能显著改善用户体验，降低跳出率，提升转化率。
INP 会取代 FID 吗？
是的。Google 已宣布 INP（Interaction to Next Paint）将于 2024 年 3 月正式取代 FID 成为 Core Web Vitals 的核心指标。INP 评估页面整个生命周期中所有交互的延迟，而不仅仅是首次交互。建议开发者提前关注 INP，优化所有用户交互的响应速度。
🔧 相关工具