Как сделать lazy loading для картинок на сайте

Полезное

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

Зачем использовать lazy loading

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

Сокращает объём передаваемых данных при первом открытии страницы
Ускоряет метрику LCP (Largest Contentful Paint) — один из ключевых Core Web Vitals
Снижает количество HTTP-запросов при первой загрузке
Экономит трафик пользователей на мобильных устройствах
Уменьшает нагрузку на хостинг и CDN

Метрика
Без lazy loading
С lazy loading

Время первой загрузки (среднее)
3,5–6 сек
1,5–2,5 сек

Объём загружаемых данных
100% ресурсов страницы
30–50% ресурсов при открытии

Показатель отказов (bounce rate)
повышается на 32% при задержке >3 сек
снижается за счёт быстрого рендера

Нативный lazy loading через атрибут loading

Самый простой способ реализации — использование встроенного HTML-атрибута loading="lazy". Он поддерживается всеми современными браузерами без подключения дополнительных библиотек.

Пример кода:

Атрибут loading="lazy" поддерживается в Chrome 76+, Firefox 75+, Edge 79+, Safari 15.4+ — это покрывает более 93% пользователей по данным 2025–2026 года.

lazy — изображение загружается при приближении к зоне видимости
eager — изображение загружается немедленно (поведение по умолчанию)
auto — браузер сам решает стратегию загрузки

Важно всегда указывать атрибуты width и height, чтобы браузер резервировал место под изображение и избегал скачков контента (CLS — Cumulative Layout Shift).

Lazy loading через Intersection Observer API

Для более тонкого контроля над поведением ленивой загрузки применяется JavaScript API — Intersection Observer. Он позволяет задавать отступы до момента загрузки, работать с фоновыми изображениями CSS и управлять логикой вручную.

Базовый пример реализации:

const images = document.querySelectorAll('img');

images.forEach(img => observer.observe(img));

В HTML изображения размечаются следующим образом:

Параметры Intersection Observer

Параметр
Описание
Рекомендуемое значение

rootMargin
Отступ до границы viewport, при котором начинается загрузка
100px–300px

threshold
Процент видимости элемента для срабатывания
0 (любое появление)

root
Контейнер для наблюдения (по умолчанию — весь viewport)
null

Lazy loading для фоновых изображений CSS

Нативный атрибут loading не работает с фоновыми изображениями, заданными через CSS-свойство background-image. Для них необходимо использовать JavaScript.

Подход с классом-триггером:

/* CSS */
.lazy-bg {
background-image: none;
}
.lazy-bg.loaded {
background-image: url('bg-photo.jpg');
}

// JavaScript
const bgElements = document.querySelectorAll('.lazy-bg');

const bgObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('loaded');
bgObserver.unobserve(entry.target);
}
});
});

bgElements.forEach(el => bgObserver.observe(el));

Готовые библиотеки для lazy loading

Если нужна поддержка устаревших браузеров или расширенный функционал, можно использовать проверенные библиотеки:

Библиотека
Размер (минифицированный)
Особенности

lazysizes
~3,4 КБ
Без зависимостей, поддержка srcset, iframe, video

lozad.js
~1 КБ
На основе Intersection Observer, минималистичная

vanilla-lazyload
~7 КБ
Поддержка фоновых изображений, video, iframe

yall.js
~1,4 КБ
Поддержка CSS-переменных, анимаций

Lazy loading в WordPress и CMS

Начиная с WordPress 5.5 (2020), атрибут loading="lazy" добавляется к изображениям автоматически через функцию wp_lazy_loading_enabled. В 2026 году это поведение остаётся стандартным для всех новых установок.

Плагин Smush — lazy loading + сжатие изображений
Плагин WP Rocket — комплексная оптимизация с поддержкой lazy loading для фонов
Плагин a3 Lazy Load — расширенные настройки отступов и плейсхолдеров
В Shopify и Webflow lazy loading включён по умолчанию для изображений через платформенные оптимизации

Типичные ошибки при реализации

Наиболее распространённая ошибка — применение lazy loading к изображениям, которые находятся в верхней части страницы (above the fold). Это ухудшает LCP и снижает оценку в Google PageSpeed Insights.

Ошибка 1: Применение loading="lazy" к логотипу, баннеру или первому экрану — замедляет LCP
Ошибка 2: Отсутствие атрибутов width и height — вызывает CLS (смещение контента)
Ошибка 3: Использование слишком маленького значения rootMargin — изображение загружается прямо при попадании в экран, без упреждения
Ошибка 4: Подключение тяжёлых библиотек, когда достаточно нативного атрибута
Ошибка 5: Отсутствие placeholder-изображения или блюра — пользователь видит пустое место

Техника LQIP — Low Quality Image Placeholder

Для улучшения пользовательского опыта при lazy loading применяют технику LQIP: вместо пустого места показывается размытая миниатюра изображения (обычно 20–40 пикселей шириной, закодированная в base64), которая заменяется оригиналом после загрузки.

Использование LQIP совместно с Intersection Observer — оптимальное решение для сайтов с большим количеством изображений (интернет-магазины, фотогалереи, блоги), так как снижает воспринимаемое время загрузки без ущерба для UX.

Проверка корректности работы lazy loading

После реализации необходимо убедиться в корректной работе. Для этого используют:

Chrome DevTools → Network → Images — фильтрация запросов к изображениям при прокрутке
Google PageSpeed Insights — проверка метрик LCP, CLS, рекомендации по оптимизации
Lighthouse (встроен в DevTools) — аудит производительности страницы
WebPageTest.org — визуализация загрузки ресурсов на водопадной диаграмме