Що 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 секунди, ви вже знаєте, де витік.