Lazy loading

Как работает

С 2019 года у HTML есть нативный атрибут loading для тегов <img> и <iframe>:

<img src="/img/product-42.webp" alt="Товар" loading="lazy" width="400" height="300">

loading="lazy" — загрузи, когда пользователь доскроллит близко к картинке. Значение по умолчанию — loading="eager", картинка грузится сразу вместе со страницей. Chrome поддерживает нативно с 2019, Firefox и Safari — с 2020, Edge — с 2020.

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

Для более сложных сценариев (карусели, бесконечный скролл, ленивая загрузка виджетов) используется Intersection Observer API — механизм, позволяющий отслеживать пересечение элемента с областью видимости и запускать любую логику:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

Ключевой нюанс: LCP-элемент нельзя делать lazy. Если главная картинка на первом экране получит loading="lazy", браузер отложит её загрузку — метрика LCP улетит из зелёной зоны почти гарантированно.

Почему важно для SEO

Lazy loading экономит трафик пользователя (не грузятся картинки, которые он не увидит) и разгружает главный поток на этапе первой отрисовки — быстрее LCP, быстрее INP. Для длинных лендингов, статей блога с десятками картинок и товарных каталогов экономия часто исчисляется мегабайтами на страницу.

Google Search Central в документации Web Performance рекомендует lazy loading для всех картинок ниже первого экрана. PageSpeed Insights в разделе «Defer offscreen images» подсказывает, какие картинки на конкретной странице стоит отложить. Для мобильного трафика эффект особенно заметен — там LCP чаще упирается именно в загрузку картинок.

Яндекс тоже уважает loading="lazy" — робот индексирует такие картинки через отдельный проход, отдельного эффекта на индексацию нет.

Частые ошибки

• LCP-картинка (обычно hero-баннер) помечена loading="lazy" — метрика LCP сразу проседает.
• loading="lazy" поставлен на все картинки подряд без разбора — включая те, что видны на первом экране.
• У картинки нет width и height — при подгрузке макет сдвигается, портится CLS.
• Fallback через data-src без Intersection Observer — картинки не грузятся вовсе.
• Iframe с YouTube-видео без loading="lazy" — грузится ~500 КБ JS сразу при загрузке страницы.
• Сторонняя lazy-loading библиотека блокирует главный поток на 200-300 мс — метрики только хуже, чем без неё.

Как проверить

В Chrome DevTools вкладка Network → фильтр img → прокрутите страницу вниз и посмотрите, как картинки подгружаются постепенно. Атрибут виден в Elements → любой <img> → колонка loading. Lighthouse в аудите «Defer offscreen images» подсвечивает картинки, которые стоит отложить.

SEO Crawler при обходе фиксирует наличие атрибута loading у всех картинок и iframe, отдельно подсвечивает случаи с lazy на первом экране и картинки без lazy ниже него. В отчёте это часть блока «Производительность» — с оценкой возможной экономии трафика по сайту.

Вывод

Lazy loading через нативный loading="lazy" — самое простое улучшение производительности, доступное вебмастеру: одна строчка в шаблоне картинки. Единственное правило — не применять к LCP-элементу и всему, что видно на первом экране. Для сложных случаев с каруселями и виджетами используйте Intersection Observer, для простых <img> и <iframe> — нативный атрибут.