"Paint Timing API：FCP 的采集与优化路径"

---

title: "Paint Timing API：FCP 的采集与优化路径"

keywords:

• FCP
• PerformancePaintTiming
• first-contentful-paint
• PerformanceObserver
• 采集与优化

description: "说明 Paint Timing 的 first-contentful-paint 采集方法、与关键渲染路径的关联，结合资源优化与预加载/优先级提升 FCP，提供示例与参考。"

categories:

• 文章资讯
• 技术教程

---

概述

FCP（First Contentful Paint）表示首次有内容渲染到屏幕的时间。浏览器通过 PerformancePaintTiming 暴露 first-contentful-paint 事件，可用于监测与优化。

示例

const obs = new PerformanceObserver(list => {
  const entries = list.getEntriesByName('first-contentful-paint')
  const fcp = entries[0]?.startTime
})
obs.observe({ type: 'paint', buffered: true })

工程建议

• 关键路径优化：内联关键 CSS、减少阻塞脚本、使用 preload/modulepreload 与 fetchpriority 提升关键资源。
• 字体与图像：使用 font-display 与响应式图片（picture/srcset、image-set）；避免大体积首屏图。
• 网络与服务器：Early Hints、HTTP/3、缓存与 CDN；合理启用压缩与优先级。

参考与验证

• MDN PerformancePaintTiming 文档：https://developer.mozilla.org/docs/Web/API/PerformancePaintTiming
• web.dev FCP 指南：https://web.dev/articles/fcp
• Chrome 性能相关文档：https://developer.chrome.com/docs/lighthouse/performance/fcp/