Ленивая загрузка

Ленивая загрузка (lazy loading, отложенная загрузка) — это техника, при которой изображения, видео или другой «тяжёлый» контент загружаются не сразу со всей страницей, а только в момент, когда пользователь до них прокручивает. Это ускоряет первое появление страницы и экономит трафик, потому что браузер не тянет то, чего ещё не видно.

Простыми словами: страница не выкладывает перед вами весь товар со склада сразу. Она достаёт его с полки ровно тогда, когда вы дошли взглядом до нужного места.

Что такое ленивая загрузка и зачем она нужна

Представь длинную страницу с полусотней изображений. Без lazy loading браузер пытается загрузить все сразу — и пользователь смотрит на пустой экран, пока всё прогрузится. С отложенной загрузкой сначала появляется только то, что в видимой части экрана, а остальное подгружается постепенно. Результат — более быстрый старт, меньше потребление данных (особенно на мобильных) и меньшая нагрузка на сервер.

Как работает lazy loading

Нативный способ — атрибут loading="lazy" прямо в теге <img>, который поддерживают современные браузеры.
Через JavaScript — скрипт отслеживает, когда элемент приближается к видимой зоне, и тогда подгружает его.
Плейсхолдер — до загрузки на месте картинки часто показывают «заглушку» или размытую миниатюру.

Влияние на скорость и Core Web Vitals

Ленивая загрузка — палка о двух концах для метрик Core Web Vitals. Правильно: она уменьшает объём, который надо загрузить сначала, и улучшает воспринимаемую скорость. Неправильно: если «ленивыми» сделать изображения в самом верху (в первом экране), особенно главное, LCP (крупнейший видимый элемент) может, наоборот, ухудшиться. Поэтому главное правило — верхние, сразу видимые картинки загружают обычно, а lazy применяют к тому, что ниже. Ещё важно задавать размеры изображений, чтобы не «прыгала» вёрстка (CLS).

Пример

Интернет-магазин с длинным каталогом на 60 фото товаров включил loading="lazy" для всех картинок, кроме первого ряда. Страница начала открываться заметно быстрее на мобильных, а мобильный трафик перестал «съедать» лишние мегабайты на изображения, которые пользователь так и не долистал.

Часто путают с…

Сжатие изображений — это уменьшение веса файла; ленивая загрузка — про момент загрузки, а не про размер.
Кеширование — это сохранение уже загруженных ресурсов для повторных визитов; lazy loading управляет первой загрузкой в рамках одного просмотра.

Вопросы и ответы

Что такое ленивая загрузка простыми словами?

Это когда картинки и контент загружаются не все сразу, а постепенно — по мере того как пользователь прокручивает страницу. Так она открывается быстрее.