Q3 · 性能指标

如何用代码获取 LCP？指标分数段？怎么提升？

LCPCore Web Vitals图片优化

⚡ 速记答案（30 秒）

  • 获取：PerformanceObserver 监听 largest-contentful-paint 条目，取最后一次的时间
  • 分数段：好 < 2.5s；一般 2.5–4s；差 > 4s
  • 把最大内容元素（大图/标题/首屏卡片）尽量前置、靠上
  • 减少阻塞渲染的 JS/CSS，使用懒加载与 Tree-shaking
  • 图片体积优化（压缩、WebP、合适尺寸）+ preload 关键图片
  • 使用 SSR/静态化，让大内容首屏就出现在 HTML 中

📖 详细讲解

LCP 定义


Largest Contentful Paint：视口内最大的图片或文本块完成渲染的时间。


LCP 元素类型


• 元素

• 内的 元素

• 的封面图

• 带有 background-image 的元素

• 包含文本节点的块级元素


优化策略


1. 优化最大元素

• 确保 LCP 元素在首屏

• 使用 预加载 LCP 图片

• 使用合适的图片格式和尺寸


2. 减少阻塞时间

• 消除渲染阻塞的资源

• 减少 CSS/JS 体积

• 使用 CDN 加速


3. 服务端优化

• 使用 SSR/SSG

• 减少 TTFB

💻 代码示例

获取 LCP 指标
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  // LCP 会多次触发，取最后一次
  const lastEntry = entries[entries.length - 1];
  console.log('LCP:', lastEntry.startTime, 'ms');
  console.log('LCP 元素:', lastEntry.element);
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });

// 页面隐藏时停止观察
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    observer.disconnect();
  }
});
预加载 LCP 图片
<!-- 在 <head> 中预加载关键图片 -->
<link rel="preload" as="image" href="/hero-image.webp" />

<!-- 使用 fetchpriority 提升优先级 -->
<img src="/hero-image.webp" alt="Hero" fetchpriority="high" />
💡
面试技巧：回答性能问题时，先说指标和标准，再讲优化手段，最后结合实际项目经验。