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

# 概述 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 主题一致。