CLSvsINP

CLS

CLS 量化页面生命周期内所有意外布局偏移的累积程度。当你正要点某个按钮，页面突然插入一张广告把按钮挤走——这种体验就是 CLS 要捕捉的。Google 将 CLS < 0.1 定义为良好，> 0.25 为差。

INP

INP 追踪用户在页面上的所有交互（点击、轻触、键盘输入），记录从输入到浏览器完成下一帧视觉更新的最长延迟。2024 年 3 月正式取代 FID 成为 Core Web Vitals 的响应性指标，2026 年仍有 43% 的网站未达标。

CLS

• 无单位分数，公式 = 影响比例 × 距离比例，累积整个页面生命周期
• 良好阈值 < 0.1，差 > 0.25——数值虽小但对用户体验影响巨大
• 最常见元凶：未设尺寸的图片/视频、动态注入的广告、延迟加载的 Web 字体

INP

• 良好阈值 ≤ 200ms，差 > 500ms——比 FID 严格得多
• 观测页面全生命周期的所有交互，取最差的那次（排除极端异常值）
• 2024 年 3 月正式取代 FID，是目前最常不达标的 Core Web Vital

CLS

量化页面生命周期内所有意外布局偏移累积程度的 Core Web Vitals 视觉稳定性指标。

INP

衡量页面在整个生命周期内对用户交互响应速度的 Core Web Vitals 指标，取所有交互中最慢一次的完整延迟。

CLS

• 诊断页面内容跳动导致的误点击问题
• 评估广告/第三方嵌入对页面稳定性的影响
• 作为 SEO 技术审计中视觉稳定性维度的核心指标

INP

• 诊断页面交互卡顿（按钮点击无反应、输入框延迟）
• 评估第三方脚本对页面响应性的影响
• 作为 SEO 技术审计中响应性维度的核心指标

CLS

CLS 是 Core Web Vitals 的视觉稳定性指标，计算页面中每次意外布局偏移的「影响比例 × 距离比例」之和。影响比例是偏移元素占视口的面积，距离比例是元素移动的距离占视口的比例。注意：用户主动触发的布局变化（如点击展开手风琴）不计入 CLS，只有「意外」偏移才算。常见触发场景包括：图片/iframe 未预留尺寸、异步加载的广告或嵌入内容、动态插入的 DOM 元素、Web 字体加载导致的文本重排。优化核心原则是「为动态内容预留空间」：给媒体元素设 width/height 或 aspect-ratio、使用 font-display: optional 或 swap、为广告位设固定容器尺寸。

INP

INP 由 Google 于 2022 年提出、2024 年 3 月正式纳入 Core Web Vitals，替代只测量首次交互输入延迟的 FID。INP 衡量的是完整交互生命周期：从用户输入事件触发，经过 JavaScript 处理，到浏览器完成下一帧绘制的总耗时。它会观察页面上发生的每一次交互，最终报告最慢的那次（有少量异常值排除机制）。常见瓶颈包括：长任务阻塞主线程、大量同步 DOM 操作、第三方脚本抢占执行时间。优化策略包括拆分长任务（yield to main thread）、减少 JS 执行量、使用 requestAnimationFrame 和 CSS containment。