指标解释

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 个百分位数，且该阈值同时适用于移动和桌面设备。

平台如何消费 FP、FCP

站点性能总览

在站点性能总览的 PID 聚合模块中可以查看页面的整体 FCP 达标率，也可以把 FCP 最差的页面按排名展示。

在站点性能总览的指标总览模块中，可以看到整站的 FCP 情况以及趋势。

页面详情

从站点性能总览点击单个 pid 链接，进入页面详情后，也可以观察单个页面的 FCP 情况。

页面列表

页面列表的概览表格中，在自定义列中勾选各项体验指标后，即可从页面的角度来观察各项指标。

数据探索

数据探索中，在 Views 模块中可查看每次页面访问的 FP、FCP 指标。

数据分析

在数据分析页面中可以添加FP和FCP，任意结合其他指标生成图表进行消费，配置完成后可添加至看板。

监控报警

可以在监控报警模块配置 FP、FCP 指标的报警，web.dev 对于 FCP 给出的推荐时间是 1.8s，可以根据您站点的自身特性来适当调整。

如何获取指标

通过 W3C Paint Timing 规范草案 中的描述， PerformancePaintTiming 中包含当前 Web 页面的绘制性能打点信息，可通过 *performance.getEntriesByType('paint')* 方法获取， FP和 FCP 就在其中。

• 找到 name 为 first-paint 的对象，描述的即为 FP 的指标数据，其中 startTime 即为 FP 时间。
  
• 找到 name 为 first-contentful-paint 的对象，描述的即为 FCP 的指标数据，其中 startTime 即为 FCP 时间。
  

浏览器兼容性说明

指标要求浏览器支持 Paint Timing API，在不兼容的情况下，上报的指标中 isSupport 为false。

如何优化FP && FCP指标

• 优化：消除阻塞资源
• 优化：缩小 CSS
• 优化：移除未使用的CSS
• 优化：预连接到所需的来源
• 优化：减少服务端响应时间（TTFB）
• 优化：避免多个页面重定向
• 优化：预加载关键请求
• 优化：避免巨大的网络负载
• 优化：如何使用高效缓存策略去缓存静态资源
• 优化：避免 DOM 过大
• 优化：最小化关键请求深度
• 优化：确保文本在网页字体加载期间保持可见
• 优化：保持较少的请求数以及较小的传输大小

参考文章

https://web.dev/fcp
https://github.com/berwin/Blog/issues/46