Lazy loading

Lazy loading — паттерн отложенной загрузки изображений и видео: ресурс грузится только когда пользователь дошёл до него скроллом. Экономит трафик и ускоряет первую отрисовку, особенно на длинных страницах с тяжёлыми картинками.

В современных браузерах поддерживается нативно через атрибут loading="lazy" на тегах img и iframe. Не применять к LCP-картинке: главное изображение должно грузиться сразу, иначе LCP падает.

<img src="hero.jpg"
     loading="lazy"
     decoding="async"
     width="800" height="450">

// Картинка грузится только когда долистали до неё
// width/height — обязательны для CLS = 0

Главная ловушка нативного lazy loading — пометить им изображение, которое и есть LCP-элемент. Браузер откладывает его загрузку, и метрика проседает на 300–800 мс даже на быстром канале. Правило простое: всё, что попадает в первый экран (hero-баннер, первая картинка статьи), грузится обычным образом или через fetchpriority="high", а loading="lazy" вешается только на то, что ниже линии сгиба. Проверить, какой элемент стал LCP, можно во вкладке Performance в DevTools или в отчёте PageSpeed Insights — он подсвечивает конкретный узел.

Второй частый промах — отсутствие width и height у отложенных картинок: пока изображение не подгрузилось, у браузера нет его размеров, контент прыгает и растёт CLS. Поэтому атрибуты размеров (или aspect-ratio в CSS) обязательны для каждого lazy-img. Старые JS-библиотеки вроде lazysizes сегодня избыточны: нативный loading="lazy" поддерживают все актуальные браузеры, а свой скрипт добавляет лишний вес и риск, что картинки не прогрузятся при выключенном JS — Яндекс и Google такие изображения могут не проиндексировать.