Lazy loading — паттерн отложенной загрузки изображений и видео: ресурс грузится только когда пользователь дошёл до него скроллом. Экономит трафик и ускоряет первую отрисовку, особенно на длинных страницах с тяжёлыми картинками.
В современных браузерах поддерживается нативно через атрибут loading="lazy" на тегах img и iframe. Не применять к LCP-картинке: главное изображение должно грузиться сразу, иначе LCP падает.
<img>
<img src="hero.jpg" loading="lazy" decoding="async" width="800" height="450"> // Картинка грузится только когда долистали до неё // width/height — обязательны для CLS = 0
Пример из практики
<img src="banner.jpg" loading="lazy" width="800" height="400"> — баннер ниже первого экрана загрузится при скролле.