FP (First Paint)
- First Paint（首次绘制）标志着浏览器开始在屏幕上渲染任何内容，包括背景颜色改变。
- 这是用户看到页面开始加载的第一个视觉反馈。尽管FP是一个相对宽泛的指标，但它能快速给出页面开始加载的初步指示。
FCP（First Contentful Paint）：
FCP 是指从用户开始请求页面（即导航开始）到页面上第一个内容元素（例如文本、图像或 SVG 元素）被绘制到屏幕上所需的时间。它衡量的是页面响应速度，尤其是在用户等待页面呈现时，浏览器为其展示第一部分内容的时间。
有意义的内容包括：
- 页面中的文本
- 图片
- SVG 元素
- Canvas 内容等
在加载时间轴中，FCP 发生在第二帧，因为这是第一个文本和图片元素渲染到屏幕上的时间。
您会发现，虽然部分内容已呈现，但并非所有内容都已呈现。这是一个重要的区别，需要在 First Contentful Paint 和 Largest Contentful Paint (LCP) 之间加以区分，后者旨在衡量网页的主要内容何时加载完毕。
为了提供良好的用户体验，网站应尽量将首次有意义的绘制时间控制在 1.8 秒或更短的时间。为确保大多数用户都能达到此目标值，一个合适的衡量阈值是网页加载时间的第 75 个百分位数，并按移动设备和桌面设备进行细分。
衡量 FCP 的方案
衡量 FCP 的方案有多种不同的方式，接下来我们将一一介绍。
PageSpeed Insights （简称 PSI）是由 Google 提供的一个免费的在线工具，用于分析网页的加载性能并提供优化建议。它主要通过评估页面的加载速度和响应能力，帮助开发者和站点所有者提升网页的用户体验。PageSpeed Insights 通过多项性能指标和数据，帮助用户理解页面的加载过程，并提供改进建议以优化网页的性能。
如何提高 FCP
如需了解如何提高特定网站的 FCP，您可以运行 Lighthouse 性能审核，并留意审核中建议的任何具体优化建议或诊断结果。
如需了解如何普遍提高 FCP（适用于任何网站），请参阅以下效果指南：
- 移除阻塞渲染的资源
- 缩减 CSS 大小
- 移除未使用的 CSS
- 移除未使用的 JavaScript
- 预先连接到必需的资源
- 缩短服务器响应时间（TTFB）
- 避免多次网页重定向
- 预加载关键请求
- 避免网络加载过大
- 使用高效的缓存策略提供静态资源
- 避免 DOM 构建过大
- 最大限度地缩短关键请求深度
- 确保文本在页面字体加载时保持可见状态
- 请将较低的请求数量和较小的输入大小
LCP (Largest Contentful Paint)
- Largest Contentful Paint（最大内容绘制）衡量的是页面上最大的可见元素（文字块或图像）变为可见所需的时间。
- 这是用户感知页面加载完成的重要标志，直接影响到用户感受到的速度。LCP应该尽快发生，理想情况下在2.5秒内。