FCP

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

Почему пустой белый экран раздражает сильнее медленной страницы

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

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

Владельцу удобно держать в голове такую последовательность: сначала сервер решает, скоро ли вообще что-то придёт, потом браузер решает, скоро ли человек хоть что-то увидит, и только потом догружается всё остальное. Эти этапы чинят разные люди и разными средствами.

Список причин задержки короткий и удивительно устойчивый: из проекта в проект повторяются одни и те же четыре-пять пунктов. Хорошая новость в том, что большинство из них устраняются без переделки сайта.

Что чаще всего задерживает первую отрисовку

• Скрипты в самом начале страницы, которые браузер обязан выполнить до отрисовки.
• Один общий файл стилей на весь сайт, который целиком грузится ради первого экрана.
• Веб-шрифт, настроенный так, что текст не показывается, пока шрифт не скачан.
• Внешние виджеты — чаты, отзывы, карты, — подключённые в верхней части страницы.
• Длинная пауза на стороне сервера: тогда начинать надо не со стилей, а с ответа — это TTFB.

Как эта цифра выглядит рядом с другими

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

Чего не делатьНе стоит гнаться за полной загрузкой любой ценой: эта цифра красиво выглядит в отчёте, но хуже всех отражает ощущение человека. Сначала первая отрисовка и появление главного блока — LCP, остальное догружается фоном.

Какая цифра считается приемлемой и где её смотреть

Ориентир, к которому привыкли в индустрии, — около полутора-двух секунд у большинства посетителей. Слово «у большинства» здесь важнее самой цифры: один прогон с быстрого рабочего компьютера на проводном интернете говорит только о том, что у вас хороший компьютер.

Честную картину дают массовые данные с реальных устройств за последние недели — их показывают публичные инструменты проверки скорости, и именно на них ориентируются поисковые системы. Отдельно стоит смотреть мобильную аудиторию: там и устройства слабее, и сеть хуже, и уходят быстрее.

Ещё одна привычка, которая экономит нервы: мерить не главную, а те страницы, куда реально приходят люди, — обычно это разделы каталога и посадочные под рекламу, где и трафик дороже, и терпение посетителя короче. Как набор таких показателей связан с деньгами, разобрано в статье про метрики скорости и бизнес, а сам набор описан в термине Core Web Vitals.

FCP: как применяют

Эту метрику смотрят сразу после времени ответа сервера и перед появлением главного блока экрана. Если сервер отвечает быстро, а первая отрисовка запаздывает, виноваты обычно стили, шрифты и внешние скрипты, которые стоят в начале страницы и не дают браузеру рисовать. Практический вывод почти всегда один: всё, что не нужно для первого экрана, переносят на потом.

Частые вопросы

Что такое FCP?

Первая отрисовка контента: момент, когда браузер вывел на экран первый видимый элемент — букву, картинку или иконку — вместо пустого фона.

FCP простыми словами?

Момент, когда человек понимает, что сайт открывается. До него он смотрит в белизну и решает, ждать дальше или вернуться в выдачу.

Чем FCP отличается от LCP?

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

Какой FCP считается хорошим

Общепринятый ориентир — уложиться примерно в полторы-две секунды у большинства посетителей. Смотреть нужно на массовые данные с реальных устройств, а не на один удачный прогон с рабочего компьютера.

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

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

Влияет ли FCP на заявки

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