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

--- title: Largest Contentful Paint（LCP）：测量与优化路径 keywords: - LCP - PerformanceObserver - 优化路径 - preload - fetchpriority description: 使用 PerformanceObserver 采集 LCP 并围绕服务器与前端的关键路径进行优化，涵盖资源提示、优先级与渲染阻塞治理。 categories: - 文章资讯 - 技术教程 --- ## 概述 LCP 衡量首屏最大内容元素（图片/文本块）渲染时间。良好阈值 ≤ 2.5s。优化重点在于关键资源的发现、下载与渲染阻塞消除。 ## 用法/示例 ```js 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 }) ``` ```html ``` ## 工程建议 - 减少阻塞：优化关键 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