Core Web Vitals: що це і як пришвидшити сайт

Швидкість сайту — це не лише питання зручності. Вона впливає на те, чи залишиться людина на сторінці, чи купить, чи повернеться. Google узагальнив досвід користувача у наборі метрик Core Web Vitals.

Три метрики

LCP: швидкість появи головного

LCP вимірює, скільки минає часу до відображення найбільшого елемента в зоні видимості: зазвичай головного зображення чи заголовка. Добре: до 2,5 секунди.

INP: реакція на дії

INP показує, як швидко сторінка відповідає на кліки, торкання й натискання клавіш. Він замінив FID у березні 2024 року. Добре: до 200 мс.

CLS: стабільність верстки

CLS підсумовує «стрибки» елементів під час завантаження. Добре: не більше 0,1.

Як виміряти

• PageSpeed Insights показує польові дані (якщо трафіку достатньо) і лабораторний аналіз із порадами.
• Search Console групує сторінки, що потребують покращення.
• Lighthouse у браузері зручний для налагодження під час розробки.

Дивіться передусім на мобільні показники, бо саме з телефонів приходить більшість відвідувачів.

Як покращити LCP

1. Стисніть головне зображення й віддавайте сучасні формати (WebP, AVIF) у потрібному розмірі.
2. Завантажуйте головне зображення з вищим пріоритетом і не відкладайте його «ліниво».
3. Скоротіть час відповіді сервера: використовуйте CDN і кешування.
4. Приберіть із критичного шляху скрипти та стилі, що блокують відображення.
5. Підключайте шрифти наперед і з розумною стратегією підміни.

Як покращити INP

• Розбивайте довгі задачі JavaScript на менші.
• Відкладайте скрипти, які не потрібні одразу.
• Обмежуйте сторонні віджети: чати, пікселі, рекламу.
• Віддавайте перевагу простим інтерфейсним рішенням, а не важким бібліотекам.

Як покращити CLS

• Задавайте width і height для зображень і відео.
• Резервуйте місце під банери та вставки.
• Не додавайте контент над тим, що вже показано.
• Налаштуйте завантаження шрифтів так, щоб заміна не зсувала текст.

Найпростіший шлях до швидкості

Більшість проблем виникає від зайвого коду. Сайти, які віддають готовий HTML із мінімумом JavaScript (як це роблять сучасні статичні фреймворки), починають із високих показників. Про вибір технологій читайте в порівнянні Astro, Next.js і WordPress.

Підсумок

Не женіться за ідеальними 100 балами. Вимірюйте реальні показники, виправляйте найбільші проблеми й перевіряйте результат. Хороший результат у Core Web Vitals — це поєднання легкої сторінки, оптимізованих зображень і акуратного JavaScript.