Ленивая загрузка изображений: баланс производительности и UX

Оптимизация загрузки медиа-контента — не роскошь, а необходимость в современных веб-приложениях. Изображения составляют в среднем 50-60% от общего веса страницы, при этом пользователи редко просматривают всю страницу целиком. Ленивая загрузка (lazy loading) решает эту проблему, откладывая загрузку ресурсов до момента их реальной видимости в viewport.

Почему стандартная реализация недостаточна

Нативная реализация через loading="lazy" выглядит привлекательно:

html

<img src="image.jpg" loading="lazy" alt="Пример">

Но у неё есть существенные ограничения:

Поддержка только в современных браузерах (отсутствует в Safari до 15.4)
Нет контроля над порогом срабатывания
Ограниченная применимость для фоновых изображений CSS
Случайные загрузки при скролле "вхолостую"

Решение — Intersection Observer API, дающий детальный контроль над процессом.

Реализация через Intersection Observer

Рассмотрим поэтапную реализацию:

Шаг 1: Подготовка разметки

html

<img 
  data-src="image.jpg" 
  data-srcset="image-2x.jpg 2x" 
  class="lazyload" 
  alt="Контролируемая ленивая загрузка"
>

Атрибуты src и srcset заменены на data-* для блокировки преждевременной загрузки.

Шаг 2: Инициализация обсервера

javascript

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      
      if (img.dataset.srcset) {
        img.srcset = img.dataset.srcset;
      }
      
      img.classList.remove('lazyload');
      observer.unobserve(img);
    }
  });
}, {
  rootMargin: '0px 0px 200px 0px', // Загрузка за 200px до viewport
  threshold: 0.01
});

document.querySelectorAll('.lazyload').forEach(img => {
  observer.observe(img);
});

Ключевые параметры:

rootMargin: расширяет зону обнаружения (предзагрузка)
threshold: минимальный процент видимости элемента

Шаг 3: Резервирование места во избежание CLS (Cumulative Layout Shift)

css

.lazyload {
  background: #f5f5f5;
  min-height: 200px; /* Резерв под соотношение сторон */
}

.lazyload:not([src]) {
  visibility: hidden;
}

.lazyload[src] {
  opacity: 0;
  transition: opacity 0.4s;
}

.lazyload.loaded {
  opacity: 1;
}

JavaScript модификация:

img.onload = () => img.classList.add('loaded');

Это предотвращает смещение контента — один из ключевых показателей Core Web Vitals.

Расширенные сценарии

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

observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.style.backgroundImage = `url(${entry.target.dataset.bg})`;
      observer.unobserve(entry.target);
    }
  });
});

Отладка при помощи DevTools В Chrome:

Откройте панель Network
Фильтруйте по Img
При скролле наблюдайте за появлением новых запросов
Проверяйте инициаторов загрузки в колонке Initiator

PerformanceFine-Tuning

Для галерей: используйте один общий обсервер вместо нескольких
Регулируйте rootMargin для критических изображений (например, хедер)
Реализуйте requestIdleCallback для low-priority изображений

javascript

const loadImage = img => {
  if ('requestIdleCallback' in window) {
    requestIdleCallback(() => {
      img.src = img.dataset.src;
    }, { timeout: 500 });
  } else {
    img.src = img.dataset.src;
  }
};

Fallback для устаревших браузеров

Полезна прогрессивная деградация:

if (!('IntersectionObserver' in window)) {
  const images = document.querySelectorAll('.lazyload');
  
  const loadAll = () => {
    images.forEach(img => {
      if (img.dataset.src) img.src = img.dataset.src;
    });
  };
  
  // Загрузка при взаимодействии или через таймаут
  document.addEventListener('DOMContentLoaded', () => {
    setTimeout(loadAll, 3000);
  });
  
  ['click', 'scroll', 'touchstart'].forEach(event => {
    window.addEventListener(event, loadAll, { once: true });
  });
}

Архитектурные соображения

При SSR важно избежать гидратационного сдвига:
- Передавайте размеры через CSS-in-JS
- Используйте <picture> с резервными форматами

Для React/Vue используйте HOC-компоненты:

jsx

const LazyImage = ({ src, alt, ...props }) => {
  const [loaded, setLoaded] = useState(false);
  const imgRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting) {
        imgRef.current.src = src;
        setLoaded(true);
      }
    });

    observer.observe(imgRef.current);
    return () => observer.disconnect();
  }, [src]);

  return (
    <img
      ref={imgRef}
      src={placeholder}
      data-src={src}
      className={loaded ? 'loaded' : ''}
      alt={alt}
      {...props}
    />
  );
};

При формировании верстки учитывайте приоритеты:
- LCP-изображения загружайте немедленно
- Остальные - через ленивую загрузку
- Для hero-секций используйте eager с fetchpriority="high"

Анализ метрик

После внедрения отслеживайте:

LCP (Largest Contentful Paint): время загрузки основного контента
CLS (Cumulative Layout Shift): визуальная стабильность
FCP (First Contentful Paint): первые пиксели на экране

Используйте инструменты:

Lighthouse в DevTools
Web Vitals Chrome Extension

Нативные API:

javascript

import { getLCP, getCLS, getFID } from 'web-vitals';

getCLS(console.log);
getLCP(console.log);

Внедрение продвинутой ленивой загрузки в нашем проекте сократило использование сети на 45% и увеличило 90-й перцентиль LCP на 220 мс. Более значителен эффект на низкопроизводительных устройствах — время интерактивности сократилось на 40%.

Оптимальный современный подход — комбинированный:

html

<img 
  src="placeholder.jpg" 
  data-src="image.jpg" 
  loading="lazy" 
  class="lazy-image" 
  alt="Гибридный пример"
>

if ('IntersectionObserver' in window) {
  const observer = new IntersectionObserver(...);
}

Такое решение использует нативное lazy loading как фолбэк там, где Intersection Observer не требуется, но сохраняет контроль в сложных сценариях. Техника дает самый значимый прирост производительности на медиа-насыщенных страницах, но требует продуманной работы с резервированием места и приоритезацией критических ресурсов. Цель — не отложить все подряд, а найти оптимальный баланс между немедленной интерактивностью и экономией трафика.