Core Web Vitals простими словами: чому швидкість сайту = гроші
Людина клікнула на ваш сайт із пошуку, побачила порожній білий екран і через дві секунди повернулася до конкурентів. Ви про це навіть не дізнаєтеся - в аналітиці це просто «не сконвертувалась». А причина була не в ціні і не в товарі. Сайт завантажувався надто довго, і клієнт не дочекався.
Google бачить такі історії мільйонами. І давно навчився їх вимірювати - набором метрик під назвою Core Web Vitals.
Що таке Core Web Vitals
Core Web Vitals - це три показники, якими Google оцінює реальний досвід людини на сторінці. Не «як виглядає дизайн» і не «скільки ключових слів у тексті», а відчуття від взаємодії: швидко чи завантажилось, чи відгукується на кліки, чи не стрибає все під пальцями.
І це офіційний фактор ранжування. Тобто Google прямо враховує ці цифри, коли вирішує, кого показати вище у видачі. Візьміть два сайти зі схожим контентом - той, що швидший і стабільніший, отримає перевагу.
Метрик три:
- LCP - як швидко завантажується головний видимий блок.
- INP - як швидко сторінка реагує на дію.
- CLS - наскільки сильно смикається верстка під час завантаження.
Розберемо кожну по черзі: що вимірює, який поріг вважається хорошим і що з цим робити.
LCP - швидкість завантаження головного елемента
LCP (Largest Contentful Paint) відповідає на просте запитання: за скільки секунд людина бачить основний контент? Зазвичай це найбільший елемент у верхній частині екрана - велика картинка товару, фонове фото або заголовок.
Хороший показник - до 2,5 секунди. Вклалися в це вікно - відвідувач майже не помічає завантаження. Не вклалися - він сидить і дивиться на порожній або наполовину зібраний екран. А далі спрацьовує рефлекс: назад, до наступного результату в пошуку.
Що зазвичай гальмує LCP і як лікувати:
- Важка головна картинка. Стисніть її і переведіть у сучасний формат WebP - вага падає в рази без втрати якості. Картинку з першого екрана завантажуйте пріоритетно, щоб браузер зайнявся нею першою.
- Повільний хостинг. Дешевий перевантажений сервер відповідає по пів секунди на кожен запит. Допомагає нормальний хостинг і CDN - мережа, яка роздає сайт із найближчого до відвідувача сервера.
- Блокуючі скрипти. Зайві бібліотеки і віджети завантажуються до того, як з’явиться контент. Їх потрібно прибрати або відкласти.
INP - швидкість відгуку на дії
INP (Interaction to Next Paint) вимірює, за скільки сторінка відповідає на дію людини: клік по кнопці, тап по меню, введення в поле. У 2024 році ця метрика замінила стару FID і стала суворішою - тепер враховуються всі взаємодії, а не тільки перша.
Хороший показник - до 200 мілісекунд. Це та межа, за якою відгук відчувається миттєвим. Коли INP великий, виходить знайомий біль: натиснув «Купити», а нічого не відбувається. Людина тисне ще раз, ще раз, починає злитися - і закриває вкладку.
Найчастіше INP псує перевантажений JavaScript. Браузер намагається пережувати важкий код і в цей момент не встигає реагувати на кліки. Що робити:
- Зменшити і розбити JavaScript. Великі шматки коду дроблять на частини, щоб браузер обробляв їх порціями і залишався чуйним.
- Прибрати зайві сторонні скрипти. Кожен чат-віджет, піксель аналітики і лічильник додає навантаження. Залишіть тільки те, що реально працює на бізнес.
CLS - стабільність верстки
CLS (Cumulative Layout Shift) показує, наскільки стрибає верстка під час завантаження. Знайома ситуація: ви читаєте текст, підвантажилася картинка або банер зверху - і весь вміст стрибком їде вниз. Або ви цілитеся в кнопку, в останній момент над нею з’являється реклама, і палець потрапляє не туди.
Хороший показник - до 0,1. Що ближче до нуля, то спокійніше поводиться сторінка. Високий CLS - це промахи по кнопках, випадкові кліки по рекламі і загальне відчуття, що сайт зроблено абияк.
Лікується це акуратністю при верстці:
- Задавати розміри заздалегідь. Для кожної картинки і відео пропишіть ширину і висоту. Тоді браузер одразу резервує місце, і контент не стрибає, коли медіа довантажиться.
- Бронювати місце під банери і рекламу. Якщо на сторінці буде реклама, під неї заздалегідь виділяють порожній блок потрібного розміру.
- Акуратно підключати шрифти. Неправильно завантажений шрифт перемальовує текст на льоту і зсуває сусідні блоки. Це налаштовується на рівні завантаження.
Чому це про гроші, а не тільки про SEO
Легко вирішити, що Core Web Vitals - турбота сеошників. Насправді ці цифри б’ють по виручці з двох сторін одразу.
Перша сторона - позиції. Повільний і смикливий сайт Google ранжує нижче. Нижча позиція - менше переходів із пошуку, менше переходів - менше заявок. Ця арифметика працює щодня, навіть якщо ви її не бачите.
Друга сторона - конверсія. Припустимо, людина все ж дійшла до сайту. Але якщо LCP великий, вона йде, не дочекавшись завантаження. Якщо INP великий, не може нормально натиснути на кнопку. Якщо CLS високий, промахується і злиться. На кожному з цих кроків частина людей відвалюється - і це вже не про пошук, а про те, скільки з тих, хто прийшов, реально залишать заявку.
Виходить подвійний удар. Спочатку повільний сайт приводить менше людей, бо стоїть нижче у видачі. Потім втрачає частину з тих небагатьох, хто дійшов. Швидкість - це не технічна прискіпливість, вона напряму пов’язана з грошима.
Як виміряти і з чого почати
Хороша новина: перевірити свої цифри можна безкоштовно і за пару хвилин.
- PageSpeed Insights від Google - вставляєте адресу сторінки і отримуєте оцінку всіх трьох метрик. Інструмент показує і лабораторні дані (тест в ідеальних умовах), і польові - реальну статистику від живих користувачів Chrome.
- Search Console - в особистому кабінеті сайту є окремий звіт Core Web Vitals. Він групує сторінки за проблемами і показує динаміку в часі.
- Аудит на seonerve.com - секція Performance на базі Lighthouse дає оцінку швидкості разом із рештою SEO-чеклиста, в одному зрозумілому звіті.
З чого почати на практиці: проженіть головну і пару ключових сторінок через PageSpeed Insights. Червоні і жовті метрики - це ваш список завдань. Зазвичай найшвидший виграш дає робота з картинками першого екрана: одна важка фотографія часто і є причиною повільного LCP.
Перевірте швидкість свого сайту на seonerve.com - аудит покаже, які з трьох метрик у зоні ризику і що чинити першим. А якщо розбиратися з оптимізацією ніколи або незрозуміло, з чого підступитися - ми прискоримо сайт за вас. Приведемо Core Web Vitals у зелену зону, щоб відвідувачі не йшли з порожнього екрана, а ставали клієнтами.