Lazy loading экономит трафик, но легко ломает конверсию и Core Web Vitals

Lazy loading экономит трафик, но легко ломает конверсию и Core Web Vitals

Lazy loading имеет смысл для картинок ниже первого экрана, длинных лент, галерей, карточек каталога. Там он режет вес страницы и ускоряет загрузку. Но для hero-изображения, логотипа, главного баннера, LCP-блока и элементов над фолдом его ставить нельзя: браузер позже запрашивает ресурс, LCP растёт, а пользователь видит пустоту или сдвиг.

Типовые ошибки:
— ленивят первый видимый блок;
— ставят loading="lazy" на все img подряд;
— не задают width и height, ловят CLS;
— грузят iframe, рекламу и виджеты без порога появления.

Нормальная схема: критичные картинки и шрифты — сразу, всё ниже экрана — lazy. Для JS-ленты лучше useIntersectionObserver с запасом 300-600 px до вьюпорта: контент подгружается до того, как пользователь докрутил. Для медиаконтента полезно отдельно включать placeholder/blur, чтобы место под блок уже было зарезервировано.

Проверка простая: откройте страницу с отключённым кешем, посмотрите waterfall и LCP-элемент. Если главный элемент появляется позже остальных, lazy loading настроен слишком агрессивно. Если после включения lazy трафик снизился, а конверсия и LCP не просели — значит схема работает.