什么是 FCP（首次内容绘制）？| SEO 术语表

首次内容绘制（FCP）衡量的是，在用户请求一个页面之后，第一块内容（文本、图像、SVG 或非白色画布）渲染到屏幕上所需的时间。这是用户看到"这个页面正在响应"的第一个迹象的时刻。

盯着空白屏幕的用户会很快跳出。Nielsen Norman Group 的研究显示，一旦首个视觉响应超过 1 秒，注意力就会急剧下降。FCP 如今并不是官方的核心网页指标，但它是 Lighthouse 性能评分的关键组成部分，也是 LCP 的先行指标。如果 FCP 慢，LCP 就永远不可能好。

按 Chrome 用户体验报告中真实用户数据的第 75 百分位（p75）测量。

页面加载是一条由若干顺序指标构成的时间线。

顺序很重要：如果 TTFB 慢，FCP 就快不起来，LCP 也快不起来。性能工作必须"从顶部开始"。

TTFB 慢：服务器慢，FCP 就会同等程度地变慢。

渲染阻塞资源：<head> 中的外部 CSS 和同步 JS 必须先下载并执行，浏览器才能绘制。数量太多或体积太大，FCP 就会停滞。

DOM 体积过大：初始 HTML 中成千上万的元素会消耗解析和布局时间。

网页字体加载：尚未加载的自定义字体会导致 FOIT（不可见文本闪烁），让 FCP 显得被拖延。

客户端渲染（CSR）：只有在下载并执行 JS 包之后才绘制内容的 React 和 Vue 应用，会显著推后 FCP。

改善 TTFB：CDN、服务器端缓存和数据库优化，这是基础。

消除渲染阻塞资源：使用 async 和 defer 来延迟 JS。内联关键 CSS，其余部分异步加载。

服务器端渲染（SSR）：使用 Next.js、Astro 或 Remix 等框架在服务器上预生成 HTML。

字体优化：font-display: swap 在自定义字体加载期间立即显示后备文本。仅对关键字体使用 preload。

精简 JS 包：摇树优化、代码分割以及移除未使用的库，都能降低初始包体积。

图像优化：对首屏图像使用 <link rel="preload">，并提供 WebP 或 AVIF 格式。

Sources: