Lazy loading

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

Принципы работы lazy loading

Lazy loading реализуется на уровне браузера или с помощью JavaScript. Основные подходы:

  1. Native lazy loading Современные браузеры поддерживают атрибут loading="lazy" для элементов <img> и <iframe>. Пример:

    <img src="example.jpg" loading="lazy" alt="Пример изображения">
<iframe src="video.html" loading="lazy"></iframe>

    При этом браузер автоматически откладывает загрузку ресурса до момента, когда он появится в видимой области.

  2. JavaScript lazy loading Использование Intersection Observer API для отслеживания появления элемента в viewport:

    const lazyImages = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

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

    Здесь изображение загружается только тогда, когда пользователь прокручивает страницу до него.

Lighthouse и оценка lazy loading

Lighthouse анализирует использование ленивой загрузки для изображений, видео и других медиа-ресурсов. Метрики, на которые ориентируется Lighthouse:

  • Offscreen Images – проверяет наличие изображений, загружаемых вне экрана, которые можно было бы загружать лениво.
  • Efficiently Lazy-Loaded Images – оценивает, корректно ли настроена ленивость для изображений с точки зрения производительности.
  • Time to Interactive – косвенно зависит от lazy loading: отложенная загрузка уменьшает блокировку основного потока и ускоряет интерактивность страницы.

Лучшие практики внедрения

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

  2. Использование placeholder’ов Для элементов, которые загружаются лениво, можно использовать низкокачественные версии изображений или сплошные блоки с фоном. Это предотвращает «скачки» контента при загрузке.

  3. Атрибут loading="lazy" для совместимых браузеров Он снижает зависимость от скриптов и упрощает поддержку. Для старых браузеров можно предусмотреть полифиллы.

  4. Оптимизация Intersection Observer

    • Минимизировать количество наблюдаемых элементов.
    • Использовать rootMargin для загрузки элементов чуть раньше появления в видимой области.
    • Отписываться от наблюдения после загрузки.

  5. Тестирование с Lighthouse

    • Запускать аудит страницы после внедрения lazy loading.
    • Анализировать рекомендации по Offscreen Images.
    • Проверять, что ленивые элементы действительно не блокируют основную загрузку и не ухудшают CLS.

Примеры распространённых ошибок

  • Ленивая загрузка выше сгиба Когда важные элементы лениво загружаются, это увеличивает LCP (Largest Contentful Paint).

  • Неправильное использование Intersection Observer Элемент может никогда не загрузиться, если наблюдение не настроено корректно или rootMargin слишком маленький.

  • Отсутствие поддержки fallback Старые браузеры могут игнорировать loading="lazy". Без полифилла пользователи получают медленную загрузку всех изображений.

  • Скрытые элементы загружаются Если элемент невидим (например, через display: none), а скрипт загружает его лениво, это может увеличить нагрузку на сеть без пользы.

Инструменты и расширения

  • Chrome DevTools: вкладка Performance позволяет визуализировать момент загрузки изображений и оценить эффективность lazy loading.
  • WebPageTest: демонстрирует порядок загрузки ресурсов и дает рекомендации по offscreen images.
  • Lighthouse CI: позволяет автоматизировать проверки на ленивую загрузку в рамках CI/CD.

Lazy loading в связке с корректными аудиторскими инструментами позволяет не просто экономить ресурсы, но и улучшать показатели Core Web Vitals, что напрямую влияет на SEO и пользовательский опыт.

Оглавление