Core Web Vitals: чому швидкість сайту вирішує, чи будуть заявки

Із 2021 року Google вимірює, наскільки швидко і стабільно відчувається сайт, і використовує ці дані як фактор ранжування. Три показники називаються Core Web Vitals.

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

Спершу перевірте свій сайт

Дві хвилини, і замість здогадок будуть цифри.

1. Відкрийте pagespeed.web.dev
2. Введіть адресу сайту
3. Зачекайте близько тридцяти секунд
4. Дивіться на вкладку Мобільні, не Компʼютер

Як читати:

• 0–49 (червоний): треба діяти
• 50–89 (помаранчевий): є куди рости
• 90–100 (зелений): добре

Для порівняння: цей сайт набирає 99 балів на мобільному. Можете перевірити самі.

Що означають три показники

LCP — коли видно основний контент

Largest Contentful Paint вимірює, скільки часу минає до завантаження найбільшого видимого елемента. Зазвичай це картинка або великий заголовок.

Мета: менше 2,5 секунди. Більше 4 секунд — погано.

CLS — чи стрибає верстка при завантаженні

Cumulative Layout Shift вимірює, наскільки елементи змінюють положення, поки сторінка вантажиться.

Знайома ситуація: хочете натиснути на посилання, в цей момент підвантажується картинка вище, все зʼїжджає вниз, і ви потрапляєте не туди.

Мета: менше 0,1.

Найчастіша причина — зображення без заданого розміру.

INP — як швидко сайт реагує на дії

Interaction to Next Paint вимірює затримку між дією користувача і видимою реакцією.

Мета: менше 200 мілісекунд.

Часті причини поганих показників

1. Неоптимізовані зображення

З великим відривом найчастіша причина. Фото прямо з телефона важить чотири-вісім мегабайт. Для сайту те саме зображення потрібне в розмірі близько 200 кілобайт.

Що робити:

• Зменшувати до реально потрібного розміру
• Використовувати сучасний формат: WebP або AVIF
• Задавати ширину і висоту в коді
• Зображення нижче першого екрана вантажити при прокручуванні

2. Забагато скриптів

Кожен плагін, кожен лічильник, кожен чат-віджет вантажить свій код.

Що робити: чистити. Кожен плагін без ясної мети — прибрати.

3. Шрифти із зовнішніх серверів

Шрифти з чужих серверів затримують відображення. Розмістіть їх локально — це і прискорює завантаження, і вирішує юридичну проблему. Детальніше у статті про Impressum і DSGVO.

4. Повільний хостинг

Дешевий хостинг ділить сервер із сотнями інших сайтів. Час відповіді сервера прямо входить у показник LCP.

5. Конструктори сторінок

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

Що реально можна покращити

Швидко і дешево:

• Оптимізувати зображення
• Видалити невикористовувані плагіни
• Розмістити шрифти локально
• Увімкнути кешування

Середні зусилля:

• Змінити хостинг
• Підключити CDN
• Відкласти завантаження скриптів

Тільки з новим сайтом:

• Позбутися коду конструктора
• Виправити архітектурні проблеми

На типовому WordPress-сайті перші чотири заходи часто дають 20–30 балів.

Що швидкість означає на практиці

Хто три секунди дивиться на білу сторінку — повертається в Google і тисне наступний результат. Google фіксує швидке повернення і трактує це як сигнал, що сторінка не підійшла.

Плюс контекст: ваші клієнти дивляться сайт не на оптоволокні, а в потязі, на обʼєкті, в обідню перерву при поганому сигналі.

Зворотне, однак, не діє: якщо сайту в результатах немає взагалі, швидкість тут майже ніколи ні до чого. Це інша проблема з іншими причинами — чому сайт не знаходиться в Google.

Часті запитання

Core Web Vitals справді впливають на позиції? Так, але не головний фактор. Зміст і релевантність важливіші. При зіставних сторінках швидкість стає вирішальною.

У мене десктоп 95, мобільний 40. На що дивитися? На мобільний.

Як часто перевіряти? Після кожної великої зміни і приблизно раз на квартал.

Чому цифри стрибають між замірами? PageSpeed Insights симулює зʼєднання з певним розкидом. Різниця в пʼять-десять балів нормальна.

Чи варто оптимізувати старий сайт? До певної точки. Якщо після оптимізації картинок і чищення плагінів все ще менше 50 — проблема в основі.

Підсумок

Спершу виміряйте. Дві хвилини в PageSpeed Insights скажуть більше за будь-які припущення.

Якщо мобільний показник нижче 50 — починайте з картинок. Далі чищення плагінів і локальні шрифти.

Хочете дізнатися, у чому конкретно проблема вашого сайту — надішліть адресу.