Нативная ленивая загрузка изображений с помощью HTML

Веб-разработчики постоянно ищут способы оптимизации производительности страниц, и изображения часто представляют наибольшую проблему. Хотя JavaScript-библиотеки доминировали в решениях для ленивой загрузки на протяжении многих лет, современные браузеры теперь поддерживают нативную ленивую загрузку изображений через простой HTML-атрибут. Эта встроенная функциональность устраняет необходимость во внешних зависимостях, обеспечивая при этом надежное улучшение производительности во всех основных браузерах.

В этой статье объясняется, как реализовать нативную ленивую загрузку изображений, используя только HTML, рассматривается поддержка браузерами, лучшие практики и распространенные ошибки, которые могут повлиять на производительность вашего сайта.

Что такое нативная ленивая загрузка изображений?

Нативная ленивая загрузка изображений использует встроенную возможность браузера откладывать загрузку изображений до тех пор, пока они не понадобятся. Вместо загрузки всех изображений при первом рендеринге страницы, браузер вычисляет, когда изображения войдут в область просмотра, и загружает их непосредственно перед тем, как они станут видимыми.

Этот подход отличается от JavaScript-решений тем, что:

• Не требует дополнительного кода или библиотек
• Работает даже при отключенном JavaScript
• Использует оптимизированные алгоритмы браузера для принятия решений о загрузке
• Обеспечивает согласованное поведение на разных устройствах и скоростях соединения

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

Поддержка браузерами нативной ленивой загрузки

Текущая поддержка атрибута loading охватывает все основные браузеры:

• Chrome: 77+ (сентябрь 2019)
• Firefox: 75+ (апрель 2020)
• Safari: 15.4+ (март 2022)
• Edge: 79+ (январь 2020)

Это представляет более 95% глобального использования браузеров, что делает нативную ленивую загрузку надежным выбором для большинства веб-сайтов. Браузеры, которые не поддерживают этот атрибут, просто игнорируют его, загружая изображения обычным способом без какого-либо негативного воздействия.

Атрибут loading: основная реализация

Атрибут loading принимает три значения:

lazy

Откладывает загрузку до тех пор, пока изображение не достигнет вычисленного расстояния от области просмотра:

<img src="product-image.jpg" loading="lazy" alt="Product description" width="400" height="300">

eager

Принуждает к немедленной загрузке независимо от позиции в области просмотра (это поведение по умолчанию):

<img src="hero-image.jpg" loading="eager" alt="Hero section" width="800" height="400">

auto (устарело)

Ранее позволял браузеру принимать решение, но это значение было признано устаревшим и не должно использоваться.

Основные лучшие практики

Всегда включайте размеры

Наиболее критичный аспект реализации нативной ленивой загрузки изображений — это указание размеров изображений. Без атрибутов width и height браузеры не могут зарезервировать место для изображений, что приводит к сдвигам макета:

<!-- Правильная реализация -->
<img src="gallery-1.jpg" loading="lazy" alt="Gallery image" width="300" height="200">

<!-- Альтернатива с inline-стилями -->
<img src="gallery-2.jpg" loading="lazy" alt="Gallery image" style="width: 300px; height: 200px;">

Когда размеры не указаны, изображения по умолчанию имеют размер 0×0 пикселей. Это может заставить браузеры предполагать, что все изображения помещаются в область просмотра, запуская немедленную загрузку всего.

Никогда не применяйте ленивую загрузку к изображениям выше линии сгиба

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

• Изображения-герои
• Логотипы
• Первые несколько изображений товаров
• Любые изображения в первоначальной области просмотра

<!-- Изображения выше линии сгиба - загружать немедленно -->
<img src="hero-banner.jpg" alt="Main banner" width="1200" height="600">
<img src="featured-product.jpg" alt="Featured item" width="400" height="300">

<!-- Изображения ниже линии сгиба - ленивая загрузка -->
<img src="product-4.jpg" loading="lazy" alt="Product 4" width="400" height="300">
<img src="product-5.jpg" loading="lazy" alt="Product 5" width="400" height="300">

Адаптивные изображения с ленивой загрузкой

Для адаптивных изображений, использующих элемент <picture>, добавляйте атрибут loading только к fallback-элементу <img>:

<picture>
  <source media="(min-width: 800px)" srcset="large-image.jpg 1x, large-image-2x.jpg 2x">
  <source media="(min-width: 400px)" srcset="medium-image.jpg 1x, medium-image-2x.jpg 2x">
  <img src="small-image.jpg" loading="lazy" alt="Responsive image" width="400" height="300">
</picture>

Как работают пороговые расстояния браузера

Браузеры не ждут, пока изображения точно окажутся в области просмотра, чтобы начать их загрузку. Вместо этого они используют пороговые расстояния, основанные на скорости соединения:

• 4G-соединения: Изображения загружаются, когда они находятся примерно в 1,250px от области просмотра
• 3G и медленнее: Изображения загружаются, когда они находятся примерно в 2,500px от области просмотра

Эти пороговые значения гарантируют, что изображения завершат загрузку до того, как пользователи прокрутят к ним. В тестировании 97,5% изображений с ленивой загрузкой в 4G-сетях были полностью загружены в течение 10мс после того, как стали видимыми.

Распространенные проблемы реализации

Предотвращение сдвигов макета

Без правильных размеров ленивая загрузка может увеличить Cumulative Layout Shift (CLS). Всегда указывайте точные размеры или используйте CSS для поддержания соотношений сторон:

.lazy-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

Скрытые изображения

Изображения с display: none не будут загружаться лениво в Chrome, Safari и Firefox. Однако изображения, скрытые с помощью opacity: 0 или visibility: hidden, все равно будут загружаться. Тщательно тестируйте вашу реализацию:

<!-- Не будет загружаться лениво -->
<img src="hidden.jpg" loading="lazy" style="display: none;">

<!-- Будет загружаться лениво -->
<img src="hidden.jpg" loading="lazy" style="opacity: 0;">

Изображения в каруселях и слайдерах

Chrome 121 изменил поведение для изображений с горизонтальной прокруткой. Изображения в каруселях теперь используют те же пороговые значения, что и вертикальная прокрутка, что означает, что они загружаются до того, как станут видимыми. Это улучшает пользовательский опыт, но увеличивает использование пропускной способности.

JavaScript-fallback для старых браузеров

Для более широкой поддержки браузерами реализуйте подход прогрессивного улучшения:

<!-- Ленивая загрузка с fallback -->
<img data-src="image.jpg" loading="lazy" alt="Description" width="400" height="300" class="lazy-fallback">

<script>
if ('loading' in HTMLImageElement.prototype) {
  // Нативная ленивая загрузка поддерживается
  const images = document.querySelectorAll('img[loading="lazy"]');
  images.forEach(img => {
    img.src = img.dataset.src;
  });
} else {
  // Загрузить fallback-библиотеку
  const script = document.createElement('script');
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
  document.body.appendChild(script);
}
</script>

Влияние на производительность и метрики

Реализация нативной ленивой загрузки изображений обычно обеспечивает:

• 20-50% сокращение времени первоначальной загрузки страницы
• 30-60% уменьшение использования пропускной способности
• Улучшенные показатели Core Web Vitals
• Лучший пользовательский опыт при медленных соединениях

Мониторьте вашу реализацию с помощью инструментов разработчика браузера и сервисов мониторинга производительности, таких как PageSpeed Insights или WebPageTest.

Тестирование вашей реализации

Инструменты разработчика браузера

Используйте Chrome DevTools для проверки ленивой загрузки:

1. Откройте DevTools (F12)
2. Перейдите на вкладку Network
3. Отфильтруйте по “Img”
4. Перезагрузите страницу и медленно прокрутите
5. Наблюдайте, как изображения загружаются при приближении к области просмотра

Ограничение сети

Тестируйте разные скорости соединения:

1. В DevTools перейдите на вкладку Network
2. Выберите “Slow 3G” или “Fast 3G” из выпадающего списка ограничений
3. Наблюдайте, как изменяются пороговые значения загрузки

Крайние случаи и ограничения

Поведение при печати

Когда пользователи печатают страницу, все изображения загружаются немедленно независимо от атрибута loading. Это гарантирует, что печатные документы содержат все изображения.

SEO-соображения

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

Фоновые изображения

Атрибут loading работает только с элементами <img> и <iframe>. Для фоновых изображений вам понадобятся JavaScript-решения, использующие Intersection Observer API.

Заключение

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

Ключ к успешной реализации заключается в понимании того, когда использовать ленивую загрузку, всегда указывать размеры изображений и тестировать на разных устройствах и скоростях соединения. С широкой поддержкой браузерами и нулевыми накладными расходами нативная ленивая загрузка должна быть частью набора инструментов оптимизации производительности каждого frontend-разработчика.

Часто задаваемые вопросы