Lazy loading (отложенная загрузка)

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

Кратко

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

Нативный lazy loading (HTML атрибут)

HTML
<img src="image.jpg" alt="описание" loading="lazy">
<iframe src="video.html" loading="lazy"></iframe>

Поддержка браузерами: Chrome 77+, Firefox 75+, Safari 15.4+, Edge 79+. Атрибут `loading="lazy"` не требует дополнительного JavaScript и учитывается Googlebot.

JavaScript-решения (для старых браузеров)

  • lazysizes — популярная библиотека с поддержкой responsive images.
  • Intersection Observer API — нативный API для отслеживания появления элемента в области видимости.
  • lozad.js — лёгкая библиотека (~1.9 KB).

Влияние lazy loading на SEO

Googlebot поддерживает нативный lazy loading и корректно отображает такие изображения. Однако для JavaScript-реализаций важно, чтобы изначальный HTML содержал реальный src (или data-src), и бот мог его увидеть. Второй способ — использовать тег `<noscript>` с обычным изображением.

Не используйте lazy loading для above‑the‑fold (первый экран). Это может отложить загрузку главного изображения и ухудшить LCP. Также всегда указывайте ширину и высоту изображений, чтобы избежать CLS.

Частые вопросы

Да, но потребуется JavaScript. Например, добавляйте класс при появлении в области видимости и меняйте background-image. Не используйте для критичных изображений.
Откройте страницу в Chrome, перейдите на вкладку Network, прокрутите вниз. Изображения должны загружаться только при прокрутке. Также проверьте, что в HTML есть src или data-src с реальным URL.
Google индексирует изображения, если они доступны в DOM. При нативном lazy loading (loading=lazy) и корректной JS‑реализации индексация происходит нормально.
Прямые контакты

Обсудим ваш проект?

Расскажите о целях и сайте — предложу формат работы и следующий шаг.

Lazy loading (отложенная загрузка) — что это такое?