Оптимізація швидкості сайту: Core Web Vitals 2026

Чому швидкість критична

Google використовує Core Web Vitals як фактор ранжування з 2021. Повільний сайт = нижча позиція в пошуку = менше органічного трафіку.

Кожна додаткова секунда завантаження зменшує конверсію в середньому на 7%. Сайт, який завантажується 5с замість 2с, втрачає 21% потенційних клієнтів.

Мобільні користувачі ще менш терплячі: 53% мобільних користувачів закривають сайт, якщо він завантажується довше 3 секунд.

Що таке Core Web Vitals

LCP (Largest Contentful Paint) — час до відображення найбільшого видимого елементу (зазвичай головне зображення або заголовок). Ціль: <2.5 секунди. Поганий: >4с.

INP (Interaction to Next Paint) — час реакції на дію користувача (клік, тап). Замінив FID з 2024. Ціль: <200мс. Поганий: >500мс.

CLS (Cumulative Layout Shift) — наскільки контент стрибає під час завантаження. Ціль: <0.1. Поганий: >0.25.

Перевірити свій сайт: pagespeed.web.dev або lighthouse у Chrome DevTools (F12 → Lighthouse).

Топ-5 проблем у 90% сайтів

За досвідом аудиту 100+ сайтів — найчастіші болі:

• Зображення в JPG/PNG великими розмірами (1000kb замість 80kb у WebP)
• Завантаження JavaScript блокує рендеринг (jQuery, важкий слайдер, аналітика)
• Сторінка не кешується — кожен запит йде до бази даних
• Шрифти Google Fonts завантажуються блокуюче
• Реклама або відео без зарезервованого місця → CLS стрибає

Оптимізація зображень

Формат: WebP (всі сучасні браузери) або AVIF (новіше, краще стиснення, не всі браузери). JPG/PNG — застаріле.

Розмір: робіть рівно той, у якому показуєте. Якщо картинка на сайті 800x600 — не завантажуйте 4000x3000. Використовуйте responsive images (srcset) для різних екранів.

Стиснення: 70-85% якості для JPG/WebP — на око не відрізнити, розмір менше в 3-5 разів.

Lazy load: атрибут loading="lazy" на всіх зображеннях нижче фолду. Завантажуються тільки коли підходять до viewport.

CDN: Cloudflare, Bunny, Imgix — обслуговують зображення з найближчого до клієнта серверу. Зменшує latency на 100-500мс.

JavaScript і CSS

Мінімізація: всі JS і CSS файли стискаються (Terser, esbuild, swc). Зменшення розміру на 30-60%.

Code splitting: розділяйте на чанки. Сторінка про доставку не повинна завантажувати скрипти оформлення замовлення.

Defer і async: некритичний JS (аналітика, чат-боти, реклама) — async або defer. Не блокує рендеринг.

Видаліть jQuery, якщо можна. Vanilla JS або сучасні бібліотеки (Alpine.js, htmx) часто вистачає для типових задач.

CSS: критичний (above-the-fold) інлайн в head, решта — lazy load або preload.

Шрифти

Самохостинг: завантажуйте Google Fonts на ваш сервер замість зовнішнього <link>. Економить 100-300мс на DNS і connect.

font-display: swap — спочатку показуємо системним шрифтом, потім підмінюємо. Не блокує перший рендеринг.

Preload критичних шрифтів через <link rel="preload">.

Subset: завантажуйте тільки потрібні символи (Latin замість Latin+Cyrillic+Greek). У Google Fonts — параметр subset у URL.

Один шрифт замість трьох. Сучасні шрифти (Inter, Manrope, Geist) добре виглядають в будь-якій ситуації.

Серверне кешування

OpenCart: модулі OCDC, Hyperion Cache. Кешує згенеровані HTML сторінок — друге відвідування за <300мс.

WordPress: WP Rocket, W3 Total Cache, LiteSpeed Cache. Те ж саме.

Самописний сайт (Next.js, Nuxt): ISR/SSG для статичних сторінок, edge cache на Cloudflare/Vercel для динаміки.

Redis/Memcached для кешування запитів до БД. Особливо ефективно для каталогів з 5000+ товарів.

OPcache PHP: вмикається в php.ini, прискорює виконання PHP в 2-5 разів.

CDN і географія

Cloudflare Free план: безкоштовний CDN з 250+ edge серверами по світу. Підключається за 10 хвилин (зміна NS).

Бонус Cloudflare: захист від DDoS, кешування статики, мініфікація HTML/CSS/JS на льоту, Brotli стиснення.

Bunny CDN: дешева альтернатива, $0.01 за GB. Не безкоштовно, але дуже швидко.

Якщо аудиторія тільки Україна — серверу теж краще в Україні або найближчих ЄС. Latency 20-50мс замість 100-200мс з США.

Реальні цифри з нашої практики

Що дала оптимізація на реальних клієнтах:

• Магазин Abertime: PageSpeed mobile 35 → 89, LCP 5.2с → 1.8с, конверсія в кошик +18%
• Лендінг калькулятор: PageSpeed 62 → 97, LCP 2.4с → 1.1с, час на сайті +40 секунд
• B2B сайт послуг: 71 → 95, ранжування підросло на 8-15 позицій за 2 місяці
• Інтернет-магазин одягу: WebP конверсія + lazy load → завантаження сторінки 4.1с → 1.4с

Інструменти для тестування

PageSpeed Insights (pagespeed.web.dev) — Google офіційний, дає Core Web Vitals і рекомендації.

WebPageTest (webpagetest.org) — детальний звіт по кожному запиту, водопад завантаження.

GTmetrix (gtmetrix.com) — комбінує PageSpeed і WebPageTest у зручному форматі.

Chrome DevTools Lighthouse — локальний аналіз, можна тестувати закриті сторінки (адмінку).

Calibre, SpeedCurve — платні постійний моніторинг. Алерти при погіршенні.