Lazy loading (отложенная загрузка)
Техника отложенной загрузки изображений и iframe, которые находятся вне видимой области экрана, для ускорения первоначальной загрузки.
Lazy loading — это подход, при котором ресурсы (изображения, видео, iframe) загружаются только тогда, когда пользователь прокручивает страницу до их местоположения. Это сокращает время загрузки first paint и объём передаваемых данных, особенно на страницах с большим количеством медиа.
Нативный lazy loading (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>` с обычным изображением.
Частые вопросы
Обсудим ваш проект?
Расскажите о целях и сайте — предложу формат работы и следующий шаг.