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` 事件，可用于监测与优化。 示例 ```js 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/