Lazy Loading (Отложенная загрузка)

Lazy loading (отложенная загрузка) -- это техника оптимизации производительности, при которой ресурсы страницы (изображения, видео, iframe, скрипты) загружаются не все сразу при открытии, а только тогда, когда пользователь приближается к ним при прокрутке. Вместо загрузки всех 50 изображений на странице каталога одновременно браузер загружает только те, которые видимы или почти видимы в области просмотра, -- остальные подгружаются по мере скроллинга.

Lazy loading напрямую влияет на ключевые метрики производительности. Сокращается начальное время загрузки страницы, уменьшается объём передаваемых данных (критично для мобильных пользователей с ограниченным трафиком), улучшается показатель Largest Contentful Paint (LCP) и снижается нагрузка на сервер. Для интернет-магазинов с сотнями изображений товаров разница может быть колоссальной: страница, которая без lazy loading весит 15 МБ, с ним загружает изначально лишь 2-3 МБ.

Реализация lazy loading в современной веб-разработке стала проще, чем когда-либо. Нативный HTML-атрибут loading="lazy" поддерживается всеми основными браузерами и не требует JavaScript. Для более тонкого контроля используется Intersection Observer API, который позволяет определить, когда элемент попадает в видимую область. Фреймворки вроде Nuxt и Next.js включают lazy loading изображений по умолчанию. Важный нюанс: изображения, видимые при первой загрузке (above the fold), не должны иметь lazy loading -- это замедлит отображение основного контента.