Core Web Vitals на пальцах и как это влияет на продажи

Почему мы об этом пишем

Каждую неделю к нам приходят с запросом:
«Сайт вроде нормальный. Реклама работает. Но позиции в поиске низкие и конверсия упала. Что не так?»

Открываю PageSpeed Insights.
Смотрю три цифры.
Почти всегда - всё в красной зоне.
При этом владелец сайта понятия не имеет что это такое. Разработчик сделал сайт красивым - и всё. Про Core Web Vitals - ни слова.

Эта статья исправляет ситуацию. Объясняю что это, почему важно и что с этим делать. Без единого технического термина.

Начнём с главного: что вообще происходит

Представьте что Google и Яндекс - это инспектор Роспотребнадзора.

Он регулярно заходит в ваш ресторан. Смотрит не на то красиво ли у вас меню и вкусная ли еда. Он смотрит на скорость обслуживания, реакцию персонала и порядок в зале.

Если всё хорошо - ресторан получает высокий рейтинг и оказывается первым в рекомендациях.

Если плохо - рейтинг падает. И клиенты идут к конкурентам.

С сайтами работает ровно та же механика.
Google и Яндекс проверяют каждый сайт по трём параметрам. Называются они Core Web Vitals. И с 2021 года напрямую влияют на позиции в поисковой выдаче.

Давайте разберём каждый из трёх по очереди.

Скорость появления главного контента

Умное название: LCP (Largest Contentful Paint)
Простое название: Как быстро вы видите главное на странице?

Что именно измеряется:
Вы открыли сайт, идёт загрузка, и вот - появляется главный элемент страницы. Это может быть заголовок, большая картинка, видео, или блок с текстом - то что занимает больше всего места на экране.

Время от момента когда вы нажали на ссылку до момента когда этот главный элемент появился - это и есть первый параметр.

Почему это важно для бизнеса:
- Исследования Google показывают: если сайт грузится дольше 3 секунд - 53% мобильных пользователей закрывают вкладку и не возвращаются.
- Они не ждут. Им некогда, у них открыто ещё 10 вкладок с конкурентами.
- И пока ваш сайт грузится - клиент уже читает сайт конкурента.

Аналогия которую легко запомнить:
Это как официант в ресторане. Вы сели за стол, хотите увидеть меню - это и есть «главный контент». Сколько вы готовы ждать?
- 2 минуты: нормально, вы ещё здесь
- 5 минут: начинаете нервничать
- 10 минут: встаёте и уходите в другой ресторан

Именно это и делают посетители сайта. Только решение принимается не за 10 минут - а за 3–5 секунд.

Что считается хорошим результатом:
🟢 До 2,5 секунд - отлично. Google доволен, пользователь тоже.
🟡 От 2,5 до 4 секунд - есть проблема, нужно улучшать.
🔴 Больше 4 секунд - критично. Сайт теряет позиции и клиентов.

Почему сайты медленно грузятся:
Самая частая причина - картинки. Дизайнер или контент-менеджер загружает картинку прямо с телефона или фотоаппарата. Размер - 8-20 мегабайт. Одно фото. На странице таких пять.

Итого: страница весит 60–80 мегабайт. При среднем мобильном интернете - это 10-15 секунд загрузки.

Другие причины: дешёвый медленный хостинг, устаревший движок сайта с десятками лишних плагинов, отсутствие кэширования.

Скорость реакции на действия пользователя

Умное название: INP (Interaction to Next Paint)
Простое название: Как быстро сайт реагирует когда вы что-то делаете?

Что именно измеряется:
Вы нажали кнопку, открыли выпадающее меню, начали писать в форме, кликнули по фильтру в каталоге.

Сколько времени прошло между вашим действием и тем моментом когда сайт отреагировал - что-то изменилось на экране?
Это и есть второй параметр.

Почему это важно:
Есть интересная психология восприятия.
- Если между вашим действием и реакцией системы проходит меньше 200 миллисекунд - человек воспринимает это как мгновенную реакцию. Он даже не замечает задержки.
- Если задержка 200–500 миллисекунд - человек чувствует небольшую паузу. Немного неприятно, но терпимо.
- Если задержка больше 500 миллисекунд - человек думает что сайт завис. Нажимает ещё раз. Потом ещё. Раздражается. И уходит.

Аналогия:
Представьте разговор с живым человеком. Вы задаёте вопрос: «Сколько стоит доставка?»
- Ответил сразу: нормально, разговор продолжается
-Молчал 2 секунды, потом ответил: немного неловко
- Молчал 10 секунд и смотрел на вас пустым взглядом: вы решаете что человек вас не слышит или игнорирует

Ровно так же чувствует себя пользователь когда сайт медленно реагирует.

Что считается хорошим результатом:
🟢 До 200 мс - отлично. Пользователь не замечает задержки.
🟡 От 200 до 500 мс - нужно улучшить. Пауза заметна.
🔴 Больше 500 мс - критично. Сайт воспринимается, как зависший.

Почему сайты медленно реагируют:
Обычно причина - тяжёлые скрипты которые «занимают» процессор браузера. Пока скрипт работает - на нажатия кнопок никто не реагирует.

Представьте что официант в ресторане в этот момент занят переноской тяжёлых ящиков. Вы машете ему рукой - а он не может подойти потому что руки заняты.

Разместите
тендер бесплатно

Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.

Заполнить заявку 13691 тендер
проведено за восемь лет работы нашего сайта.

Стабильность страницы - не прыгает ли она во время загрузки

Умное название: CLS (Cumulative Layout Shift)
Простое название: Не смещается ли содержимое страницы пока вы читаете?

Что именно измеряется:
Это самый «человеческий» из трёх параметров. Каждый хоть раз с этим сталкивался.
Вы читаете текст на сайте, вот уже нашли нужную кнопку, тянете палец чтобы нажать, и в этот момент - страница прыгает. Загрузилась картинка или реклама, сдвинула всё содержимое вниз.

Вы промахнулись, нажали не туда или текст который читали - уехал и вы потеряли место.

CLS - это суммарная величина всех таких смещений за время загрузки страницы.

Почему это раздражает пользователей сильнее всего:
Потому что это неожиданно.
Скорость загрузки - вы ждёте.
Медленная реакция - вы терпите.
Но когда страница прыгает в момент когда вы собираетесь нажать - это застаёт врасплох.

И самое неприятное: из-за прыжка верстки пользователи часто нажимают не на ту кнопку. «Отмена» вместо «Оформить заказ». «Закрыть» вместо «Подписаться».

Для бизнеса — это прямые потери конверсии.

Аналогия:
Представьте книгу в которой страницы сдвигаются пока вы читаете.
Вы дошли до интересного места - и вдруг между строк появилась реклама. Текст уехал вниз. Вы потеряли строчку. Раздражение.

Или другой образ: стол на котором расставлена посуда - и кто-то внезапно подсовывает под ножку книжку. Всё съезжает.

Что считается хорошим результатом:
Этот параметр измеряется не в секундах а в специальных единицах от 0 до 1.

🟢 0-0,1 - отлично. Страница стабильна.
🟡 0,1-0,25 -нужно улучшить. Есть заметные смещения.
🔴 Больше 0,25 - критично. Страница «прыгает» сильно.

Почему страницы прыгают:
Самая частая причина - картинки без указанных размеров. Браузер не знает сколько места зарезервировать под картинку пока она не загрузилась. Когда картинка появляется - она толкает всё содержимое вниз.

Вторая причина - рекламные блоки. Реклама подгружается после основного контента и вставляется в середину страницы. Весь текст ниже - едет вниз.

Как всё это работает вместе

Вот реальный сценарий.
Человек ищет в Яндексе «разработка сайта под ключ». Видит 10 результатов.

Яндекс показал их в том числе с учётом Core Web Vitals каждого сайта. У сайта с хорошими показателями - позиция выше. Даже если контент у конкурента не хуже.

Человек переходит на сайт. 
Если сайт грузится 7 секунд - 53% людей уйдут ещё до того как увидят ваш оффер. Ваши деньги на рекламу сгорели впустую.

Если страница прыгает и пользователь промахнулся мимо кнопки «Оставить заявку» - заявки нет. Хотя человек был готов её оставить.

Если нажатие на кнопку «Рассчитать стоимость» приводит к зависанию на 3 секунды - человек думает что сайт сломан и уходит.

Три параметра. Каждый напрямую влияет на деньги.

Как проверить свой сайт прямо сейчас

Это бесплатно и занимает 2 минуты.

Шаг 1: Откройте pagespeed.web.dev
Шаг 2: Введите адрес своего сайта
Шаг 3: Нажмите «Анализировать»
Шаг 4: Посмотрите на три показателя вверху

Вы увидите светофор: зелёный, жёлтый или красный по каждому параметру. И конкретный список проблем которые нужно исправить.

Важно: проверяйте мобильную версию отдельно. Переключатель - вверху страницы. Мобильный результат важнее потому что именно по нему поисковики оценивают ваш сайт в первую очередь.

Типичные результаты и что с ними делать

Из практики Мастерской Замашных - что чаще всего видим при аудите:

Скорость в красной зоне (LCP > 4 сек):
Причина в 80% случаев - несжатые изображения. Решается за 1–2 дня: сжимаем все картинки, переводим в формат WebP, при необходимости - меняем хостинг на более быстрый.

Реакция в красной зоне (INP > 500 мс):
Обычно причина - тяжёлые сторонние скрипты (виджеты, чаты, пиксели рекламы). Решается оптимизацией загрузки: скрипты которые не нужны сразу - загружаем потом.

Стабильность в красной зоне (CLS > 0,25):
Почти всегда - картинки без размеров или рекламные блоки без зарезервированного места. Решается правкой кода: добавляем явные размеры к каждому изображению.

Среднее время работ по исправлению Core Web Vitals:
- Только изображения: 1-2 дня
- Полная оптимизация скорости: 3-7 дней
- Комплексная работа включая рефакторинг: 2-3 недели

Результат после исправления:
- PageSpeed вырастает с 30-50 до 85-95 баллов
- Позиции в поиске начинают расти через 4-8 недель
- Конверсия улучшается сразу после запуска

Итого: три вещи которые нужно запомнить

1. Core Web Vitals - это три оценки которые Google и Яндекс ставят вашему сайту. Скорость, реакция, стабильность.

2. Плохие оценки = низкие позиции в поиске + плохая конверсия. Хорошие оценки = выше конкурентов + больше заявок.

3. Проверить свой сайт можно бесплатно за 2 минуты на pagespeed.web.dev. Исправить проблемы - реально и не так дорого как кажется.

Хотите чтобы мы проверили ваш сайт?

Мастерская Замашных проводит бесплатный аудит Core Web Vitals.

Мы проверим все три параметра, объясним что именно не так (на человеческом языке, без технических терминов), и дадим конкретный план что исправить и в какой последовательности.

👉 Напишите нам «CWV»: Телеграм или Вконтакте.  

Пришлём результаты аудита за 24 часа.

Наши соц сети

Вконтакте
Telegram
TenChat
Pinterest
Behance