Что такое lazy loading изображений?

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

Определение lazy loading

Lazy loading (дословно «ленивая загрузка») означает откладывание загрузки ресурсов, не видимых сразу на экране. Применительно к изображениям это означает, что только изображения, находящиеся в видимой области при загрузке страницы (viewport), загружаются немедленно. Остальные изображения загружаются постепенно по мере прокрутки пользователем страницы.

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

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

Существует два основных подхода к реализации lazy loading изображений:

1. Нативный HTML-атрибут loading="lazy"

С 2019 года современные браузеры нативно поддерживают lazy loading через простой HTML-атрибут:

<img src="photo.jpg" alt="Описание" loading="lazy">

Браузер автоматически решает, когда загружать изображение, основываясь на положении прокрутки пользователя. Это рекомендуемый сегодня метод: библиотеки JavaScript не требуются.

2. Intersection Observer API (JavaScript)

До стандартизации нативного атрибута разработчики использовали Intersection Observer API для определения момента входа изображения в viewport и запуска его загрузки в этот момент. Этот подход остаётся полезным для более сложного поведения или анимаций при появлении изображений.

Каковы преимущества lazy loading?

Производительность и время загрузки

Сокращая количество изображений, загружаемых при запуске, lazy loading уменьшает начальный вес страницы и ускоряет её отображение. Метрики производительности, такие как Largest Contentful Paint (LCP) и Time to Interactive (TTI), улучшаются в результате.

Экономия трафика

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

SEO и Core Web Vitals

Google учитывает Core Web Vitals в своём ранжировании. Улучшенный LCP, напрямую зависящий от загрузки изображений, может положительно сказаться на позициях в результатах поиска.

Lazy loading: чего не стоит делать

Lazy loading подходит не для всех изображений. Следует избегать двух распространённых ошибок:

• Никогда не применяйте loading="lazy" к hero-изображениям или изображениям выше линии сгиба — эти изображения видны при загрузке, задержка их отображения ухудшит LCP и пользовательский опыт.
• Не пропускайте атрибуты width и height — без заданных размеров браузер не может зарезервировать место для изображения до его загрузки, что вызывает сдвиги макета, вредящие показателю Cumulative Layout Shift (CLS).

Полезно знать: для изображений, немедленно видимых при загрузке (баннер, hero-изображение, логотип), используйте атрибут loading="eager" или просто пропустите атрибут — это поведение браузера по умолчанию.

Совместимость с браузерами

Lazy loading и хостинг изображений

Когда вы используете сервис хостинга изображений для хранения и распространения визуальных материалов, всегда включайте атрибут loading="lazy" для изображений, не видимых сразу. Сочетание высокопроизводительного хостинга (CDN, автоматическое сжатие) с lazy loading максимизирует скорость отображения страниц.

Полезно знать: качественный сервис хостинга изображений предоставляет стабильные прямые URL для каждого изображения, что упрощает интеграцию lazy loading: достаточно добавить loading="lazy" к тегу <img>, не изменяя исходный URL.