First Contentful Paint

First Contentful Paint (FCP) — это метрика производительности веб-страницы, которая измеряет время от начала загрузки страницы до момента, когда браузер впервые отрисовывает любой визуально различимый контент. Под «контентом» подразумеваются текстовые элементы, изображения, SVG и элементы canvas. FCP не учитывает фоновую графику, которая не содержит текста или визуальных объектов.

FCP является критически важной метрикой, так как она напрямую отражает восприятие скорости загрузки пользователем: чем быстрее появляется первый контент, тем быстрее пользователь понимает, что страница загружается.

Как Lighthouse измеряет FCP

Lighthouse использует API PerformanceObserver и данные Chrome DevTools для определения времени FCP. Алгоритм включает следующие шаги:

  1. Слежение за началом загрузки страницы — фиксируется момент, когда браузер начал запрашивать HTML.
  2. Мониторинг рендеринга DOM — отслеживаются события отрисовки текста, изображений, SVG и canvas.
  3. Запись первого визуального элемента — фиксируется время первого появления визуального элемента.
  4. Агрегация данных — Lighthouse собирает метрику и преобразует её в значение в миллисекундах.

В отчете Lighthouse FCP обычно отображается в секундах и сопровождается цветовой маркировкой:

  • Зеленый: ≤ 1,8 с — быстро
  • Желтый: 1,8–3,0 с — средне
  • Красный: > 3,0 с — медленно

Влияющие факторы на FCP

1. Время ответа сервера Чем дольше сервер отправляет HTML, тем позже браузер сможет начать рендеринг. Оптимизация включает уменьшение времени TTFB (Time to First Byte), кэширование и использование CDN.

2. Размер и приоритет ресурсов Большие CSS и JavaScript-файлы блокируют рендеринг. Важно: FCP измеряет момент появления визуального контента, а не полной загрузки страницы, поэтому критические CSS следует загружать inline, а не через отложенные внешние файлы.

3. Блокирующие рендеринг скрипты Скрипты с атрибутом defer или async помогают ускорить FCP, так как они не блокируют построение DOM и отрисовку контента.

4. Оптимизация изображений Использование форматов WebP или AVIF, сжатие и предварительная загрузка через preload сокращают время появления визуальных элементов.

Методы улучшения FCP

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

Lazy-loading ресурсов Изображения и видео, не входящие в viewport при первой загрузке, следует загружать с отложенной загрузкой. Это снижает конкуренцию за ресурсы и ускоряет FCP.

Оптимизация шрифтов Шрифты могут блокировать отрисовку текста. Использование font-display: swap позволяет сначала отрисовать fallback-шрифт, после чего происходит замена на кастомный шрифт без задержки FCP.

Минимизация блокирующих скриптов Скрипты, влияющие на рендеринг, следует переносить в конец body или использовать атрибут defer.

Практическое использование в Lighthouse

Lighthouse автоматически вычисляет FCP при запуске аудита производительности. Основные возможности:

  • График FCP отображает, когда браузер впервые отрисовал контент.
  • Диаграммы waterfall показывают, какие ресурсы задерживают FCP.
  • Советы по оптимизации: Lighthouse рекомендует критические CSS, оптимизацию изображений, минимизацию JavaScript.

Пример конфигурации для запуска Lighthouse через Node.js:

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {logLevel: 'info', output: 'html', port: chrome.port};
  const runnerResult = await lighthouse('https://example.com', options);

  console.log('First Contentful Paint:', runnerResult.lhr.audits['first-contentful-paint'].displayValue);

  await chrome.kill();
})();

Это позволяет интегрировать измерение FCP в процессы CI/CD и отслеживать производительность страниц автоматически.

Ключевые моменты

  • FCP оценивает момент появления первого визуально различимого контента, а не полную загрузку страницы.
  • Основные факторы задержки FCP: время ответа сервера, блокирующие CSS и JS, не оптимизированные ресурсы.
  • Методы ускорения FCP включают: критический CSS, lazy-loading, оптимизацию шрифтов, defer/async для скриптов.
  • Lighthouse предоставляет визуальный и числовой анализ FCP, включая рекомендации для улучшения.

Хотите, я могу продолжить и подробно разобрать связь FCP с другими метриками Web Vitals и их совместное использование в Lighthouse? Это углубит понимание, как FCP влияет на общую производительность.

Оглавление