Швидкість сайту і Core Web Vitals: як прискорити й навіщо

Користувач не пробачає повільний сайт. За даними Google, ймовірність відмови зростає на 32%, коли час завантаження сторінки збільшується з 1 до 3 секунд, і на 90%, коли він доходить до 5 секунд. Швидкість сайту й Core Web Vitals — це вже не «технічна гігієна» для розробників, а прямий чинник конверсії, позицій у пошуку та вартості ліда. У цій статті розбираємо, з чого складаються Core Web Vitals, як виміряти реальну швидкість, що насправді її гальмує і які кроки дають найбільший приріст — з конкретними цифрами та порядком дій.

1. Що таке Core Web Vitals і чому вони важливі для бізнесу

Core Web Vitals (CWV) — це набір метрик Google, які описують реальний досвід користувача на сторінці: швидкість, реакцію на дії та візуальну стабільність. З 2021 року вони офіційно входять у фактори ранжування пошуку, а з березня 2024 метрику FID замінили на INP. Сьогодні актуальні три ключові показники.

• LCP (Largest Contentful Paint) — за скільки секунд відмальовується найбільший видимий елемент (зазвичай головне зображення чи заголовок). Хороший результат — до 2,5 с.
• INP (Interaction to Next Paint) — наскільки швидко сторінка реагує на клік, тап чи введення. Хороший результат — до 200 мс.
• CLS (Cumulative Layout Shift) — наскільки «стрибає» макет під час завантаження. Хороший результат — до 0,1.

Google вважає сторінку такою, що проходить перевірку, лише якщо 75% реальних візитів укладаються в «зелену» зону за всіма трьома метриками. Це принципова деталь: оцінюються не лабораторні цифри, а польові дані живих користувачів.

LCP (завантаження)≤ 2,5 с

INP (реакція)≤ 200 мс

CLS (стабільність)≤ 0,1

2. Як швидкість впливає на конверсію та позиції в пошуку

Швидкість — це не про естетику, а про гроші. Кожна зайва секунда завантаження зменшує кількість людей, які доходять до форми чи кошика. Для B2B-сайту з дорогим лідом це означає, що частина рекламного бюджету згоряє ще до того, як користувач побачив пропозицію.

Орієнтири, які варто тримати в голові, формуючи бізнес-кейс на оптимізацію:

• Перехід LCP із 4 с до 2 с типово піднімає конверсію на 10–20% — це ринкові оцінки за кейсами e-commerce та lead-gen.
• Сайти, що проходять усі три CWV, мають нижчий показник відмов і вищу глибину перегляду — користувач не йде, бо «гальмує».
• Для платного трафіку швидкість впливає на Quality Score у Google Ads: повільна посадкова = вищий CPC за ту саму позицію.

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

3. Чим виміряти швидкість: польові й лабораторні дані

Поширена помилка — дивитися лише на один бал у PageSpeed Insights і робити висновки. Насправді є два типи даних, і їх не можна змішувати.

Лабораторні дані (lab)

Це симуляція в контрольованих умовах: фіксований канал, пристрій, відсутність кешу. Інструменти — Lighthouse, вкладка Performance у Chrome DevTools, WebPageTest. Лабораторні дані добре показують причину проблеми та дозволяють відтворювати тести під час розробки.

Польові дані (field / CrUX)

Це реальні метрики живих користувачів за останні 28 днів із Chrome User Experience Report. Саме вони впливають на ранжування. Джерела — звіт Core Web Vitals у Google Search Console, поле «Discover what your real users are experiencing» у PageSpeed Insights, власний RUM (Real User Monitoring).

Інструмент	Тип даних	Для чого
Google Search Console	польові	побачити, які URL «червоні» по CWV у масштабі сайту
PageSpeed Insights	польові + лаб	швидка перевірка однієї сторінки + рекомендації
Lighthouse / DevTools	лабораторні	діагностика причин під час розробки
WebPageTest	лабораторні	глибокий waterfall-аналіз, тести з різних локацій

Правило: рішення про релізи приймайте за польовими даними, а налагоджуйте — за лабораторними. Якщо в Search Console URL зелений, а Lighthouse показує 70 балів — пріоритет за реальними користувачами.

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

За нашою практикою аудитів, понад 80% проблем зі швидкістю зводяться до кількох повторюваних причин. Ось вони, від найбільш «дорогих» до дрібніших.

• Важкі зображення без оптимізації — JPEG/PNG на кілька мегабайт замість WebP/AVIF. Найчастіша причина поганого LCP.
• Заблокований рендеринг — великі JS- і CSS-файли, які браузер мусить завантажити до показу контенту.
• Сторонні скрипти — чати, віджети, піксели, А/Б-тести. Кожен додає затримку, а разом вони «вбивають» INP.
• Повільний сервер / хостинг — високий TTFB (час до першого байта) через дешевий shared-хостинг або відсутність кешування.
• Відсутність CDN — користувач із Києва тягне файли з американського сервера.
• Layout shift — зображення й рекламні блоки без заданих розмірів, шрифти, що підвантажуються із затримкою.

Неоптимізовані зображення~35%

Важкий JS / CSS~25%

Сторонні скрипти~20%

Сервер / хостинг (TTFB)~12%

Інше (шрифти, CLS)~8%

Висновок практичний: майже половину проблеми часто закривають дві дії — стиснути зображення й прибрати зайвий JavaScript. Це не потребує переписування сайту з нуля.

5. Як прискорити сайт: конкретні кроки за пріоритетом

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

Покращити LCP (швидкість завантаження)

• Конвертувати зображення у WebP/AVIF, задати правильні розміри, увімкнути lazy-loading для всього, крім першого екрана.
• Для головного зображення першого екрана додати fetchpriority="high" і preload.
• Підключити CDN (Cloudflare, BunnyCDN) — критично для української та міжнародної аудиторії.
• Налаштувати кешування на сервері й знизити TTFB; за потреби — перейти на швидший хостинг.

Покращити INP (реакцію на дії)

• Розбити «довгі задачі» JavaScript, відкласти некритичні скрипти через defer / async.
• Аудит сторонніх віджетів: прибрати ті, що не дають цінності; підвантажувати чат і піксели після взаємодії.
• Мінімізувати й деревовидно «очистити» (tree-shaking) бандл фронтенду.

Покращити CLS (візуальну стабільність)

• Задавати атрибути width і height усім зображенням і відео.
• Резервувати місце під рекламу й вбудовані блоки.
• Підключати шрифти з font-display: swap і preload для основного шрифту.

Окрема порада: якщо ваш сайт — це важкий конструктор (умовний Tilda/WordPress із десятком плагінів), іноді дешевше зробити нову швидку посадкову, ніж нескінченно лагодити стару. Кастомний сайт або лендинг у MaxICo коштує від $300 і одразу будується з урахуванням Core Web Vitals.

6. AI та автоматизація моніторингу швидкості

Оптимізувати швидкість один раз недостатньо — вона «деградує» з кожним новим банером, плагіном чи скриптом аналітики. Тому розумніше налаштувати постійний моніторинг, а не ловити просідання вручну раз на квартал.

• Автоматичні алерти — система щодня перевіряє ключові сторінки через API PageSpeed/CrUX і пише в Telegram чи Slack, щойно LCP вийшов за поріг.
• AI-аналітика — модель не просто фіксує падіння, а пояснює ймовірну причину (новий скрипт, важке зображення) і пропонує пріоритет фіксу.
• Регресійні перевірки у CI — швидкість тестується автоматично перед кожним релізом, щоб «важкий» код не потрапив у прод.

Такі сценарії ми будуємо як частину AI-рішень та автоматизації процесів: детермінований моніторинг коштує копійки в підтримці й окуповується одним вчасно спійманим просіданням конверсії. Глибші продуктові AI-інструменти для аналітики й автоматизації ми робимо разом із нашою AI-студією — продуктові AI-рішення MaxICo Labs.

Якщо хочете розібратися, як ще штучний інтелект змінює веб і маркетинг, у нас є добірка матеріалів у блозі MaxICo про AI та веб.

Висновок

Core Web Vitals — це не примха Google, а вимірюваний місток між технічним станом сайту й вашими грошима. Швидкість впливає одночасно на три речі: позиції в органіці, конверсію та вартість платного трафіку. Хороша новина в тому, що більшість проблем типові й закриваються без переписування сайту: оптимізація зображень, прибирання зайвого JavaScript, CDN та контроль layout shift дають основний приріст.

Алгоритм простий: виміряйте польові дані в Search Console, знайдіть «червоні» URL, виправте найбільші причини за пріоритетом і поставте автоматичний моніторинг, щоб швидкість не «поповзла» назад. А далі — масштабуйте трафік на сторінку, яка вже не втрачає клієнтів на завантаженні.

Хочете дізнатися, що гальмує саме ваш сайт? Запишіться на безкоштовну консультацію MaxICo — ми проведемо експрес-аудит Core Web Vitals, покажемо конкретні точки росту й порахуємо, скільки конверсій ви недоотримуєте через швидкість. Напишіть нам на сторінці послуг або на all@maxico.agency — і отримайте план дій без зобов'язань.