Производительность1 мин чтения
Core Web Vitals: где обычно течёт и как чинить
LCP, CLS и INP — типовые причины просадки и правки, которые двигают полевые данные, а не только лабораторный прогон.
Обновлено:
Статья опубликована только на русском.
Три метрики решают почти всё: LCP, CLS и INP. Ниже — типовые причины и правки. Результат проверяется на полевых данных: локальный прогон Lighthouse не видит ни реальных сетей, ни реальных устройств, и расхождение между лабораторией и полем — норма, а не ошибка замера.
LCP
- Hero‑изображение: AVIF или WebP, явные
widthиheight, приоритетная загрузка. - Вычисления — на сервер, чтобы первый экран не ждал гидратации.
- Шрифт первого экрана — из собственной статики, а не со стороннего домена.
CLS
- Резервировать место под изображения, баннеры и всё, что подгружается позже.
display: swapплюс подобранный по метрикам fallback‑шрифт: без второго сама подмена шрифта и двигает вёрстку.
INP
- Меньше обработчиков и меньше работы внутри каждого; debounce на полях ввода.
- Длинные задачи разбивать, чтобы главный поток успевал ответить на нажатие.
- Сторонние скрипты — самая частая причина плохого INP и самая простая к удалению.