Пороговые значения FCP

First Contentful Paint (FCP) — это метрика, которая измеряет время, прошедшее с момента начала загрузки страницы до появления первого визуального контента, который может быть текстом, изображением, SVG или другим элементом DOM. FCP является критически важным показателем пользовательского опыта, поскольку именно визуальная обратная связь формирует у пользователя ощущение быстродействия сайта.

Основные понятия FCP

  • Время начала загрузки — момент, когда браузер получает первый байт ответа от сервера (TTFB).
  • Визуальный контент — любой элемент DOM, который браузер может отобразить на экране и который пользователь воспринимает как начало загрузки страницы.
  • Влияние на UX — задержка появления первого контента увеличивает вероятность того, что пользователь покинет сайт. Исследования показывают, что страницы с FCP более 2 секунд значительно снижают вовлечённость.

Пороговые значения FCP

Web Vitals делит показатели FCP на три категории:

  1. Хороший (Good): FCP ≤ 1,8 секунды В этом диапазоне пользователь получает быстрый визуальный отклик, что способствует высокой удовлетворённости и снижению показателя отказов.

  2. Нуждается в улучшении (Needs Improvement): 1,8 < FCP ≤ 3 секунд Страница отображает первый контент, но заметная задержка может вызывать лёгкое раздражение или недовольство у пользователя.

  3. Плохой (Poor): FCP > 3 секунд Пользователь ждёт появления контента слишком долго, что критически сказывается на UX и конверсии.

Эти пороговые значения основываются на исследованиях Google, учитывающих поведение пользователей на различных устройствах и сетевых условиях.

Методы измерения FCP

В JavaScript для измерения FCP используется библиотека Web Vitals. Основной метод — функция getFCP(callback):

import { getFCP } from 'web-vitals';

getFCP(metric => {
  console.log(metric.name);       // "FCP"
  console.log(metric.value);      // время в миллисекундах
  console.log(metric.delta);      // изменение с предыдущего значения
  console.log(metric.id);         // уникальный идентификатор метрики
});

Параметры объекта metric:

  • name — имя метрики, в данном случае "FCP".
  • value — числовое значение FCP в миллисекундах.
  • delta — изменение показателя между измерениями.
  • id — уникальный идентификатор, позволяющий отследить событие в аналитике.

Особенности интерпретации

  • FCP не учитывает полноту загрузки страницы, а только момент появления первого видимого контента.
  • Сравнивая FCP между страницами или с разными конфигурациями сайта, важно учитывать разные устройства и сетевые условия.
  • Для SPA (Single Page Application) первый контент может появляться после выполнения JavaScript, что увеличивает FCP. В таких случаях важно оптимизировать критический рендеринг и использовать серверный рендеринг или предварительную загрузку данных.

Практические рекомендации по снижению FCP

  1. Оптимизация критического CSS

    • Встраивание CSS, необходимого для отображения первого контента, напрямую в .
    • Минимизация и отложенная загрузка не критичных стилей.

  2. Уменьшение времени ответа сервера (TTFB)

    • Использование CDN для ускорения доставки контента.
    • Кэширование и оптимизация серверных процессов.

  3. Ленивая загрузка неважных ресурсов

    • Изображения, видео и шрифты, которые не нужны для первого контента, загружаются асинхронно.

  4. Предзагрузка критического контента

    • для шрифтов и крупных изображений первого экрана.

  5. Минимизация блокирующего JavaScript

    • Асинхронная загрузка скриптов и перенос скриптов в конец страницы.

Сбор и аналитика FCP

FCP можно собирать как для реальных пользователей (RUM, Real User Monitoring), так и в лабораторных условиях (Lighthouse, PageSpeed Insights):

  • RUM позволяет видеть FCP для реальных пользователей в разных сетевых условиях и устройствах.
  • Лабораторные тесты удобны для оптимизации до публикации сайта, но дают только средние или контрольные показатели.

Метрика FCP тесно связана с другими Web Vitals: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) и FID (First Input Delay), поэтому её улучшение способствует общей производительности и стабильности страницы.

Оглавление