First Contentful Paint

First Contentful Paint (FCP, первая отрисовка контента) – это метрика скорости, которая показывает, через сколько времени после перехода на страницу браузер вывел на экран первый контент: текст, картинку, SVG или непустой canvas. Хорошим Google считает FCP 1,8 секунды и меньше.

FCP отвечает на первый вопрос посетителя: «Оно вообще грузится?» Пока на экране белое поле, человек не знает, работает ли сайт. Когда появляется шапка или первая строка текста, ждать становится легче, даже если остальная страница ещё догружается. Поэтому FCP часто называют метрикой «ощущения скорости».

Какой FCP считается хорошим и где его смотреть

Как и у других метрик скорости, смотрят на 75-й процентиль реальных посещений отдельно для мобильных и компьютеров. В лабораторной оценке Lighthouse FCP даёт 10% итогового балла производительности.

PageSpeed Insights показывает и полевые данные реальных посетителей Chrome, и лабораторный прогон Lighthouse. В Chrome DevTools на вкладке Performance момент FCP отмечен на шкале загрузки. Полевое значение обычно хуже лабораторного: в него попадают редиректы с рекламы, медленный мобильный интернет и время выгрузки предыдущей страницы.

FCP рядом с TTFB, LCP и Speed Index

FCP часто путают с другими показателями загрузки. Разница в том, какой момент каждый из них фиксирует:

FCP не входит в Core Web Vitals, но тесно связан с LCP: пока не случилась первая отрисовка, не может случиться и отрисовка главного элемента. Медленный FCP почти всегда тянет за собой медленный LCP. Подробнее о заполнении экрана в статье Speed Index.

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

Что замедляет FCP и как это исправить

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

• Медленный ответ сервера. Если сервер думает секунду, FCP не может быть меньше секунды. Помогают кэширование страниц на стороне сервера и нормальный хостинг.
• Редиректы. Каждый лишний переход с http на https или со слеша на без слеша добавляет круг запросов. Ссылки и рекламу ведите сразу на конечный адрес.
• CSS и скрипты, которые блокируют отрисовку. Браузер не рисует страницу, пока не загрузит стили из head и не выполнит обычные скрипты там же.
• Веб-шрифты. Пока шрифт грузится, текст может оставаться невидимым. Свойство font-display: swap показывает текст запасным шрифтом сразу.
• Тяжёлый HTML: десятки килобайт встроенных скриптов и огромное дерево элементов.

Типовые правки в коде выглядят так:

<link rel="preconnect" href="https://fonts.example.com">
<script src="/js/app.js" defer></script>

@font-face { font-family: Inter; font-display: swap; }

Атрибут defer откладывает выполнение скрипта до разбора страницы, preconnect заранее открывает соединение с внешним сервером, а font-display: swap не прячет текст.

Порядок правок обычно такой: сначала сервер, потом блокирующие ресурсы, потом шрифты. Условный пример: корпоративный сайт на CMS, FCP 3,4 с на мобильных, сервер отвечает дольше секунды, в head шесть файлов стилей и два скрипта без defer. После кэширования страниц, объединения стилей с выносом в код страницы только нужных первому экрану и defer для скриптов повторный замер даёт FCP около 1,5 с.

Почему зелёный FCP ещё не значит быстрый сайт

Для FCP подходит любой из элементов: текст (даже одна строка в шапке), изображение, в том числе фоновое, SVG вроде логотипа или иконки и canvas, если он не белый. Заливка фона цветом контентом не считается. Если сайт сначала показывает анимированный значок загрузки в SVG, FCP сработает на нём: метрика зелёная, а человек смотрит на крутящийся кружок. Отсюда ошибки, на которые уходит время:

• Прятать всю страницу под прелоадер до полной загрузки. Первая отрисовка случится, а смысла в ней не будет.
• Оптимизировать картинки, когда проблема в ответе сервера.
• Мерить только с офисного компьютера на быстром интернете.

Скорость загрузки и метрики Lighthouse разбираем на техническом аудите сайта, а исправления делаем при SEO-продвижении и доработке сайта.

Сервер, Lighthouse и связь FCP с LCP

Справка web.dev и Chrome по FCP

• web.dev: First Contentful Paint (FCP)
• Chrome for Developers: оценка производительности в Lighthouse