Largest Contentful Paint（LCP）：测量与优化路径

---

title: Largest Contentful Paint（LCP）：测量与优化路径

keywords:

• LCP
• PerformanceObserver
• 优化路径
• preload
• fetchpriority

description: 使用 PerformanceObserver 采集 LCP 并围绕服务器与前端的关键路径进行优化，涵盖资源提示、优先级与渲染阻塞治理。

categories:

• 文章资讯
• 技术教程

---

概述

LCP 衡量首屏最大内容元素（图片/文本块）渲染时间。良好阈值 ≤ 2.5s。优化重点在于关键资源的发现、下载与渲染阻塞消除。

用法/示例

const po = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    console.log('LCP', entry.startTime, entry.element?.tagName)
  }
})
po.observe({ type: 'largest-contentful-paint', buffered: true })

<!-- 为 LCP 候选图片提升优先级并预加载 -->
<link rel="preload" as="image" href="/hero.jpg" imagesrcset="/[email protected] 2x" fetchpriority="high" />

工程建议

• 减少阻塞：优化关键 CSS 与移除同步脚本；对字体使用 font-display: swap。
• 资源提示：对 LCP 候选采用 preload 与 fetchpriority=high；结合 Early Hints 提前发出 Link。
• 图像策略：提供明确尺寸与解码策略（decoding=async），避免布局抖动与解码阻塞。

参考与验证

• web.dev：LCP — https://web.dev/articles/lcp
• MDN：PerformanceObserver — https://developer.mozilla.org/docs/Web/API/PerformanceObserver
• Chrome Docs：Optimize LCP — https://developer.chrome.com/docs/lighthouse/performance/lcp