Привет! Роман Межевов на связи. Вы наверняка видели в Google Search Console эти пугающие красные полоски — Core Web Vitals. Или, что хуже, заметили, что позиции сайта стали проседать. Время прочтения этой статьи — 5 минут, которые вернут вашему сайту скорость и расположение поисковых систем.
Представьте: пользователь заходит на сайт, а он дергается, картинки прыгают, а кнопка «купить» не нажимается. Скорее всего, он закроет вкладку через пару секунд. Именно это и отслеживает Google с помощью Core Web Vitals — набора ключевых метрик, определяющих реальный опыт взаимодействия с вашим ресурсом. Игнорировать их — значит добровольно отказываться от трафика.
Давайте по порядку. Раньше был другой набор, но сейчас действует актуальная связка, на которую нужно ориентироваться.
⏱️ LCP (Largest Contentful Paint): скорость загрузки главного контента
Что это: метрика показывает, как быстро загружается самый крупный элемент в области видимости экрана (например, большая картинка, заголовок или баннер).
Цель: зеленый показатель — 2.5 секунды или быстрее.
Почему он красный и что делать:
Чаще всего LCP «портит» одно из трех:
- Медленный сервер. Если ваш хостинг отвечает с задержкой, все будет грузиться долго.
Решение: выберите более производительный хостинг. Иногда помогает простое кэширование на сервере. - Тяжелые и неоптимизированные изображения. Огромные JPEG-файлы — главный враг LCP.
Решение:
- Используйте современные форматы (WebP, AVIF).
- Сжимайте изображения перед загрузкой. Инструменты вроде Squoosh.app бесплатны и эффективны.
- Указывайте ширину и высоту изображений в тегах <img>, чтобы избежать сдвигов макета. - Блокирующий JavaScript и CSS-файлы.
Решение: удалите неиспользуемый код, минифицируйте CSS и JS, используйте атрибут loading="lazy" для изображений ниже области видимости.
Мой опыт: на одном из сайтов LCP был 5.8 секунд. Проблема оказалась в фоновом слайдере, который тянул за собой десяток высококачественных фото. Заменили его на статичную герой-картинку — показатель упал до 1.9 секунд.
🖱️ INP (Interaction to Next Paint): отклик на взаимодействие
Что это: новая метрика, пришедшая на смену FID. Она измеряет, насколько быстро сайт реагирует на действия пользователя: клики, нажатия на клавиатуру, тапы.
Цель: зеленый показатель — менее 200 миллисекунд.
Почему он красный и что делать:
INP — это история про JavaScript.
- «Тяжелые» обработчики событий. Сложная логика, которая выполняется при клике на кнопку.
Решение: разбейте длительные задачи на более мелкие. Используйте setTimeout или requestIdleCallback для отложенного выполнения некритичного кода. - Загрузка большого количества JS в основном потоке.
Решение:
- Используйте стратегию async или defer для загрузки скриптов.
- Перенесите вычисления в Web Worker, если это возможно.
- Уберите неиспользуемые полифиллы и библиотеки. Зачем тянуть целый jQuery для одной простой функции?
Пример из практики: у интернет-магазина была красная метка INP. Виновником оказалась кнопка «добавить в корзину», которая не только отправляла товар в корзину, но и запускала анимацию, обновляла счетчик в хедере и делала запрос к API для рекомендаций. Вынесли все, кроме основного действия, — проблема ушла.
🧱 CLS (Cumulative Layout Shift): совокупный сдвиг макета
Что это: метрика измеряет визуальную стабильность. Проще говоря, она показывает, насколько «прыгает» контент на странице во время загрузки.
Цель: зеленый показатель — менее 0.1.
Почему он красный и что делать:
Чаще всего CLS «съедают» элементы без заданных размеров.
- Изображения и видео без размеров. Браузер не знает, сколько места зарезервировать, и когда картинка наконец загрузится, он вынужден сдвигать контент вниз.
Решение: всегда указывайте width и height в тегах <img> и <video>. В CSS используйте свойство aspect-ratio для поддержания пропорций. - Рекламные баннеры, виджеты и iframe. Они часто подгружаются динамически и могут резко изменить высоту страницы.
Решение: заранее зарезервируйте для них место с помощью CSS-блоков фиксированной высоты. - Динамически добавляемый контент. Например, всплывающее окно или баннер cookie, который встраивается в верхнюю часть страницы.
Решение: выделяйте под такие элементы место в макете заранее, либо добавляйте их в нижней части экрана, где они не будут сдвигать основной контент.
Классическая ошибка: статья с кучей изображений, для которых не заданы размеры. Пользователь пытается кликнуть на ссылку, но в этот момент подгружается картинка, и ссылка «уезжает» вниз. Клик приходится точно на рекламный баннер. Раздражение гарантировано.
План действий, если все красное
Не паникуйте. Действуйте по шагам.
- Диагностика. Откройте Google Search Console → Core Web Vitals. Посмотрите, какие именно страницы имеют наихудшие показатели. Затем проверьте эти URL в PageSpeed Insights. Этот инструмент даст вам детальные подсказки по каждой проблеме.
- Расстановка приоритетов. Начните с самых популярных страниц (главная, ключевые товары, статьи). Исправление даже 10% самых посещаемых страниц даст значимый результат.
- Внедрение. Исправьте ошибки по очереди, начиная с самых простых (например, оптимизация изображений), затем переходите к сложным (оптимизация JavaScript).
- Контроль. После внесения изменений подождите несколько недель и проверьте отчеты снова. Данные в Search Console обновляются не мгновенно.
Помните: Core Web Vitals — это не просто «галочка» для Google. Это прямой путь к повышению конверсии и удержанию пользователей. Быстрый и стабильный сайт нравится всем: и людям, и роботам.
Если этот гайд помог вам разобраться в сложной теме и сэкономил время, поставьте, пожалуйста, лайк. Для меня это лучшая обратная связь и стимул готовить для вас новые полезные материалы. Спасибо, что дочитали.