应用性能监控全链路版
应用性能监控全链路版
文档指南
请输入
- 文档首页
应用性能监控全链路版用户指南客户端监控WebPro 端监控使用指南性能指标及计算方式如何计算 FP 和 FCP指标
复制全文
下载 pdf如何计算 FP 和 FCP指标
文档反馈
问问助手指标解释
FP (First Paint)
- 首次渲染的时间点。 在性能统计指标中，从用户开始访问 Web 页面的时间点到 FP 的时间点这段时间可以被视为 白屏时间，也就是说在用户访问 Web 网页的过程中，FP 时间点之前，用户看到的都是没有任何内容的白色屏幕，用户在这个阶段感知不到任何有效的工作在进行。
- 所以通常会反映页面的白屏时间，而白屏时间会反映当前 Web 页面的网络加载性能情况，当加载性能非常良好的情况下，白屏的时间就会越短，用户等待内容的时间就会越短，流失的概率就会降低。
FCP (First Contentful Paint)
- 首次有内容渲染的时间点。 在性能统计指标中，从用户开始访问 Web 页面的时间点到 FCP 的时间点这段时间可以被视为 无内容时间，也就是说在用户访问 Web 网页的过程中，FCP 时间点之前，用户看到的都是没有任何实际内容的屏幕，用户在这个阶段获取不到任何有用的信息。
- 所以通常会反映页面的首次出现内容的时间，而首次出现内容时间会反映当前 Web 页面的网络加载性能情况、页面 DOM 结构复杂度情况、inline script 的执行效率的情况，当所有的阶段性能做的非常好的情况下，首次出现内容的时间就会越短，用户等待的时间就会越短，流失的概率就会降低。
- 首次内容绘制 (FCP) 指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。对于该指标，"内容"指的是文本、图像（包括背景图像）、<svg>元素或非白色的<canvas>元素。
FP与FCP这两个指标之间的主要区别是：
- FP是当浏览器开始绘制内容到屏幕上的时候，只要在视觉上开始发生变化，无论是什么内容触发的视觉变化，在这一刻，这个时间点，叫做FP。
- FCP指的是浏览器首次绘制来自DOM的内容。例如：文本，图片，SVG，canvas元素等，这个时间点叫FCP。
怎样算是良好的 FCP 分数？
为了提供良好的用户体验，网站应该努力将首次内容绘制控制在1.8 秒或以内。为了确保您能够在大部分用户的访问期间达成建议目标值，一个良好的测量阈值为页面加载的第 75 个百分位数，且该阈值同时适用于移动和桌面设备。
说明
这里的第 75 个百分位数含义为：假设 FCP 的良好阈值为 1.8 秒，希望有 75% 页面（页面数量）的加载时间在这个阈值以内，即在 1.8 秒或更短的时间内完成首次内容绘制。
平台如何消费 FP、FCP
站点性能总览
在站点性能总览的 PID 聚合模块中可以查看页面的整体 FCP 达标率，也可以把 FCP 最差的页面按排名展示。
在站点性能总览的指标总览模块中，可以看到整站的 FCP 情况以及趋势。
页面详情
从站点性能总览点击单个 pid 链接，进入页面详情后，也可以观察单个页面的 FCP 情况。
页面列表
页面列表的概览表格中，在自定义列中勾选各项体验指标后，即可从页面的角度来观察各项指标。
数据探索
数据探索中，在 Views 模块中可查看每次页面访问的 FP、FCP 指标。
数据分析
在数据分析页面中可以添加FP和FCP，任意结合其他指标生成图表进行消费，配置完成后可添加至看板。
监控报警
如何获取指标
通过 W3C Paint Timing 规范草案 中的描述， PerformancePaintTiming 中包含当前 Web 页面的绘制性能打点信息，可通过 *performance.getEntriesByType('paint')* 方法获取， FP和 FCP 就在其中。
- 找到 name 为 first-paint 的对象，描述的即为 FP 的指标数据，其中 startTime 即为 FP 时间。
-
- 找到 name 为 first-contentful-paint 的对象，描述的即为 FCP 的指标数据，其中 startTime 即为 FCP 时间。
-
浏览器兼容性说明
如何优化FP && FCP指标
参考文章
https://web.dev/fcp
最近更新时间：2026.10.15 20:24:46
这个页面对您有帮助吗？
有用
有用
无用
无用