---

title: "FCP 深入解析：First Contentful Paint 的定位与优化"

keywords:

• FCP
• 首次内容绘制
• RUM
• 关键渲染路径
• 优化
• DevTools

description: "解释 FCP 的定义与形成机制，结合 RUM 与 DevTools 定位常见瓶颈（TTFB、阻塞 CSS/JS、图片解码），并给出工程化优化路径与参考。"

categories:

• 文章资讯
• 技术教程

---

概述

FCP 衡量首次内容（文本、图像、非白屏）渲染到屏幕的时间。受网络、服务器响应与关键渲染路径影响。与 LCP 不同，FCP关注首个内容而非最大内容。

定位与影响因素

• TTFB：降低服务器延迟与启用缓存/CDN。
• 阻塞资源：渲染阻塞 CSS 与阻塞脚本延迟加载；关键 CSS 抽取；字体 preload 与 font-display。
• 图像解码：关键图片预加载与 img.decode() 提前解码。

优化路径

• 网络层：HTTP/3/QUIC、会话恢复、压缩与早期提示（103）。
• 渲染层：减少首屏脚本与同步任务；使用现代图片与尺寸占位；避免长任务阻塞。

参考与验证

• ［参考1］web.dev：优化 FCP（影响因素与定位方法）：https://web.dev/articles/optimize-fcp
• ［参考2］web.dev：关键渲染路径优化指南（阻塞资源与图像解码）：https://web.dev/articles/critical-rendering-path
• ［参考3］Chrome Docs：Lighthouse 的 FCP 检测与建议：https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint

关键词校验

关键词与 FCP 主题一致。