FCP (First Contentful Paint) — это отметка времени, когда браузер отрисовывает на экране первый фрагмент содержимого: строку текста, картинку, SVG или фоновое изображение с непустым содержимым. Отсчёт идёт от команды на переход по адресу. Что это значит на практике: пользователь перестаёт смотреть на белый экран и получает первый сигнал, что страница живая.
Метрика входит в лабораторный набор Lighthouse и отражает скорость первичного рендеринга. Порог из документации Google: FCP ≤ 1.8 с — зона Хорошо, 1.8–3.0 с — Требует улучшения, свыше 3.0 с — Плохо. Замеряется в PageSpeed Insights, Lighthouse и через JavaScript-интерфейс Paint Timing API.
§ 01Что показывает
Время первой отрисовки контента фиксирует переход от пустого вьюпорта к первому видимому элементу DOM. В отличие от LCP, которое ждёт самый крупный блок, эта метрика срабатывает на любом первом непустом пикселе — даже на одном заголовке. <canvas> без содержимого и белый фон отрисовкой не считаются. Показатель скорости отрисовки отвечает на вопрос пользователя: сайт вообще грузится или завис?
§ 02Как измерить
Лабораторный замер даёт Lighthouse и вкладка Performance в DevTools — прогон в контролируемой среде без реальных пользователей. Полевые данные собирает CrUX и отчёт Core Web Vitals в Search Console по 75-му перцентилю живого трафика. В коде момент первой отрисовки достаёт PerformanceObserver с типом paint и записью first-contentful-paint. PageSpeed Insights показывает обе цифры рядом — лабораторную и полевую.
FCP 3.1→1.4 c — Интернет-магазин косметики на Shopify вынес критический CSS инлайном и отложил сторонние скрипты через defer. FCP упал с 3.1 до 1.4 с за 5 недель. Замер через PSI и CrUX-75th, показатель отказов снизился на 11%.
FCP 2.8→1.2 c — Новостной портал на WordPress подключил шрифты через font-display:swap и preconnect к CDN, убрав блокировку рендера. FCP сократился с 2.8 до 1.2 с за 4 недели. Динамика по GA4 и Lighthouse, глубина просмотра выросла на 9%.
§ 03Что искажает замер
Блокирующий рендеринг CSS и синхронный JavaScript в <head> сдвигают показатель вправо: браузер не рисует ничего, пока не построит CSSOM. Медленный ответ сервера — высокий TTFB — переносит старт отрисовки целиком. Кастомные шрифты с font-display: block прячут текст до загрузки файла. Редиректы, тяжёлые сторонние скрипты и отсутствие кеширования тоже завышают время до первого контента.
§ 04Что делать с плохим значением
Сократить критический CSS и вынести его инлайном, а остальное грузить асинхронно — первый шаг при значении выше 3 секунд. Для скриптов работают атрибуты defer и async, чтобы не блокировать построение страницы. Шрифты переводят на font-display: swap и подключают preconnect к домену CDN. Снижение TTFB через кеш и CDN ускоряет фцп напрямую. Проверять результат удобно повторным прогоном в Lighthouse.