Core Web Vitals без паники: что реально стоит чинить

Отчёт с красными цифрами выглядит пугающе, но обычно проблемы сводятся к нескольким типичным причинам. Разберём три основные метрики.

LCP — загрузка главного элемента

Показывает, как быстро появляется самый крупный элемент на первом экране: чаще всего это картинка или заголовок.

• сожмите главное изображение и отдавайте его в современном формате;
• не загружайте его лениво (loading="lazy") — для первого экрана это вредно;
• проверьте время ответа сервера: медленный бэкенд тянет вниз всё остальное.

INP — отклик на действия

Насколько быстро страница реагирует на клики и ввод. Главный враг здесь — тяжёлый JavaScript, особенно сторонние скрипты: виджеты, счётчики, чаты.

Начните с инвентаризации: какие скрипты подключены и зачем каждый нужен. Часть обычно можно убрать или загружать позже.

CLS — сдвиги макета

Когда вы собираетесь нажать на кнопку, а она «уезжает» из-за подгрузившегося баннера. Лечится просто:

<img src="photo.webp" width="800" height="450" alt="...">

Указывайте размеры у картинок и резервируйте место под блоки, которые подгружаются позже.

Ориентируйтесь на данные реальных пользователей, а не только на лабораторные замеры: на быстром рабочем ноутбуке почти любой сайт выглядит хорошо.