Премиальное программное обеспечение и практические уроки

Что такое FCP? First Contentful Paint (FCP)

Первая отрисовка контента (FCP) — важная метрика, ориентированная на пользователя, для измерения воспринимаемой скорости загрузки, поскольку она отмечает момент на шкале загрузки страницы, когда пользователь впервые видит какой-либо контент на экране. Быстрый FCP помогает пользователям убедиться, что всё работает.

uzbox
2022-03-22

首次内容绘制 (ФКП) 是测量感知加载速度的一个以用户为中心的重要指标，因为该项指标会在用户首次在屏幕上看到任何内容时，在页面加载时间轴中标记出相应的点，迅捷的 FCP 有助于让用户确信某些事情正在руководить.

什么是 FCP？

首次内容绘制 (FCP) 指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时FCP间。对于该指标，"内容"指的是文本、图像（包括背景图像）、

在上方的加载时间轴中，FCP 发生在第二帧，因为那是首批文本和图像元素在屏幕上完成渲染的时间点。

您会注意到，虽然部分内容已完成渲染，但并非所有内容都已经完成渲染。这是首次内容绘制 (FCP) 与*Largest Contentful Paint 最大内容绘制 (LCP)*（旨在测量页面的主要内容何时完成加载）之间的重要区别。

怎样算是良好的 FCP 分数？

为了提供良好的用户体验，网站应该努力将首次内容绘制控制在1.8 秒Чтобы гарантировать достижение рекомендуемого целевого значения во время большинства посещений ваших пользователей, хороший порог измерения75-й процентиль, и этот порог применяется как к мобильным, так и к настольным устройствам.

如何测量 FCP

FCP 可以进行лабораторияИзмерить илидействительныйИзмерено и может быть использовано в следующих инструментах:

Инструменты измерения

Лабораторные инструменты

在 JavaScript 中测量 FCP

要在 JavaScript 中测量 FCP，您可以使用绘制计时 APIВ следующем примере показано, как создатьPerformanceObserver来侦听名称为first-contentful-paint的paint条目并记录在控制台中。

在上方的示例中，已记录的first-contentful-paint条目会告诉您首个内容元素的绘制时间点。但在某些情况下，该条目并不能够用来测量 FCP。

В следующих разделах перечислены различия между тем, что сообщает API, и тем, как рассчитываются показатели.

Различия между метриками и API

API 会为在后台选项卡中加载的页面分发first-contentful-paint条目，但在计算 FCP 时应忽略这些页面（只有当页面始终处于前台时才应考虑首次绘制的时机）。
Когда страница пропускаетсяКэш туда и обратно恢复时，API 不会报告first-contentful-paint条目，但在这些情况下应该测量 FCP，因为这对用户来说是多次不同的页面访问体验。
API 可能不会报告跨域 iframe 中的绘制时机，但要想正确测量 FCP，您应该考虑所有框架的情况。子框架可以使用 API 将这些框架的绘制时机报告给父框架来进行聚合。

Вместо того, чтобы помнить все эти нюансы, разработчики могут использоватьбиблиотека JavaScript web-vitalsДля измерения LCP библиотека сама обрабатывает эти различия (где это возможно):

импорт {getFCP} from 'web-vitals'; // 当 FCP 可用时立即进行测量和记录。 getFCP(console.log);