性能优化-核心指标-FCP的介绍与优化

什么是 FCP

首次内容渲染 (FCP) 衡量从用户首次导航到网页到网页任何一部分内容呈现在屏幕上的时间。对于此指标，“内容”是指文本、图片（包括背景图片）、<svg> 元素或非白色 <canvas> 元素。

在此加载时间轴中，FCP 发生在第二帧，因为这是第一个文本和图片元素渲染到屏幕上的时间。

在上图中所示的加载时间轴中，FCP 发生在第二帧，因为这是第一个文本或图片元素渲染到屏幕上的时间。

您会发现，虽然部分内容已呈现，但并非所有内容都已呈现。这是一个重要的区别，请注意_首次内容绘制时间和[最大_内容绘制时间 (LCP)](https://web.dev/articles/lcp?hl=zh-cn)，后者旨在衡量网页的主要内容何时加载完毕。

FCP 得分多少算好

为了提供良好的用户体验，网站应尽量将首次有意义的绘制时间控制在 1.8 秒或更短的时间。为确保大多数用户都能达到此目标值，一个合适的衡量阈值是网页加载时间的第 75 个百分位数，并按移动设备和桌面设备进行细分。

更详细的数据可以参考 lighthouse 性能分计算

如何获取 FCP

在 js 中，可以通过 PerformanceObserver对象来获取 FCP 的具体数据

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});

PerformanceObserver 是用于监测性能条目的 API，可以观察特定类型的性能指标（如资源加载、长任务等）

代码验证如下：

通过测试 本网站的 FCP 数值是 396 ms，在 1.8s 以内，属于性能极好的。也是验证我们在 Lighthouse 性能分计算过程详解 过程中 100 分的结果

如何优化 FCP

FCP 是用户首次输入网址 -> 网页任何一部分内容呈现在屏幕上的时间。因此，我们要保证内容可以最快渲染出来，阻塞的资源拆分或者之后再出

🌐 优化网络

网络优化是web性能绕不开的话题，我们已经总结在 前端性能优化-网络篇 感兴趣的直接查阅即可。

这里给到优化思维导图：

🚀 减少阻塞渲染的资源​

• 延迟非关键 CSS/JS​：使用 async 或 defer 加载非关键脚本，避免阻塞 HTML 解析

• 内联关键 CSS​：将首屏所需的 CSS 直接内联到 <style> 标签中，减少 HTTP 请求。

• 移除未使用的 CSS/JS​：通过工具（如 PurgeCSS、Tree Shaking）删除冗余代码。

• JS 执行后置：将 <script>标签放在内容之后，避免 JS 执行阻塞页面渲染

⚙️ JS 执行优化

• 避免长任务（Long Tasks）​：使用 requestIdleCallback 或 Web Workers 处理耗时任务。

• 最小化主线程工作​：减少复杂计算，使用 IntersectionObserver 延迟执行。

🖼️ 图片、字体优化

• 使用现代格式（WebP/AVIF）​：比 JPEG/PNG 更小且质量更高。

• 懒加载非首屏图片​：使用 loading="lazy" 延迟加载。

• 响应式图片​：使用 srcset 适配不同设备分辨率。

• 预加载关键字体​：使用 preload 预加载字体

原文地址：https://webfem.com/post/performance-fcp，转载请注明出处