FCP

FCP (First Contentful Paint) - это метрика производительности веб-страниц, которая измеряет время от начала загрузки страницы до момента, когда в области просмотра появляется первый текстовый или графический элемент контента. FCP показывает пользователю, что страница начала загружаться и что-то уже происходит.

FCP является одной из базовых метрик скорости загрузки и входит в набор метрик, используемых инструментами Lighthouse и PageSpeed Insights. Хороший FCP создаёт у пользователя впечатление быстрого сайта, даже если полная загрузка ещё не завершена. Плохой FCP заставляет пользователя смотреть на пустой экран и сомневаться, работает ли сайт вообще.

Что такое First Contentful Paint

First Contentful Paint фиксирует момент, когда браузер впервые отрисовывает любой контент, полученный из DOM. Этим контентом может быть:

текст (заголовки, абзацы, списки);
изображения (включая фоновые);
canvas-элементы;
SVG-графика.

Важно понимать, что FCP не учитывает загрузку всего контента страницы - только первый его элемент. Это может быть, например, заголовок страницы, который появился, а всё остальное ещё грузится. FCP также не учитывает, стал ли контент интерактивным - только визуальное появление.

FCP отличается от FMP (First Meaningful Paint), который пытается оценить появление основного, значимого контента. FCP проще и объективнее, поэтому именно он используется в современных инструментах анализа.

Зачем нужен FCP

FCP отвечает на важный психологический вопрос: когда пользователь видит, что сайт работает. Это критически важно для:

**Первого впечатления:** пользователь не должен смотреть на пустой экран дольше доли секунды.
**Удержания внимания:** если ничего не происходит, пользователь может закрыть вкладку.
**Восприятия скорости:** быстрый FCP создаёт ощущение быстрого сайта, даже если остальное грузится дольше.
**Мобильных устройств:** на медленных соединениях быстрый FCP особенно важен.

Исследования показывают, что задержка даже в 1 секунду может снижать конверсию и увеличивать показатель отказов.

Как измеряется FCP

FCP измеряется браузером автоматически. Момент фиксации FCP наступает, когда:

Браузер начинает загрузку страницы.
Происходит первая отрисовка любого контента из DOM.
Браузер фиксирует время этого события.

Для получения данных FCP можно использовать:

**Встроенные инструменты браузера:** Chrome DevTools, Performance panel.
**API браузера:** Paint Timing API позволяет программно получать значение FCP.
**Библиотеки:** web-vitals от Google для сбора метрик на реальных пользователях.
**Инструменты аналитики:** Google Analytics 4, Яндекс Метрика могут отслеживать FCP.
**Специализированные сервисы:** Lighthouse, PageSpeed Insights, WebPageTest.

В лабораторных тестах FCP измеряется в контролируемых условиях, а в полевых - на реальных пользователях (Chrome User Experience Report).

Хорошие и плохие значения FCP

Google установил чёткие пороговые значения для FCP на основе исследований пользовательского опыта:

**Хороший FCP:** менее 1,8 секунды.
**Требует улучшения:** от 1,8 до 3 секунд.
**Плохой FCP:** более 3 секунд.

Эти значения используются в инструментах Google и в отчётах Core Web Vitals (хотя сам FCP не входит в Core Web Vitals, а является вспомогательной метрикой).

Важно понимать, что эти значения применимы как к десктопным, так и к мобильным устройствам, хотя на мобильных добиться быстрого FCP сложнее.

Что влияет на FCP

На время появления первого контента влияет множество факторов.

Время ответа сервера (TTFB)

Если сервер долго отвечает, браузер не может начать отрисовку. Оптимизация TTFB - первый шаг к улучшению FCP.

Блокирующий CSS

Браузер не отрисовывает страницу, пока не загрузит и не обработает весь CSS из секции head. Большие CSS-файлы или медленная их загрузка задерживают FCP.

Блокирующий JavaScript

Скрипты, загружаемые без атрибутов async или defer, блокируют парсинг HTML и отрисовку контента. Чем больше блокирующих скриптов, тем хуже FCP.

Загрузка шрифтов

Если текст скрыт до загрузки шрифта (FOIT - Flash of Invisible Text), это может задерживать FCP. Использование font-display: swap позволяет показывать текст сразу системным шрифтом.

Редиректы

Каждый редирект добавляет дополнительное время до начала загрузки страницы.

Медленное соединение

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

Размер HTML

Огромный HTML-файл дольше загружается и парсится, что откладывает момент первой отрисовки.

Как улучшить FCP

Оптимизация FCP требует работы на нескольких уровнях.

Оптимизация сервера

быстрый хостинг и настройка сервера;
использование CDN для географически распределённой доставки;
настройка кэширования;
минимизация TTFB.

Критический CSS

Выделите стили, необходимые для отображения первого экрана, и встройте их прямо в HTML (inline). Остальной CSS загружайте асинхронно или отложенно.

Оптимизация загрузки скриптов

используйте async или defer для некритичных скриптов;
встраивайте критический JavaScript в HTML;
удаляйте неиспользуемый код;
минифицируйте и сжимайте скрипты.

Оптимизация шрифтов

используйте font-display: swap;
предзагружайте критические шрифты с помощью preload;
используйте современные форматы (woff2);
минимизируйте количество шрифтов и их вариаций.

Предзагрузка важных ресурсов

Используйте `<link rel=preload>` для ключевых ресурсов (изображения, шрифты, скрипты, стили), которые нужны для первого экрана.

Устранение редиректов

Уберите цепочки редиректов, особенно перед загрузкой страницы.

Минификация HTML

Уменьшите размер HTML-кода, удалив комментарии, лишние пробелы и неиспользуемый код.

Оптимизация изображений

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

FCP в инструментах

FCP доступен во всех основных инструментах анализа производительности.

Lighthouse

В Lighthouse FCP отображается в разделе метрик производительности. Инструмент также даёт рекомендации по улучшению FCP, связанные с оптимизацией CSS, JavaScript и сервера.

PageSpeed Insights

PageSpeed Insights показывает FCP как в лабораторных данных (от Lighthouse), так и в полевых данных из Chrome User Experience Report (если они доступны). Это позволяет сравнивать результаты тестов с реальным пользовательским опытом.

Google Search Console

В отчёте Core Web Vitals можно увидеть, какие страницы имеют проблемы с FCP, хотя сам FCP не входит в Core Web Vitals. Это полезно для диагностики.

Chrome DevTools

В инструментах разработчика Chrome можно проанализировать все этапы загрузки и понять, что именно задерживает FCP. Performance panel показывает временную шкалу с отметкой FCP.

WebPageTest

WebPageTest предоставляет детальную информацию о FCP, включая видео загрузки и анализ каждого ресурса.

Библиотека web-vitals

Библиотека web-vitals от Google позволяет собирать данные о FCP от реальных пользователей и отправлять их в системы аналитики.

FCP и Core Web Vitals

FCP не входит в тройку метрик Core Web Vitals (LCP, INP, CLS), но остаётся важной вспомогательной метрикой. Core Web Vitals фокусируются на более значимых аспектах пользовательского опыта:

LCP - когда загрузился основной контент;
INP - насколько страница отзывчива;
CLS - насколько стабильно отображается контент.

Однако плохой FCP часто сигнализирует о проблемах, которые могут влиять и на Core Web Vitals. Например, медленный сервер или блокирующий CSS ухудшают не только FCP, но и LCP.

Типичные ошибки, ухудшающие FCP

Отсутствие оптимизации критического CSS: весь CSS загружается одним файлом, блокируя отрисовку.
Блокирующие скрипты в head: JavaScript загружается и выполняется до начала отрисовки.
Медленный сервер: большой TTFB задерживает начало загрузки.
Тяжёлые шрифты: текст не виден до загрузки шрифтов (FOIT).
Большой HTML: слишком много кода в начальном ответе сервера.
Редиректы: потеря времени на дополнительные запросы.
Нет кэширования: каждый пользователь грузит всё заново.

FCP и пользовательский опыт

Пользователи оценивают скорость сайта субъективно, и FCP сильно влияет на это восприятие. Даже если весь сайт загружается за 3 секунды, но первый контент появляется через 0,5 секунды, пользователь будет считать сайт быстрым. И наоборот, если сайт загружается те же 3 секунды, но всё это время экран остаётся пустым, пользователь будет раздражён.

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

Связанные термины

Аноним

Поиск

FCP