First Contentful Paint (FCP): как ускорить

First Contentful Paint (FCP) — это момент, когда на экране появляется первый контент страницы: текст, картинка, фон или svg. До этой отметки посетитель смотрит на пустое поле. В Lighthouse и PageSpeed Insights хороший FCP — до 1,8 секунды. Дольше трёх секунд метрика уже слабая.

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

Что мешает первой отрисовке

Браузер рисует контент только после трёх вещей: сервер отдал HTML, стили первого экрана применились, текст или картинка не ждут чужой файл. Любая задержка на этом отрезке двигает FCP.

• 01Долгий ответ сервера. Пока HTML не пришёл, рисовать нечего.
• 02Пустой HTML, в котором текст появляется только после JavaScript.
• 03Тяжёлые CSS и скрипты в начале страницы: браузер останавливает отрисовку, пока их не прочитает.
• 04Шрифт, который скрывает буквы, пока файл не скачается.
• 05Картинка первого экрана тяжёлая или помечена ленивой загрузкой.
• 06Цепочка редиректов до финального адреса.

Как ускорить FCP

1. Отдайте HTML сразу. Кэш готовой страницы, короткий ответ сервера, один переход на https без лишних редиректов. Первый байт документа — старт отсчёта, и его держат близко к посетителю.

2. Положите первый экран в HTML. Заголовок, первый абзац и картинка героя приходят в документе, а не дорисовываются скриптом. Если экран пустой, пока не выполнится бандл, FCP ждёт JavaScript целиком.

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

4. Сдвиньте скрипты после первой отрисовки. Чат, метрика, карты и виджеты первому экрану не нужны. Их подключают с отложенной загрузкой. В начале страницы остаётся только тот код, без которого документ не собрать.

5. Не прячьте текст шрифтом. На первый экран — один файл woff2, предзагрузка этого файла и font-display: swap. Буквы рисуются системным шрифтом сразу и подменяются, когда свой шрифт доехал. Пока браузер ждёт файл и скрывает текст, FCP стоит.

6. Сделайте лёгкой картинку первого экрана. Если первое, что видит человек, — фото, его сжимают и отдают в современном формате. У этой картинки нет loading="lazy": ленивая загрузка нужна кадрам ниже первого экрана. Ленивый герой как раз отодвигает первую отрисовку.

7. Уберите чужие домены из старта. Шрифт, скрипт и пиксель с другого сервера добавляют соединение до того, как на экране что-то появится. То, без чего первый экран живёт, подключают после FCP.

Как проверить, что стало быстрее

Цифру смотрят в PageSpeed Insights, отдельно для телефона и компьютера. После каждой правки сравнивают FCP и блок «устраните ресурсы, блокирующие отрисовку». Если первая отрисовка всё ещё ждёт сервер, дальше уже вопрос ответа HTML, а не картинок внизу страницы.

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