FCP 的衡量与优化

FCP 衡量什么，如何优化？

---

• 概念：首次内容绘制 (FCP) 衡量的是从页面加载到页面的一部分内容呈现在屏幕上的时间。通俗来说，这个指标显示了用户从输入链接到看到第一个画面的时间。首次内容绘制可以有效降低跳出率
• 计算公式：FCP ≈ TTFB 的衡量与优化 + ResourceDownloadTime + HandleDomTime + RenderTime
• 优化策略：
  • 避免 JavaScript 阻塞 HTML 的解析
• 尽量将 JavaScript 文件放在body的最后
• 使用 defer 或者 async 属性，延迟加载 script 脚本
• 使用 npm 引入而不是 script 引入
  • 移除未使用的 CSS 和 JavaScript 代码
  • 避免网络负载庞大
• 图片格式使用 WebP 等格式，而非 JPEG 或 PNG 格式
• 对视频等媒体类文件，改为延迟加载，通过占位符等方式预留播放位置。
  • 采用高效的缓存策略来提供静态资源
  • 最大限度地缩短关键请求资源深度
  • 尽量减少请求数量，减少传输大小
  • 确保文本在网页字体加载期间保持可见状态

核心判断

FCP 标记从导航开始到浏览器首次绘制文本、图片、非空白 <canvas> 或 SVG 的时间，也就是空白屏第一次被内容打破；它不代表主要内容已经加载完成。

Source

• 首次内容绘制（FCP）
• 性能监控

Connections

• 建立在：TTFB 的衡量与优化——服务器响应和传输发生在浏览器首次绘制内容之前，是 FCP 时间的一部分。
• 对照：LCP 的衡量与优化——FCP 记录“首次出现内容”，LCP 记录“视口内最大内容出现”，两者回答不同的加载体验问题。
• 建立在：浏览器的渲染过程的机制和使用要点——浏览器完成必要的解析、样式计算、布局与绘制后，才会产生 FCP。

Excalidraw Data

Text Elements

导航开始

FCP

首次内容