Как сделать 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". Он поддерживается всеми современными браузерами без подключения дополнительных библиотек.

Пример кода:

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

Атрибут 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[data-src]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
}, { rootMargin: '200px' });

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

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

<img data-src="photo.jpg" src="placeholder.jpg" alt="Описание" width="800" height="600">

Параметры 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), которая заменяется оригиналом после загрузки.

<img 
  src="data:image/jpeg;base64,/9j/4AAQSkZJRgAB..." 
  data-src="full-image.jpg"
  alt="Описание"
  class="lazy"
  width="800" 
  height="600"
  style="filter: blur(10px); transition: filter 0.3s;"
>

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

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

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

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