"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 主题一致。