Швидкість сайту і Core Web Vitals: чому це гроші

Уявіть людину з телефоном у руці. Вона тицьнула ваше посилання, екран білий, секунда, друга – і вона вже повертається в пошук, до наступного результату, де відкрилося одразу. Ви її щойно втратили. Не через ціну, не через товар. Через те, що сторінка думала на дві секунди довше, ніж у сусіда.

Це відчуття Google виміряв і перетворив на цифри – Core Web Vitals. Браузер фіксує, наскільки швидко й плавно сайт відкривається для живої людини, очима якої й міряється все навколо. Нижче розберемо, що це за метрики, як вони чіпляють і ваші гроші, і ваші позиції, що зазвичай гальмує сайт і яка збірка вантажиться справді швидко.

Що таке Core Web Vitals простими словами

Метрик три, і всі вони описують завантаження очима користувача:

• LCP (Largest Contentful Paint) – за скільки часу з’являється найбільший видимий елемент першого екрана: зазвичай головне фото або заголовок. Простіше – момент, коли сторінка виглядає готовою. Орієнтир до 2,5 секунди.
• INP (Interaction to Next Paint) показує, як швидко сайт реагує на дію людини. Клік, тап, ввід у поле. Натиснули, а пів секунди нічого – і сайт відчувається залиплим. Орієнтир до 200 мілісекунд.
• CLS (Cumulative Layout Shift) – стрибки сторінки під час завантаження. Ви всі це бачили: цілишся в кнопку, контент зсунувся, і палець влучає в рекламу. Орієнтир менше 0,1.

Core Web Vitals відповідають на одне просте питання: чи приємно людині користуватися вашим сайтом у перші секунди. Усе інше – це вже техніка вимірювання.

Один нюанс, який часто пропускають. Google рахує ці метрики на реальних користувачах (так звані польові дані), а не лише в лабораторному тесті. Тому «у мене на ноутбуці все літає» нічого не доводить. Рахується середній телефон і той мобільний інтернет, який є у вашої аудиторії.

Чому швидкість впливає на конверсію і SEO

Тут діють два окремі механізми, і обидва б’ють по гаманцю.

Почнемо з конверсії. Кожна зайва секунда очікування – це люди, які пішли, і на мобільному їх найбільше. Але справа не закінчується першим екраном. Повільний кошик, фільтри в каталозі, що думають після кожного кліку, форма, яка завмирає на «Надіслати», – кожна з цих точок зливає тих, хто вже майже залишив заявку. Людина дійшла до кінця і здалася на останньому кроці.

З SEO історія інша. Core Web Vitals – офіційний фактор ранжування Google. Слабкий контент швидкість у топ не виштовхне, але за інших рівних повільний сайт програє швидкому. Є й непрямий вплив: коли людина моментально закриває гальмівну сторінку, це псує поведінкові сигнали, а пошуковий робот легший сайт обходить швидше й повніше. Технічну базу під усім цим ми розклали в матеріалі SEO-фундамент нового сайту.

А тепер додайте рекламу. Ви платите за кожен клік, женете трафік на повільну сторінку – і половина оплачених людей іде ще до того, як вона завантажилась. Гроші за клік списалися, заявки немає. Швидкість тут напряму перетікає у вартість заявки.

Що насправді гальмує сайти

За роки роботи список винуватців майже не змінюється:

1. Важкі зображення. Фото на 4 МБ у форматі, який браузер довго розпаковує. Без стиснення, без сучасних форматів на кшталт WebP чи AVIF, без окремих менших розмірів під мобільний. Це причина номер один.
2. Конструктори й перевантажені теми. Tilda, Wix, роздутий шаблон WordPress – кожен тягне за собою купу чужого коду, який вам не потрібен, але який браузер чесно завантажує. Чому це не лише про швидкість, ми розібрали тут: конструктор чи кастомна розробка.
3. Гори сторонніх скриптів. Чат, віджети, лічильники, дві-три системи аналітики, піксель кожної соцмережі. Кожен такий скрипт додає затримку реакції – той самий INP.
4. Немає кешування й CDN. Сайт щоразу збирається наново, а файли їдуть до користувача з одного далекого сервера замість найближчого до нього.
5. Неоптимізовані шрифти і CSS. Сторінка чекає на стилі та шрифти, перш ніж щось показати, або смикається, коли шрифт нарешті підвантажився. Знайомий CLS.

Жодна з цих причин не вроджена. Усе це наслідки рішень на етапі збірки, а отже їх можна прибрати.

Яка збірка вантажиться по-справжньому швидко

Чарівного плагіна, який усе полагодить, не існує. Швидкість складається з кількох тверезих рішень:

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

Підхід	Типовий LCP на мобільному	Стабільність метрик
Важкий шаблон чи конструктор «з коробки»	4–6 с і вище	плаває, часто червона зона
Кастомна збірка з оптимізацією	до 2,5 с	стабільно зелена зона

Саме тому ми будуємо сайти на легкому стеку зі статичною генерацією: швидкість стає станом за замовчуванням, а не разовим подвигом за тиждень до запуску. Уже маєте сайт, який гальмує? Зносити все й починати з нуля потрібно далеко не завжди – часто рятує редизайн і технічна переробка (реворк). Переносимо контент на швидкий стек, чистимо код, тиснемо зображення й повертаємо метрики в зелену зону.

З чого почати, якщо сайт уже повільний

Кілька кроків, перш ніж кудись бігти:

• Заміряйте на реальному телефоні, а не на потужному ноутбуці з провідним інтернетом. Оце і є досвід вашої аудиторії.
• Прогоніть сайт через PageSpeed Insights. Він покаже і польові, і лабораторні дані, і назве конкретні проблеми.
• Беріться спершу за зображення – це майже завжди найдешевша й найшвидша перемога.
• Перерахуйте сторонні скрипти. Про кожен спитайте: він приносить більше, ніж коштує у швидкості?

Якщо після всього цього метрики далі червоні, проблема, найімовірніше, в самій основі сайту, а не в налаштуваннях. І тоді латати безкінечно виходить дорожче, ніж один раз перебрати фундамент.

Хочете розібратися, чому гальмує саме ваш сайт і що з ним робити, – опишіть проєкт у кілька речень або напишіть нам. Подивимося метрики й прямо скажемо, де вузьке місце і чи окупиться переробка.