<b>Lazy loading ускоряет страницу, пока не начинает ломать CR и LCP</b>

<b>Lazy loading ускоряет страницу, пока не начинает ломать CR и LCP</b>

Lazy loading полезен там, где есть длинная лента, каталог, блог, список карточек. Но если повесить его на hero-картинку, главный баннер, первый экран и критичный CSS — получите красивый вес страницы и просадку конверсии.

Правило простое:
— всё, что выше первого экрана и влияет на первый клик, грузим сразу;
— всё, что ниже и не нужно для первого взгляда, можно откладывать;
— для картинок используйте нативный <code>loading="lazy"</code>, но не на первом крупном изображении.

Частая ошибка — ленивить всё подряд через JS-скрипт. Тогда браузер ждёт IntersectionObserver, потом сам файл, потом очередь на подгрузку. На слабом мобильном устройстве это превращается в лаги, а у пользователя — в пустые блоки и прыгающий layout.

Если нужен баланс:
— hero и логотип без lazy;
— изображения в карточках — lazy;
— iframe, отзывы, карты, видео — lazy почти всегда;
— для важных изображений задайте <code>width</code>/<code>height</code>, чтобы не ловить CLS.

Проверка быстрая: откройте страницу с выключенным кешем и медленным 4G. Если первый экран собирается дольше, чем хочется, lazy loading включён не там.

Ленивая загрузка экономит байты, но не спасает плохую приоритизацию. Сначала грузим то, что продаёт, потом всё остальное.