First Contentful Paint是什么意思

First Contentful Paint (FCP) 是衡量网页性能的一个重要指标，并且也是SEO的考核标准，表示浏览器首次渲染页面中任何内容的时间点，这些内容包括文本、图片、非空白的 <canvas> 或 SVG 元素等，简单的说就是用户打开网页时，FCP 标记的是他们第一次看到“实际内容”（而不是空白或加载动画）的时刻。

为什么 FCP 重要？
用户体验：FCP直接影响用户对网页加载速度的感知。如果 FCP 时间短，用户会感觉网页“更快”。
SEO 影响：Google将FCP作为核心网页指标（Core Web Vitals）之一，影响搜索排名。
示例场景

• 用户访问一个新闻网站：
  
  
  • 0.5秒：FCP 触发，用户看到标题和首段文字。
  • 3秒：页面完全加载（图片、广告等）。
  • 此时，用户会因快速看到内容而更愿意停留。
    
    

如何测量 FCP？

• 工具：Chrome DevTools、Lighthouse、Web Vitals JavaScript API。
• 优秀标准：FCP ≤ 1.8 秒（根据Google建议）。
  
  

优化 FCP 的常见方法

减少关键资源阻塞：

• 压缩 CSS/JS 文件，延迟非关键脚本。
• 使用 async 或 defer 加载 JS。
  
  

加速服务器响应：

• 使用 CDN 分发内容。
• 启用服务器端缓存（如：Redis）。
  
  

预加载关键资源：

• 通过 <link rel="preload"> 提前加载字体或首屏图片。
  
  

减少渲染阻塞：

• 内联关键 CSS（Critical CSS），避免外部样式表延迟渲染。
  
  

与其他指标的区别

• FCP：首次内容渲染（如文字）。
• LCP (Largest Contentful Paint)：最大内容（如：图片或大段文本）渲染完成的时间。
• TTI (Time to Interactive)：页面可交互的时间（如：按钮可点击）。
  
  

网站通过优化FCP可以有效提升用户对网页速度的感知、降低跳出率，同时满足搜索引擎的排名要求。