First Contentful Paint

First Contentful Paint

2 мин.
20
First Contentful Paint (FCP) — это метрика производительности, которая показывает время от начала загрузки страницы до момента, когда в области просмотра (viewport) впервые отрисовывается любой контент из DOM: текст, изображение, SVG или элемент canvas. Проще говоря, FCP отвечает на вопрос: «Когда пользователь впервые увидел, что страница начала отображаться».

Что именно считается контентом для FCP

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

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

Не считаются «контентом» пустой фон страницы и элементы, которые ещё не отрисованы (например, контент, ожидающий данных или блокируемый стилями).

Зачем FCP нужен в мобильной оптимизации и SEO

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

Важно понимать: FCP — это не про «полную готовность» страницы, а про первый визуальный отклик. Для качества пользовательского опыта его нужно рассматривать вместе с другими метриками, например LCP и INP.

Что чаще всего ухудшает FCP

  • Блокирующие ресурсы: тяжёлые CSS и синхронные скрипты, которые задерживают первый рендер.
  • Медленный сервер: высокий TTFB увеличивает время до начала отрисовки.
  • Тяжёлая критическая часть страницы: крупные шрифты, большое количество стилей и сложная верстка в верхней части экрана.
  • Проблемы с загрузкой шрифтов: FOIT/задержки отрисовки текста из-за font-display и медленных CDN.

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

  • уменьшить TTFB: кэширование, оптимизация бэкенда, CDN;
  • вынести критический CSS (critical CSS), отложить некритичные стили;
  • перевести часть JS в defer/async и убрать ненужные скрипты;
  • оптимизировать шрифты: preload, font-display: swap, сокращение начертаний;
  • упростить верхнюю часть страницы: меньше тяжёлых компонентов до первого экрана.

Короткий вывод

First Contentful Paint — базовая метрика, показывающая, когда пользователь впервые увидел контент на странице. Улучшение FCP делает сайт визуально быстрее, снижает вероятность отказов и поддерживает мобильную оптимизацию, что косвенно помогает SEO и стабильности в поисковой выдаче.


Понравилась статья?

(Нет голосов)

Другие термины

Свежие статьи