Швидкість = гроші: практичний посібник із Core Web Vitals і доходів

Швидкі сторінки краще конвертують. Без зайвої теорії подивімося, як швидкість (LCP, INP, CLS) перетворюється на продажі
і що варто зробити просто зараз: залишити запас на відмальовку, виокремити критичний CSS, відкласти непотрібний JavaScript,
увімкнути edge-кеш і оптимізувати зображення. Наприкінці - простий чекліст.

1. Три показники, які варто тримати в голові

LCP - момент, коли з’являється головний елемент (велике зображення, заголовок, ціна). Добре - ≤ 2,5 с.

INP - швидкість відгуку на кліки та введення. Добре - ≤ 200 мс.

CLS - стабільність верстки (жодних «стрибків»). Добре - ≤ 0,1.

Що раніше видно головне, то довше людина лишається. Що швидше сторінка відповідає, то менше її кидають. Що менше все смикається, то менше помилкових кліків.

2. Куди дівається час?

• Важкі зображення без указаних розмірів - браузер не знає, скільки місця зарезервувати.
• Пізні таблиці стилів - вміст спершу приходить «без вбрання», а потім стає на місце.
• Ранній і громіздкий JavaScript - багато що може почекати першої відмальовки.
• Шрифти та сторонні віджети - блокують показ.
• Далекий сервер - кожен запит триває довше, ніж мав би.

3. Запас на відмальовку: спершу покажіть головне

Мета - дуже швидко показати серцевину сторінки, а решту доповнити плавно.

1. Потоковий HTML: дати браузеру почати малювати, не чекаючи повної відповіді.
2. Критичний CSS у head: невеликий блок для першого екрана, решта - окремим файлом.
3. Пріоритет для LCP-зображення: явні розміри та пріоритетне завантаження.
4. Шрифти без провалів: показувати резервний шрифт до появи основного.
5. Сторонні скрипти після першого кадру: аналітика та реклама - коли перший екран уже видно.

4. Критичний CSS без болю

Для охайного першого екрана вистачає невеликого набору правил. Тримайте його коротким (близько 10-14 КБ), без дублювання глобальних стилів,
і генеруйте наново, коли змінюється шаблон.

5. JavaScript: пізніше й з розумом

Багато гальм походить саме зі скриптів. Робіть інтерактив на вимогу.

• Вмикайте віджети, коли вони потрапляють у видиму область або після першої дії користувача.
• Розділяйте код: найпотрібніше зараз, решта згодом.
• Завантажуйте скрипти так, щоб вони не блокували початкову відмальовку.

6. Edge-кеш і близькість до користувача

CDN або edge тримає копії поруч із користувачем. Вдале поєднання: HTML у кеші за мовою, валютою й типом пристрою, миттєва відповідь свіжою версією,
яку оновлюють у фоні.

7. Зображення: легкий виграш

• Сучасні формати (AVIF/WebP) і кілька розмірів під різні екрани.
• Не відкладайте головне зображення сторінки; решту - можна.
• Задавайте ширину й висоту (або співвідношення), щоб уникнути стрибків (CLS).
• Завантажуйте галереї поступово, а не все одразу.

8. Чекліст для старту

• Цілі: LCP ≤ 2,5 с; INP ≤ 200 мс; CLS ≤ 0,1.
• Початкова відмальовка: критичний CSS у head, ключове зображення з пріоритетом і заданими розмірами.
• JS: відкладайте все, що можна; вмикайте за видимістю чи дією; розділяйте бандли.
• Edge/CDN: правила кешування для HTML, статики та зображень; версійовані файли з довгим TTL.
• Шрифти: дозволяйте показ резервного; не тягніть зайвих накреслень.
• Вимірюйте на реальному трафіку (RUM) за шаблонами та пристроями, а не лише в лабораторії.

9. Висновок

Швидкість - це здобута увага та неперервані дії. Показуйте головне раніше, відповідайте швидше,
тримайте сторінку стабільною - бізнесові криві підуть слідом. Рухайтеся етапами: зображення, критичний CSS, відкладений JS, edge-кеш.
І перевіряйте вплив на реальний трафік.