什么是首次内容绘制（FCP）？阈值和优化方法

什么是首次内容绘制？

首次内容绘制（FCP）是页面不再是一片空白的时刻：从开始导航到浏览器画出首段文字、图片、SVG 或非白色画布的时间。它告诉访客页面正在加载。

FCP 不在三项 Core Web Vitals 之列，但能解释它们。FCP 慢，LCP 不可能快；FCP 快而 LCP 慢，问题出在主图或标题上，而不是页面框架。

FCP 为什么慢

浏览器画出任何东西之前，都要先拿到 HTML（首字节时间），以及 <head> 里所有样式表和同步脚本。所以 FCP 慢几乎总是这几个原因：

• 服务端响应慢或有重定向，HTML 迟迟不到。
• head 里有阻塞渲染的 CSS 和 JavaScript。
• 网页字体加载完之前把文字藏起来。

一个示例拆解

示例数据：某博客移动端的 P75 FCP 是 2.6 秒：等 HTML 1.2 秒，等两个样式表和一个同步脚本 1.0 秒，渲染 0.4 秒。

两项优化：在边缘节点缓存 HTML（首字节 1.2 → 0.5 秒）；把首屏需要的 CSS 内联，其余样式和脚本改成不阻塞加载（1.0 → 0.5 秒）。新的 FCP：0.5 + 0.5 + 0.4 = 1.4 秒，达到良好。

能让 FCP 变快的优化

1. 去掉重定向链，能缓存 HTML 就缓存。
2. 内联首屏需要的 CSS，其余异步加载。
3. head 里的脚本加上 defer 或 async。
4. 用 font-display: swap（或 optional），让文字先用后备字体显示。
5. 对必需的第三方域名做预连接。

在 TapCub 里看首次内容绘制

TapCub 用站点脚本从真实访问里采集 Web Vitals（第一个页面隐藏时上报一次；用 data-vitals="false" 关闭）。在网站统计 › 监测 › 性能里，卡片可在 P75、中位数、P95 和平均值之间切换，分组可按页面、设备、浏览器、国家和操作系统拆分，「最慢页面」按 P75 最大内容绘制排序。详见性能文档。