Что LCP в 4 секунды делает с конверсией вашего checkout

Клиент уже решил купить. Положил товар в корзину, достал карту из кошелька, нажал «оформить». А потом смотрит на почти пустой экран четыре секунды.

Эти четыре секунды — ваш Largest Contentful Paint. Это время до появления самого крупного видимого элемента страницы. На checkout это обычно сводка заказа или кнопка оплаты. Пока он не отрисован, клиенту нечем заняться. Только ждать и сомневаться.

Сомнение — вот проблема. Медленный LCP тормозит не только страницу. Он тормозит уже принятое решение о покупке.

Число, которое стоит знать

Google определяет три диапазона для LCP. До 2,5 секунды — хорошо. От 2,5 до 4 секунд — нужны улучшения. Выше 4 секунд — плохо. Ваш checkout на 4 секундах сидит ровно на худшей стороне этой границы.

И это не косметика. Сама Google опубликовала данные: когда время загрузки растёт с 1 до 3 секунд, вероятность ухода пользователя со страницы поднимается на 32%. С 1 до 5 секунд — на 90%. Ваш checkout живёт именно в этой зоне риска.

Akamai в исследовании онлайн-ритейла 2017 года измерила, что задержка всего в 100 миллисекунд снижала конверсию на 7%. Сто миллисекунд. А у вас лишних четыре тысячи.

Почему checkout — худшее место для медлительности

Между медленной страницей каталога и медленным checkout есть разница. В каталоге клиент изучает. Терпения больше, потому что намерение ещё размытое.

На checkout намерение на максимуме, а терпение на минимуме. Клиент уже сделал умственное усилие, решив потратить деньги. Каждая секунда ожидания открывает окно для колебания. Вспоминает, что на самом деле эта вещь ему не нужна. Думает сравнить цены в другом месте. Получает уведомление и уходит.

Вы теряете не любопытного посетителя. Вы теряете продажу, которая уже была вашей.

Что обычно съедает ваши 4 секунды

В большинстве медленных checkout виновник не загадочен. Он предсказуем. Посмотрите на привычный шаблон:

• Сторонние скрипты, блокирующие рендеринг — чат-виджеты, пиксели ремаркетинга, менеджеры тегов, загружаемые синхронно в начале страницы.
• Изображения товара без заданных размеров, без современного формата (AVIF или WebP) и без корректного lazy loading, заставляющие браузер ждать.
• Медленный ответ сервера — высокий Time to First Byte, потому что страница генерируется по запросу без кеша, вместо того чтобы отдаваться предварительно отрисованной.
• Веб-шрифты, блокирующие текст до своей загрузки и оставляющие кнопку оплаты невидимой дольше, чем нужно.
• Избыток JavaScript, который нужно скачать, распарсить и выполнить, прежде чем страница станет пригодной для использования.

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

Как взяться за это всерьёз

Сначала измеряйте на реальных данных пользователей, а не только на своём ноутбуке с оптоволокном. Chrome User Experience Report и Search Console показывают LCP, который испытывают ваши настоящие клиенты, на их телефоне, в их сети. Вот правда, которая имеет значение.

Затем определите конкретный LCP-элемент вашей страницы checkout. DevTools в Chrome точно скажут, какой именно. Не гадайте. Оптимизируйте этот элемент первым, потому что именно он задаёт метрику.

1. Предварительно отрисовывайте или отдавайте checkout с кешем, чтобы опустить Time to First Byte ниже 800 мс.
2. Откладывайте или загружайте асинхронно все сторонние скрипты — пиксель Facebook не должен блокировать кнопку оплаты.
3. Отдавайте критические изображения в AVIF или WebP, с явными размерами и высоким приоритетом для LCP-элемента.
4. Используйте font-display swap, чтобы текст появлялся сразу, не дожидаясь шрифта.
5. Урезайте JavaScript, не нужный для первого рендера, и разбивайте бандл.

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

Подсчёт, который никто не хочет делать

Возьмите свой показатель брошенных корзин. Сопоставьте с данными по LCP из Search Console. Если ваш checkout выше 4 секунд на телефоне, часть потерь — это не возражение по цене и не нехватка доверия. Это просто медлительность.

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

Измерьте свой LCP на этой неделе. Если он на 4 секундах, вы уже знаете, где утечка.