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

З 2021 року Google офіційно враховує Core Web Vitals при ранжуванні — це метрики швидкості і зручності що вимірюються в реальних умовах на реальних пристроях користувачів. Сайти що проходять поріг Core Web Vitals отримують невелику перевагу в пошуку.

Але важливіший непрямий вплив: повільний сайт → вищий показник відмов → менше часу на сторінці → гірші поведінкові сигнали → нижчі позиції. Крім того, Google виділяє менший crawl budget повільним сайтам.

Core Web Vitals: три ключові метрики

LCP — Largest Contentful Paint

Час до появи найбільшого видимого елементу (зазвичай головне зображення або заголовок). Показує коли користувач бачить основний контент.

  • Добре: до 2.5 секунди
  • Потребує покращення: 2.5–4 с
  • Погано: більше 4 секунд

Основні причини поганого LCP: великі незастиснуті зображення, повільний сервер, блокуючі ресурси (JS, CSS), відсутність CDN.

INP — Interaction to Next Paint

Час відгуку на взаємодію користувача (клік, тап, введення). Замінив FID з березня 2024.

  • Добре: до 200 мс
  • Потребує покращення: 200–500 мс
  • Погано: більше 500 мс

CLS — Cumulative Layout Shift

Сумарне зміщення елементів під час завантаження. «Стрибки» контенту коли завантажуються зображення або реклама.

  • Добре: до 0.1
  • Потребує покращення: 0.1–0.25
  • Погано: більше 0.25
🔧 Як перевірити

pagespeed.web.dev — введіть URL і отримайте детальний звіт по всіх трьох метриках для мобільної і десктопної версій. Також перевірте Search Console → Core Web Vitals для даних з реальних пристроїв.

Оптимізація зображень — найшвидший виграш

Зображення — головна причина повільного LCP. Декілька правил:

  • WebP формат — на 25–35% менше ніж JPEG при тій самій якості
  • Lazy loadingloading="lazy" для зображень нижче першого екрану
  • Розміри в HTML — завжди вказуйте width і height щоб уникнути CLS
  • Preload LCP зображення — додайте <link rel="preload" as="image"> для головного зображення
  • CDN для зображень — Cloudflare Images або аналог для глобальної доставки

Швидкість сервера і TTFB

TTFB (Time to First Byte) — час до першого байту відповіді сервера. Google вважає хорошим TTFB до 800мс.

  • Кешування — сторінки мають повертатись з кешу, не генеруватись кожен раз
  • Хостинг — VPS або хмарний хостинг значно швидший за shared
  • CDN — Cloudflare безкоштовно зменшує TTFB для відвідувачів з різних країн
  • Бази даних — повільні SQL-запити найчастіша причина поганого TTFB

JavaScript і CSS оптимізація

Браузер не може рендерити сторінку поки завантажуються і виконуються блокуючі ресурси:

  • Перенесіть JS в кінець body або додайте defer / async
  • Виділіть критичний CSS (above-the-fold) і вбудуйте його в head
  • Мінімізуйте і стискайте JS і CSS файли
  • Видаліть невикористаний CSS (Coverage tab в DevTools)
  • Розбийте великий JS на chunks і завантажуйте lazy
⚠ Сторонні скрипти — головний ворог швидкості

Google Analytics, Facebook Pixel, чати, рекламні мережі — кожен сторонній скрипт додає 100–500мс до часу завантаження. Аудит сторонніх скриптів через Lighthouse Network tab — обов'язковий крок.

Шрифти і швидкість

  • Використовуйте font-display: swap — текст видно одразу, шрифт підвантажується
  • Preconnect до fonts.googleapis.com і fonts.gstatic.com
  • Обмежте варіанти шрифтів — тільки ті weights що реально використовуються
  • Розгляньте системні шрифти для критичного тексту (нульовий час завантаження)

Швидкий сайт — швидка індексація

Після покращення швидкості запустіть переіндексацію оновлених сторінок через IndexFast. Google побачить покращення в Core Web Vitals і швидше оновить дані.

Спробувати безкоштовно →

Мобільна оптимізація

Google використовує Mobile-First Indexing — індексує мобільну версію сайту як основну. Тому мобільна швидкість важливіша за десктопну.

  • Перевірте мобільний PageSpeed окремо від десктопного
  • Тестуйте на реальних пристроях, не тільки в DevTools
  • Кнопки мінімум 48x48px для зручного тапу
  • Уникайте горизонтального скролу
  • Попапи не мають перекривати основний контент (штраф за intrusive interstitials)

Чеклист швидкості сайту

  • LCP менше 2.5 секунди на мобільному
  • INP менше 200мс
  • CLS менше 0.1
  • Всі зображення в WebP форматі
  • lazy loading для зображень нижче першого екрану
  • Підключено CDN (Cloudflare або аналог)
  • JS перенесено в кінець або додано defer
  • Кешування на сервері налаштовано
  • TTFB менше 800мс
  • font-display: swap для кастомних шрифтів
  • Аудит сторонніх скриптів проведено