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

概述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/lcpMDN：PerformanceObserver — https://developer.mozilla.org/docs/Web/API/PerformanceObserverChrome Docs：Optimize LCP — https://developer.chrome.com/docs/lighthouse/performance/lcp