Первая отрисовка контента (FCP)
Что такое FCP? #
Метрика FCP (Первая отрисовка контента) измеряет время с момента начала загрузки страницы до момента, когда какая-либо часть содержимого страницы отобразится на экране. Под «содержимым» в этой метрике понимается текст, изображения (включая фоновые изображения), <svg> или небелые элементы <canvas>.
На приведенной выше временной шкале загрузки FCP происходит во втором фрейме, так как именно тогда первые элементы изображения и текст отображаются на экране.
Заметно, что хотя некоторая часть контента была отрисована, но не вся. Это важное различие между Первой отрисовкой контента(FCP) и Скоростью загрузки основного контента (LCP), цель метрики LCPизмерить время загрузки основного контента.
Какое значение показателя FCP можно считать хорошим? #
Для обеспечения удобства работы пользователей сайты должны стремиться к тому, чтобы время до первой отрисовки контента составляло 1,8 секунды или меньше. Чтобы убедиться, что вы достигли этой цели для большинства пользователей, рекомендуется в качестве порогового значения использовать 75-й процентиль загрузки страниц, сегментированный по мобильным и настольным устройствам.
Как измерить FCP #
FCP можно измерить в лабораторных или полевых условиях с помощью следующих инструментов:
Инструменты для измерения в полевых условиях #
- PageSpeed Insights
- Отчет Chrome User Experience Report
- Search Console (отчет о скорости загрузки)
- JavaScript-библиотека
web-vitals
Инструменты для измерения в лабораторных условиях #
Измерение FCP в JavaScript #
- chrome 60, Supported 60
- firefox 84, Supported 84
- edge 79, Supported 79
- safari 14.1, Supported 14.1
Чтобы измерить 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 в целом (для любого сайта), обратитесь к следующим руководствам по производительности:
- Устранение ресурсов, блокирующих рендеринг
- Минимизация CSS-кода
- Удаление неиспользуемого CSS-кода
- Предварительное подключение к нужным источникам
- Уменьшение времени ответа сервера (TTFB)
- Уход от переадресации нескольких страниц
- Предварительная загрузка ключевых запросов
- Уход от огромных нагрузок на сеть
- Обслуживание статических объектов сайта с помощью эффективной политики кеширования
- Уход от чрезмерного размера DOM
- Минимизация глубины вложенности критических запросов
- Настройка показа текста во время загрузки веб-шрифтов
- Поддержание малого количества запросов и объемов передаваемых данных
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.