Представьте, что ваш сайт — это библиотека, а изображения — тяжёлые энциклопедии. Зачем посетителю тащить все тома сразу, если он читает только первую страницу? Ленивая загрузка (lazy loading) — это нативный механизм HTML, который загружает изображения только тогда, когда они вот-вот появятся в области видимости. Это не просто модный приём, а реальный способ ускорить загрузку страницы, снизить потребление трафика и улучшить пользовательский опыт без единой строчки JavaScript.
Что такое нативная ленивая загрузка?
Долгое время для отложенной загрузки изображений требовались JavaScript-библиотеки вроде LazySizes или Intersection Observer API. Но с 2020 года большинство современных браузеров поддерживают нативный lazy loading через простой HTML-атрибут loading="lazy". Браузер сам решает, когда подгружать ресурс, основываясь на расстоянии до viewport (области видимости).
Важно: Нативный lazy loading работает не только с <img>, но и с <iframe>. Для изображений в теге <picture> атрибут нужно добавлять к вложенному <img>.
Как это работает технически?
Когда браузер видит атрибут loading="lazy", он не загружает изображение сразу. Вместо этого он назначает его «ленивым» кандидатом и начинает отслеживать прокрутку. Как только расстояние между изображением и областью видимости достигает порогового значения (обычно рассчитывается на основе скорости соединения), начинается загрузка.
Базовая реализация
Всё, что нужно — добавить один атрибут:
<img src="photo.jpg" alt="Описание" loading="lazy">Для изображений, которые должны загружаться немедленно (например, в шапке сайта), используйте loading="eager" (значение по умолчанию).
Почему это важно для производительности?
- Сокращение времени загрузки страницы (LCP): Браузер не блокирует рендеринг, ожидая загрузки всех картинок.
- Экономия трафика: Пользователь на мобильном устройстве не скачивает то, что не видит.
- Улучшение Core Web Vitals: Прямое влияние на метрики Largest Contentful Paint и Cumulative Layout Shift.
- Снижение нагрузки на сервер: Меньше одновременных запросов при первом посещении.
Продвинутые техники и нюансы
1. Сохранение места с width и height
Чтобы избежать скачков макета (layout shift), всегда указывайте размеры:
<img src="image.jpg" width="800" height="600" loading="lazy" alt="...">Совет: Используйте CSS-свойство aspect-ratio вместе с width и height для более гибкого контроля пропорций.
2. Lazy loading для фоновых изображений
Нативный lazy loading не работает с CSS-свойством background-image. Для фонов можно использовать:
- Тег
<img>с позиционированием - JavaScript с Intersection Observer
- Атрибут
loading="lazy"для скрытого<img>, который позже становится фоном
3. Fallback для старых браузеров
Браузеры, которые не поддерживают атрибут, просто проигнорируют его и загрузят изображение сразу. Для более тонкого контроля можно комбинировать с Intersection Observer:
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" class="lazy">
<script>
if ('loading' in HTMLImageElement.prototype) {
// Браузер поддерживает нативный lazy loading
const lazyImages = document.querySelectorAll('img.lazy');
lazyImages.forEach(img => {
img.src = img.dataset.src;
});
} else {
// Подключаем полифил
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lozad.js/1.16.0/lozad.min.js';
document.body.appendChild(script);
}
</script>Ограничения и подводные камни
- Не работает с изображениями, скрытыми CSS: Если изображение изначально скрыто через
display: none, браузер может никогда его не загрузить. - Влияние на SEO: Поисковые боты могут не прокручивать страницу, поэтому для ключевых изображений используйте
loading="eager". - Порог загрузки: Разные браузеры используют разные алгоритмы определения «расстояния до viewport».
FAQ: Часто задаваемые вопросы
Влияет ли lazy loading на SEO?
При правильном использовании — нет. Google рекомендует lazy loading для изображений ниже сгиба (below the fold). Главное — не ленить загружать ключевые изображения и всегда заполнять alt-атрибуты.
Нужно ли указывать width и height?
Да, это обязательно для предотвращения layout shift. Современные браузеры используют эти атрибуты для резервирования места.
Работает ли с responsive images (srcset)?
Да, полностью совместимо. Добавляйте loading="lazy" к тегу <img> внутри <picture> или с атрибутом srcset.
Можно ли использовать для всех изображений?
Нет. Изображения в шапке, герои-баннеры, важные для контекста картинки должны загружаться сразу (loading="eager").
Поддерживается ли в Safari?
Да, с версии 15.4 (2022 год). В более старых версиях можно использовать полифил.