用途
Core Web Vitals 优化技能用于针对三项核心网页指标（LCP、INP、CLS）进行定向优化。它使用字段数据识别用户影响，并用浏览器追踪诊断原因，核心原则是「先测量后优化」。
主要能力
测量工作流
当有可运行的 URL 时，优先按以下顺序执行：
- 检查页面级 CrUX p75 数据；页面数据不可用时，使用明确标注的源级（origin）回退数据。
- 在声明的条件下录制浏览器性能追踪。使用 Chrome DevTools MCP 时，追踪摘要可同时包含 CrUX 与观测到的实验室指标。
- 仅分析与失败指标相关的洞察，然后检查涉及的代码和资源。
- 修复后重新运行等效的实验室测量。不要声称字段数据立即改善；CrUX 和第一方 RUM 需要新的用户访问。
如果只有源代码可用，可以识别可能的原因，但不要在没有运行时证据的情况下声称 LCP、INP 或 CLS 失败。
三项指标
| 指标 | 衡量内容 | 良好 | 需要改进 | 差 |
|---|---|---|---|---|
| LCP | 加载 | ≤ 2.5s | 2.5s – 4s | > 4s |
| INP | 交互性 | ≤ 200ms | 200ms – 500ms | > 500ms |
| CLS | 视觉稳定性 | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
Google 按第 75 百分位衡量——75% 的页面访问必须达到「良好」阈值。
LCP：最大内容绘制
LCP 衡量最大的可见内容元素何时渲染。通常是：主图或视频、大文本块、背景图片、<svg> 元素。
常见 LCP 问题：
- 服务器响应慢（TTFB > 800ms）。修复：CDN、缓存、优化后端、边缘渲染。
- 渲染阻塞资源。示例：将关键 CSS 内联，其余延迟加载。
- 资源加载慢。优先使用可发现的
<img>并设置fetchpriority="high"；仅当追踪显示资源会被延迟发现时才添加 preload，重复或推测性 preload 可能争抢带宽。 - 客户端渲染延迟。使用 SSR、SSG 或流式渲染发送带内容的 HTML。
- 使用 Speculation Rules API 让导航即时化。对可预测的同源旅程，预渲染可能的下一页可加快后续导航。这应视为经过测量的导航优化，而非修复当前页面 LCP 的替代方案。
Speculation Rules 的 eagerness 取值：conservative（指针或触摸按下）、moderate（桌面 200ms 悬停或更早的指针按下；移动端视口启发式）、eager（Chrome 143+：桌面 10ms 悬停；移动端锚点进入视口后 50ms）、immediate（规则被观察到时立即）。建议从保守开始，测量预测命中率、传输字节、服务器负载和导航改善后再扩展规则。
注意事项：每次预渲染约等于一次完整页面加载，需谨慎限定范围（href_matches 模式，排除 logout/checkout），小站点避免 immediate；副作用会提前触发，分析、广告和加载时运行的代码会在预渲染开始时触发，需用 prerenderingchange 事件或 document.prerendering 门控；仅 Chromium 支持，Safari 和 Firefox 会忽略该脚本，属于渐进增强。
LCP 优化清单：TTFB < 800ms；LCP 资源在初始 HTML 中可发现并优先处理（仅当追踪显示延迟发现时才 preload）；LCP 图片优化（WebP/AVIF、正确尺寸）；关键 CSS 内联（< 14KB）；<head> 中无渲染阻塞 JavaScript；字体不阻塞文本渲染（font-display: swap）；LCP 元素在初始 HTML 中（非 JS 渲染）；为可能的后续导航添加 Speculation Rules（moderate eagerness）。
LCP 元素识别代码（诊断当前页面会话，非字段数据）：
new PerformanceObserver((list) => {
const entries = list.getEntries();
const lastEntry = entries[entries.length - 1];
console.log('LCP element:', lastEntry.element);
console.log('LCP time:', lastEntry.startTime);
}).observe({ type: 'largest-contentful-paint', buffered: true });
INP：交互到下一次绘制
INP 衡量一次访问中点击、轻触和按键的响应性。需分别诊断其输入延迟、处理时间和呈现延迟；慢交互可能涉及处理程序之前的主线程争用、昂贵的应用工作，或之后的渲染延迟。当字段 INP 差或追踪识别出慢交互时，阅读 INP 参考以了解追踪解读、让步模式、第三方和渲染原因、单会话观察器及第一方归因。
CLS：累积布局偏移
CLS 衡量一次页面访问中意外的布局偏移。使用字段归因或追踪识别偏移节点和触发因素；不要假设可见的受害者导致了偏移。当字段 CLS 差或追踪报告偏移时，阅读 CLS 参考以了解预留空间模式、动态内容、字体和动画修复、调试观察器及验证清单。
测量来源
| 来源 | 用途 |
|---|---|
| 浏览器性能追踪（Chrome DevTools MCP: performance_start_trace） | 观察一次加载或交互并诊断聚焦洞察；可用时包含 CrUX 上下文 |
| CrUX 或 Search Console | 按 p75 优先处理聚合的真实用户结果 |
| Lighthouse CLI 或 PageSpeed Insights | DevTools 工具不可用时的受控实验室回退 |
| 第一方 RUM | 按路由、设备、版本和归因细分当前生产体验 |
| 原始 PerformanceObserver | 调试时检查单个页面会话 |
不要通过 Chrome DevTools MCP 的 lighthouse_audit 路由性能；该能力有意覆盖非性能的 Lighthouse 类别。不要将单个实验室值直接与字段 p75 比较，仿佛它们是等效样本。添加或审查生产收集时，阅读第一方 RUM 参考。优先使用 web-vitals 库，因为原始浏览器 API 本身并不实现每个 Core Web Vital 的生命周期和报告规则。
框架快速修复
Next.js：LCP 使用 next/image 并设置 priority；INP 使用动态导入；CLS 由 Image 组件自动处理尺寸。
React：LCP 在 head 中 preload；INP 使用 memoize 和 useTransition；CLS 始终在 img 标签中指定尺寸。
Vue/Nuxt：LCP 使用 nuxt/image 并 preload；INP 使用异步组件；CLS 使用 aspect-ratio CSS。
参考文档
详细 LCP 优化（当 LCP 追踪指向发现、加载或渲染延迟时阅读）；详细 INP 优化（当追踪或字段归因识别出慢交互时阅读）；详细 CLS 优化（当追踪或字段归因识别出意外偏移时阅读）；web.dev LCP、INP、CLS；Performance skill。
适用场景
适用于被要求「改善 Core Web Vitals」「修复 LCP」等场景，针对三项核心网页指标进行基于证据的优化。
限制
如果只有源代码可用，只能识别可能原因，不能在没有运行时证据的情况下断言指标失败。修复后不能声称字段数据立即改善。Speculation Rules 仅 Chromium 支持。