Что такое First Contentful Paint (FCP)?

Что такое First Contentful Paint (FCP)?

First Contentful Paint (FCP) — это одна из ключевых метрик производительности веб-страниц, входящая в состав Core Web Vitals. Она измеряет время в миллисекундах от момента, когда пользователь начинает переходить на страницу (например, вводит URL или нажимает ссылку), до момента, когда браузер впервые отрисовывает любой текстовый или графический контент. Это может быть текст, изображение, SVG, canvas или даже непустой элемент <div>. FCP не учитывает фоновые изображения или шрифты, загруженные через @font-face.

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

FCP фиксируется браузером в момент, когда происходит первая отрисовка контента в окне просмотра. Для измерения используются инструменты вроде Lighthouse, PageSpeed Insights или Performance API в браузере. Пример получения FCP через JavaScript:

new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach(entry => {
    console.log('FCP:', entry.startTime, 'ms');
  });
}).observe({ type: 'paint', buffered: true });

Почему FCP важен?

FCP напрямую влияет на восприятие скорости загрузки пользователем. Если FCP высокий (более 2.5 секунд), пользователь может подумать, что страница не работает, и уйти. Низкий FCP (менее 1.8 секунды) создаёт ощущение быстрой загрузки. Метрика особенно критична для контентных сайтов, интернет-магазинов и новостных порталов, где первое впечатление решает многое.

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

• Минимизируйте блокирующий рендеринг CSS и JavaScript.
• Используйте критический CSS (inline-стили для первого экрана).
• Оптимизируйте изображения (сжатие, современные форматы WebP).
• Настройте кэширование ресурсов через CDN.
• Удалите неиспользуемый код и библиотеки.

Вывод

FCP — это базовая метрика для оценки начальной загрузки страницы. Её улучшение напрямую повышает пользовательский опыт и может положительно сказаться на SEO и конверсии. Рекомендуется регулярно мониторить FCP в реальных условиях и оптимизировать критические пути рендеринга.