core-web-vitals

Core Web Vitals 优化

针对三项 Core Web Vitals 进行优化：利用现场数据识别对用户的影响，并通过浏览器跟踪诊断原因。

优化前先测量

有可运行的 URL 时，请阅读性能测量工作流。建议按以下顺序操作：

1. 检查页面级 CrUX p75 数据；如果页面数据不可用，则使用明确标注的来源级数据作为回退。
2. 在注明的条件下记录浏览器性能跟踪。使用 Chrome DevTools MCP 时，跟踪摘要可以将 CrUX 数据与观测到的实验室指标一并列出。
3. 仅分析与未达标指标相关的洞察，然后检查涉及的代码和资源。
4. 修复后重新进行条件等同的实验室测量。不要声称现场数据会立即改善；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 问题

1. 服务器响应缓慢（TTFB > 800ms）

Fix: CDN, caching, optimized backend, edge rendering

2. 阻塞渲染的资源

<link rel="stylesheet" href="/all-styles.css">


<style>/* Critical above-fold CSS */</style>
<link rel="preload" href="/styles.css" as="style" 
      onload="this.onload=null;this.rel='stylesheet'">

3. 资源加载缓慢

<div class="hero"></div>


<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
<img src="/hero.webp" alt="Hero" fetchpriority="high">

优先使用可被发现的 <img>，并设置 fetchpriority="high"。只有在跟踪显示资源原本会被延迟发现时才添加预加载；重复或推测性的预加载可能会争抢带宽。

4. 客户端渲染延迟

// ❌ Content loads after JavaScript
useEffect(() => {
  fetch('/api/hero-text').then(r => r.json()).then(setHeroText);
}, []);

// ✅ Server-side or static rendering
// Use SSR, SSG, or streaming to send HTML with content
export async function getServerSideProps() {
  const heroText = await fetchHeroText();
  return { props: { heroText } };
}

5. 使用 Speculation Rules API 实现即时导航

对于导航路径可预测的同源网站，预渲染可能的下一页可以显著加快后续成功导航。应将其视为经测量的导航优化，而非修复当前页面 LCP 的替代方案。

<script type="speculationrules">
{
  "prerender": [{
    "where": { "href_matches": "/*" },
    "eagerness": "moderate"
  }]
}
</script>

当前 Chrome 的行为足够具体，可据此做出选择：

eagerness	触发条件
conservative	按下鼠标或触摸屏幕
moderate	桌面端：悬停 200ms，或更早按下鼠标；移动端：视口启发式规则
eager	Chrome 143+：桌面端悬停 10ms；移动端：锚点进入视口后 50ms
immediate	观察到规则后立即触发

从保守设置开始，并在扩大规则范围前测量预测命中率、传输字节数、服务器负载和导航速度提升。硬编码对时序敏感的行为前，请重新查阅 Chrome 持续维护的 eagerness 文档。

注意事项：

• 带宽/CPU 开销。 每次预渲染大致相当于加载一个完整页面。谨慎设置 where 的范围（使用 href_matches 模式，排除注销/结账页面），并避免在小型网站以外使用 immediate。
• 副作用会提前触发。 分析、广告以及任何在加载时运行的代码，都会在预渲染开始时触发，而非在用户导航时触发。请通过 prerenderingchange 事件或 document.prerendering 控制副作用。
• 仅适用于 Chromium。 Safari 和 Firefox 会忽略该脚本——这是一种渐进增强，绝不会导致功能退化。

LCP 优化检查清单

- [ ] TTFB < 800ms (use CDN, edge caching)
- [ ] LCP resource is discoverable in initial HTML and prioritized; preload only if the trace shows late discovery
- [ ] LCP image optimized (WebP/AVIF, correct size)
- [ ] Critical CSS inlined (< 14KB)
- [ ] No render-blocking JavaScript in <head>
- [ ] Fonts don't block text rendering (font-display: swap)
- [ ] LCP element in initial HTML (not JS-rendered)
- [ ] Speculation Rules added for likely-next navigations (moderate eagerness)

LCP 元素识别

此代码片段用于诊断当前页面会话，不是现场数据。

// Find your LCP element
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: Use next/image with priority
import Image from 'next/image';
<Image src="/hero.jpg" priority fill alt="Hero" />

// INP: Use dynamic imports
const HeavyComponent = dynamic(() => import('./Heavy'), { ssr: false });

// CLS: Image component handles dimensions automatically

React

// LCP: Preload in head
<link rel="preload" href="/hero.jpg" as="image" fetchpriority="high" />

// INP: Memoize and useTransition
const [isPending, startTransition] = useTransition();
startTransition(() => setExpensiveState(newValue));

// CLS: Always specify dimensions in img tags

Vue/Nuxt

<NuxtImg src="/hero.jpg" preload loading="eager" />


<component :is="() => import('./Heavy.vue')" />


<img :style="{ aspectRatio: '16/9' }" />

参考资料

• LCP 详细优化 — LCP 跟踪记录指出发现、加载或渲染延迟时阅读
• INP 详细优化 — 跟踪记录或实测归因指出交互缓慢时阅读
• CLS 详细优化 — 跟踪记录或实测归因指出意外偏移时阅读
• web.dev LCP
• web.dev INP
• web.dev CLS
• 性能技能