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

Nov 7, 2019 — Обновлено Oct 19, 2022

Available in: English, Español, Português, 中文, 日本語, and 한국어

Что такое FCP? #

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

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

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

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

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

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

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

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

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

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

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

Browser support

Chrome 60, Supported 60
Firefox 84, Supported 84
Edge 79, Supported 79
Safari 14.1, Supported 14.1

Source

Чтобы измерить 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});

В приведенном выше примере зарегистрированная запись 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 {onFCP} from 'web-vitals';

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

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

Как улучшить показатель 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.

If you have feedback for these metrics, you can provide it in the web-vitals-feedback Google group.

Последнее обновление

Oct 19, 2022 — Улучшить статью

Return to all articles