Learn Measure Blog About

Первая отрисовка контента (FCP)

Первая отрисовка контента (FCP)

• Updated
Appears in: Metrics
Philip Walton
Philip Walton

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

Что такое FCP? #

Метрика FCP (Первая отрисовка контента) измеряет время с момента начала загрузки страницы до момента, когда какая-либо часть содержимого страницы отобразится на экране. Под «содержимым» в этой метрике понимается текст, изображения (включая фоновые изображения), <svg> или небелые элементы <canvas>.

Временная шкала FCP с google.com

На приведенной выше временной шкале загрузки FCP происходит во втором фрейме, так как именно тогда первые элементы изображения и текст отображаются на экране.

Заметно, что хотя некоторая часть контента была отрисована, но не вся. Это важное различие между Первой отрисовкой контента(FCP) и Скоростью загрузки основного контента (LCP), цель метрики LCPизмерить время загрузки основного контента.

Хорошие значения FCP не более 1,8 секунды, низкие значения больше 3,0 секунд, и все, что находится между ними, требует улучшения

Какое значение показателя FCP можно считать хорошим? #

Для обеспечения удобства работы пользователей сайты должны стремиться к тому, чтобы время до первой отрисовки контента составляло 1,8 секунды или меньше. Чтобы убедиться, что вы достигли этой цели для большинства пользователей, рекомендуется в качестве порогового значения использовать 75-й процентиль загрузки страниц, сегментированный по мобильным и настольным устройствам.

Как измерить FCP #

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

Инструменты для измерения в полевых условиях #

Инструменты для измерения в лабораторных условиях #

Измерение FCP в JavaScript #

Чтобы измерить FCP в JavaScript, можно воспользоваться Paint Timing API. В следующем примере показано, как создать PerformanceObserver, который прослушивает записи paint с именем first-contentful-paint и регистрирует их в консоли.

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

Warning:

Этот код показывает, как регистрировать в консоли записи first-contentful-paint, но само измерение FCP в JavaScript сложнее. Подробнее см. ниже:

В приведенном выше примере зарегистрированная запись first-contentful-paint сообщит, когда был отрисован первый элемент контента. Однако в некоторых случаях эта запись недействительна для измерения FCP.

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

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

  • API отправит запись first-contentful-paint для страниц, загруженных в фоновых вкладках, но эти страницы следует игнорировать при вычислении FCP (время первой отрисовки нужно учитывать только в том случае, если страница всё время находилась на переднем плане).
  • API не сообщает о записях first-contentful-paint, когда страницы восстанавливаются функцией back/forward cache, но в данных случаях следует измерять FCP, поскольку пользователи воспринимают такие посещения страниц как отдельные.
  • API может не сообщать о времени отрисовки из iframe с перекрестным происхождением, но для правильного измерения FCP следует учитывать все фреймы. Подфреймы могут использовать API, чтобы сообщать о времени отрисовки в родительский фрейм для агрегирования.

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

import {getFCP} from 'web-vitals';

// Measure and log FCP as soon as it's available.
getFCP(console.log);

Полный пример измерения FCP в JavaScript приводится в исходном коде getFCP().

В некоторых случаях (например, в iframe с перекрестным происхождением) невозможно измерить FCP в JavaScript. См. подробности в разделе «Ограничения» библиотеки web-vitals.

Как улучшить показатель FCP #

Чтобы узнать, как улучшить FCP для конкретного сайта, можно запустить проверку производительности с помощью Lighthouse и обратить внимание на любые конкретные возможности улучшения или диагностики, предлагаемые проверкой.

Чтобы узнать, как улучшить FCP в целом (для любого сайта), обратитесь к следующим руководствам по производительности:

CHANGELOG #

Occasionally, bugs are discovered in the APIs used to measure metrics, and sometimes in the definitions of the metrics themselves. As a result, changes must sometimes be made, and these changes can show up as improvements or regressions in your internal reports and dashboards.

To help you manage this, all changes to either the implementation or definition of these metrics will be surfaced in this CHANGELOG.

Performance Metrics
Last updated: Improve article