核心性能指标 ​

性能指标演进 ​

Web 性能指标经历了从简单技术指标到用户中心指标的演进过程。早期关注服务器响应时间、页面加载完成事件，现代指标则聚焦用户感知体验。Google 提出的核心网页指标成为行业标准，包含加载性能、交互性和视觉稳定性三个维度。

特点：现代性能指标基于真实用户数据，强调用户感知而非技术实现。指标设计遵循“用户为中心”原则，关注用户关键任务完成时刻。

示意图： 指标演进路径： 技术指标 (DOMContentLoaded、onload) → 用户体验指标 (Speed Index、First Paint) → 核心网页指标 (LCP、INP、CLS) 测量方式：实验室数据 → 现场真实用户数据 + 实验室数据结合

LCP - 最大内容绘制 ​

LCP 测量页面中最大可见元素 (如图片、视频或文本块) 完成渲染的时间。优秀标准为 2.5秒内，超过4秒视为需要改进。最大元素通常是英雄图片、标题文本或主要内容区块。

特点：LCP 关注用户感知的加载完成时刻，而非技术上的页面完全加载。最大元素可能在加载过程中动态变化，最终以稳定状态为准。

示意图： 页面加载时间线： First Paint → First Contentful Paint → LCP (最大元素渲染) → 后续交互准备 LCP 元素识别：视口内最大面积元素 × 可见性 × 渲染完成状态

INP - 下次绘制交互 ​

INP 取代 FID 成为新的交互性指标，测量用户首次交互到下次绘制完成的时间。优秀标准为低于 200 毫秒，超过 500 毫秒需要优化。INP 考虑所有用户交互的延迟，而不仅仅是首次输入。

特点：INP 基于用户所有交互的百分位数评估，通常采用第 75 或第 98 百分位值。它更全面地反映页面整体响应性，特别是对于复杂 Web 应用。

示意图： 交互延迟分解： 用户操作 (点击/输入) → 事件处理 → 渲染计算 → 屏幕绘制 INP = 事件开始 → 下次绘制完成 优化关键：减少主线程阻塞 + 优化 JavaScript 执行 + 避免强制同步布局

CLS - 累积布局偏移 ​

CLS 量化页面生命周期内发生的意外布局偏移程度。优秀标准为低于 0.1，超过 0.25 需要优化。布局偏移通常由异步加载资源、动态插入内容或字体变化引起。

特点：CLS 是累积性指标，测量整个页面会话期间的偏移总和。只有用户未预期的偏移才被计入，主动交互触发的布局变化不影响得分。

示意图： 布局偏移计算： 视口大小 × 影响范围 = 单个偏移分数 CLS = 会话期间所有单个偏移分数的累加 常见偏移源：无尺寸图片 → 加载后撑开布局 | 动态广告插入 → 推挤现有内容 | 字体变化 → 文本区域重排

FCP - 首次内容绘制 ​

FCP 测量页面首次呈现任何内容 (文本、图片、Canvas 等) 的时间点。优秀标准为 1.8秒内，超过3秒需要优化。FCP 是用户感知“页面开始加载”的关键时刻。

特点：FCP 关注内容而非空白页面的显示。即使是非主要内容，其首次出现也能给用户加载进程的反馈，减少焦虑感。

示意图： 页面渲染进程： 导航开始 → 空白屏幕 → FCP (首个内容像素) → 更多内容渲染 → LCP FCP 价值：提供早期反馈 + 建立用户耐心 + 感知性能改善

TTI - 可交互时间 ​

TTI 测量页面达到完全可交互状态所需时间，标准为主线程连续5秒内无长任务 (超过 50 毫秒的任务)。优秀标准为 3.8秒内，超过 7.3秒需要优化。

特点：TTI 反映页面从“看起来就绪”到“确实可用”的差距。长任务阻塞主线程，导致用户交互无法及时响应。

示意图： 页面就绪过程： FCP (看起来有内容) → TTI (确实可操作) TTI 条件：FCP 已完成 + 可见页面元素的事件监听器已注册 + 主线程连续5秒无长任务 长任务识别：JavaScript 执行 > 50ms → 主线程阻塞 → 交互延迟

TBT - 总阻塞时间 ​

TBT 测量 FCP 到 TTI 之间主线程被长任务阻塞的总时间。优秀标准为 200 毫秒内，超过 600 毫秒需要优化。每个长任务的阻塞时间=任务持续时间-50 毫秒。

特点：TBT 是实验室指标，用于预测 INP 表现。它量化了页面变得完全可交互前用户可能遇到的交互延迟风险。

示意图： 任务时间线分析： 任务 A：80ms → 阻塞时间 30ms 任务 B：120ms → 阻塞时间 70ms
任务 C：40ms → 无阻塞 TBT = 30ms + 70ms = 100ms 优化策略：任务拆分 + 异步执行 + 空闲时段调度

Speed Index - 速度指数 ​

Speed Index 测量页面内容视觉填充的速度，数值越低表示内容显示越快。优秀标准为 3.4秒内，超过 5.8秒需要优化。通过捕获视频帧分析计算得出。

特点：Speed Index 关注用户感知的加载进度，而非技术事件。它更符合人类对“快慢”的主观判断，特别适合评估 Above-the-fold 内容加载。

示意图： 视觉完成度曲线： 0ms：0%完成 → 1000ms：40%完成 → 2000ms：80%完成 → 3000ms：100%完成 Speed Index = 曲线下面积 优化目标：让曲线更陡峭，快速达到高完成度

FID - 首次输入延迟 ​

FID 测量用户首次与页面交互到浏览器实际开始处理事件的时间。优秀标准为 100 毫秒内，超过 300 毫秒需要优化。虽然已被 INP 取代，但仍是理解交互延迟的基础概念。

特点：FID 只关注首次交互，容易受浏览器预加载和优化策略影响。它反映了主线程的繁忙程度。

示意图： 用户交互时间线： 点击发生 → FID (输入延迟) → 事件处理开始 → 页面响应 FID 影响因素：JavaScript 执行阻塞 + 样式计算 + 布局重排 虽然 FID 被 INP 取代，但其优化原则仍然适用

指标关联与权衡 ​

核心性能指标相互关联，优化某个指标可能影响其他指标。理解这些关系有助于制定平衡的优化策略。例如，预加载资源改善 LCP 但可能增加 CLS，代码拆分改善 TTI 但可能影响 FCP。

特点：性能优化需要系统思维，避免局部优化导致整体体验下降。指标间存在天然的张力，需要根据业务优先级权衡。

示意图： 指标关系网络： LCP ←→ CLS (资源加载引起布局偏移) FCP ←→ TTI (早期渲染 vs 完全可交互) INP ←→ TBT (现场数据 vs 实验室预测) 优化平衡：激进预加载 → LCP 改善但 CLS 恶化 | 延迟加载 → CLS 改善但 LCP 延长

真实用户监控 ​

真实用户监控通过在生产环境收集用户实际性能数据，提供最准确的性能洞察。与实验室数据结合使用，能够识别特定用户群体、设备类型或网络条件的性能问题。

特点：RUM 数据反映真实世界的多样性，包括不同的设备能力、网络状态和用户行为。数据采集需要考虑采样策略和隐私保护。

示意图： RUM 数据流水线： 用户访问 → Performance API 数据收集 → Beacon 发送 → 数据聚合 → 分析洞察 关键维度：设备类型 (高端/低端) × 网络类型 (Wi-Fi/4G/3G) × 地理区域 分析价值：识别瓶颈模式 + 优先级排序 + 业务影响量化