Что такое FCP?
FCP (First Contentful Paint) — это время до отрисовки: момент, когда браузер впервые показывает посетителю хоть что-то из содержимого страницы: текст, картинку, векторный рисунок или белый фон с рамкой. С этого момента человек видит, что сайт отвечает, и страница «живает».
Чтобы понять, где именно возникает эта цифра, полезно представить путь страницы в браузере:
загрузка HTML (TTFB) → время до загрузки DOM → время до отрисовки (FCP) → отрисовка основного контента (LCP)Сначала загружается HTML и строится DOM (дерево документа), затем браузер применяет стили и впервые рисует контент. Точка этой первой отрисовки и есть FCP.
Какой FCP считается хорошим?
- до 1,8 секунды: хорошо;
- 1,8–3 секунды: требует улучшения;
- более 3 секунд: плохо, посетитель смотрит на пустой экран.
Где смотреть: PageSpeed Insights (FCP в разделе метрик), GTmetrix, Lighthouse. Важно смотреть полевые данные (реальные посетители) и лабораторные замеры в связке: они дополняют друг друга.
Что задерживает первую отрисовку?
- медленный TTFB: пока не пришёл HTML, рисовать нечего;
- блокирующие скрипты и стили в начале страницы;
- шрифты: текст не рисуется, пока не подгружен файл шрифта, если не настроен показ запасного варианта;
- тяжёлые темы и плагины, собирающие страницу на лету.
Как улучшить FCP?
- снизить TTFB: кэширование и CDN ускоряют самый первый шаг;
- предзагрузка ключевых шрифтов (preload): текст появляется запасным шрифтом сразу, а не после загрузки фирменного;
- убрать блокирующие скрипты из начала страницы, перенести их вниз или отложить;
- отдавать критический CSS инлайн, остальное асинхронно;
- не вставлять в заголовок страницы элементы, которые parser закрывает раньше времени: любые теги до
</head>сдвигают отрисовку и ломают метатеги.
Связь FCP с другими показателями
FCP открывает семейство метрик отрисовки: дальше идут LCP (основной контент) и смещения макета, которые портят первое впечатление после отрисовки. Для отказов первый экран критичен: пустая страница теряет посетителей ещё до контента.
Итоги
FCP отвечает на вопрос «как быстро посетитель видит, что сайт работает». Ориентир — до 1,8 секунды. Снизить позволяют быстрый TTFB, предзагрузка шрифтов и отказ от блокирующих скриптов; следом стоит заняться LCP, чтобы доехал не только первый текст, но и основное содержимое.