Глубокое изучение встроенной ленивой загрузки изображений и фреймов

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

Узнайте, как правильно использовать эту технологию на вашем сайте, какие есть особенности и преимущества для юзабилити и SEO. Мы также рассмотрим важные аспекты реализации и советы по улучшению взаимодействия с пользователями.

Обновлено: 2025-07-29 20:44:22 Ангелина Писанюкавтор материала

Методы, которые использовались до встроенной ленивой загрузки

До сегодняшнего дня нам приходилось использовать JavaScript, чтобы реализовать ленивую загрузку. Большинство JavaScript-библиотек работает следующим образом:

• Первоначальный ответ HTML на стороне сервера содержит элемент img без атрибута src поэтому браузер не загружает никаких данных. Вместо этого URL-адрес изображения передается с другим. Например, data-src.

HTML

<img data-src="https://tiny.pictures/example1.jpg" alt="...">

• Затем загружается и выполняется библиотека ленивой загрузки.

HTML

<script src="LazyLoadingLibrary.js"></script>
<script>LazyLoadingLibrary.run()</script>

• Библиотека отслеживает поведение пользователя при прокрутке и заставляет браузер загрузить изображение, когда оно вот-вот появится в окне просмотра. Это реализуется путем копирования значения атрибута data-src в ранее пустой атрибут

HTML

<img src="https://tiny.pictures/example1.jpg" data-src="https://tiny.pictures/example1.jpg" alt="...">

Данный способ работает успешно. Но он не идеален. Главная его проблема многоэтапность. Реализация способа состоит из трех этапов:

1. Загрузка первоначального ответа HTML.
2. Загрузка библиотеки.
3. Загрузка файл изображения.

Если использовать данный метод для изображений, расположенных выше сгиба, сайт станет мерцать во время загрузки. Так как первоначально сайт загружается без изображения (после первого или второго шага, в зависимости от того, какой режим использует скрипт – defer или async). И только потом подгружается изображение. Это будет восприниматься пользователями как медленная загрузка.

Кроме этого использование библиотека ленивой загрузки требует дополнительных ресурсов. И как насчет сайтов, которые используют RSS для распространения контента? Если в исходном рендеринге нет изображений, то их не будет и в RSS-версии контента.

Встроенная ленивая загрузка спешит на помощь

В скором времени браузеры на движке Chromium (в том числе и Google Chrome) получат встроенный механизм ленивой загрузки, реализованный в виде нового атрибута loading.

Включаем встроенную ленивую загрузку

Начиная с Google Chrome 75, в браузере можно вручную активировать ленивую загрузку. Для этого:

1. Перейдите по адресу chrome://flags в Chromium или Chrome Canary.
2. Введите в поиск «lazy».
3. Активируйте параметры «Enable lazy image loading» и «Enable lazy frame loading».
4. Перезапустите браузер, нажав кнопку, расположенную в правом нижнем углу экрана.

Параметры встроенной ленивой загрузки в Google Chrome

Чтобы проверить, правильно ли подключена данная функция, откройте консоль Java Script (F12). Должно появиться следующее предупреждение:

[Intervention] Images loaded lazily and replaced with placeholders. Load events are deferred.

Атрибут loading

Элементы img и iframe поддерживают атрибут loading. Атрибут может иметь три значения, которые описаны ниже. Рядом с изображениями вы найдете таблицы, в которых указано время загрузки отдельного ресурса для этой страницы.

Обратите внимание на столбец startTim. В нем указывается время, когда загрузка изображения была отложена после парсинга DOM. Возможно, придется выполнить полную перезагрузку (CTRL + Shift + R) для повторного запуска запросов Range.

Значение auto (или значение unset)

HTML

<img src="auto-cat.jpg" loading="auto" alt="...">
<img src="auto-cat.jpg" alt="...">
<iframe src="https://css-tricks.com/" loading="auto"></iframe>
<iframe src="https://css-tricks.com/"></iframe>

Кот в авто загружается автоматически

Если для атрибута loading задано значение auto (или пустое значение), то браузер принимает решение самостоятельно, загружать изображение с помощью ленивой загрузки или нет. При этом браузер учитывает множество факторов: тип платформы, включен ли режим Data Saver, условия сети, размер изображения, значение свойства CSS display и другие.

Значение eager

HTML

<img src="auto-cat.jpg" loading="eager" alt="...">
<iframe src="https://css-tricks.com/" loading="eager"></iframe>

Стремительный кот загружается мгновенно

Значение eager говорит браузеру, что изображение должно быть загружено немедленно. Если прежде загрузка была отложена (например, если было установлено значение lazy, а потом JavaScript заменил его на eager), то браузер должен немедленно загрузить изображение.

Значение lazy

HTML

<img src="auto-cat.jpg" loading="lazy" alt="...">
<iframe src="https://css-tricks.com/" loading="lazy"></iframe>

Ленивый кот загружается лениво

Значение lazy говорит браузеру, что изображение должно быть загружено с помощью ленивой загрузки.

Принцип работы атрибута loading

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

Событие load запускается, как только загружается полное изображение после первого запроса (для изображений размером менее 2 КБ) или после второго. Это событие может не запускаться для определенных изображений, из-за того, что не выполняется второй запрос.

Возможно, в будущем браузеры будут делать в два раза больше запросов на изображения. Сначала запрос Range, затем запрос целиком.

Убедитесь, что ваши серверы поддерживают HTTP-заголовок Range: 0-2047 и ответьте кодом состояния 206 («Частичный контент»), чтобы исключить доставку полноразмерного изображения дважды.

Поговорим об отложенном контенте. Движок рендеринга Chrome Blink определяет, загрузку какого контента и на какой срок следует отложить. Полный список требований можно найти в документации. Ниже приводится краткое описание ресурсов, загрузка которых может быть отложена:

• Изображения и фреймы на всех платформах, на которых установлено loading="lazy".
• Изображения на Chrome для Android, где включен Data Saver и которые удовлетворяют следующим требованиям:
  • loading="auto" или значение unset;
  • атрибуты width и height больше 10px;
  • не созданы программно с помощью JavaScript.
• Фреймы, которые удовлетворяют следующим требованиям:
  • loading="auto" или значение unset;
  • из стороннего источника (домен или протокол, который отличается от тех, что были на странице встраивания);
  • если высота и ширина превышает 4 пикселя (чтобы предотвратить отложенную загрузку небольших следящих фреймов);
  • если для фреймов не установлено display: none или visibility: hidden (чтобы предотвратить отложенную загрузку небольших следящих фреймов);
  • если они не расположены за границами экрана из-за отрицательных координат x или

Отзывчивые изображения с srcset

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

Оптимизация с помощью CDN позволяет предоставить все версии изображений в режиме реального времени.

HTML

<img src="https://demo.tiny.pictures/native-lazy-loading/lazy-cat.jpg" srcset="https://demo.tiny.pictures/native-lazy-loading/lazy-cat.jpg?width=400 400w, https://demo.tiny.pictures/native-lazy-loading/lazy-cat.jpg?width=800 800w" loading="lazy" alt="...">

Поддержка в браузере

На момент написания этой статьи ни один браузер не поддерживает встроенную загрузку по умолчанию. Тем не менее, Google включит эту функцию в Chrome 77. Разработчики других браузеров до сих пор не объявляли о поддержке встроенной ленивой загрузки . Edge – это исключение, потому что скоро он переключится на Chromium.

Поддержку данной функции можно обнаружить с помощью нескольких строк JavaScript:

JavaScript

if ("loading" in HTMLImageElement.prototype) {
  // Поддерживается.
} else {
  // Не поддерживается. Можете динамически импортировать библиотеку с ленивой загрузкой здесь (смотрите ниже)
}

Встроенная ленивая загрузка поддерживается браузерами, созданными на базе движка Chromium, начиная с версии 75.

Метод с заполнителем для изображений низкого качества

Полезная особенность большинства библиотек ленивой загрузки – это заполнитель для изображений низкого качества (LQIP – от английского Low-Quality Image Placeholder).

Браузеры загружают (вернее сказать, раньше загружали) атрибут src элемента img немедленно, даже если впоследствии его заменят другим URL-адресом. Поэтому можно загрузить файл небольшого размера (изображение низкого качества), а затем заменить его полноразмерной версией.

Эту особенность можно использовать для имитации запросов с диапазоном в 2 КБ для встроенной ленивой загрузки в ​​браузерах, которые не поддерживают эту функцию.

Результат

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

Если браузер поддерживает встроенную ленивую загрузку, он загружает первые 2 КБ изображения, чтобы отобразить заполнитель. Затем он загружает полноразмерное изображение.

Если браузер не поддерживает встроенную ленивую загрузку, он загружает библиотеку lazysizes и устанавливает в атрибут src элемента img заполнитель изображения низкого качества, размер которого также составляет около 2 КБ. Затем он загружает полноразмерное изображение.

Встроенная ленивая загрузка с диапазоном запросов в 2 КБ не работает из Codepen. Однако все заработает, если скопировать код в пустой файл HTML и запустить на вашем компьютере.

Заключение

Только представьте: самый популярный в мире браузер будет загружать изображения и фреймы ниже сгиба по умолчанию. Благодаря этому сайты будут передавать меньше данных. Кроме этого многие отслеживающие пиксели и фреймы не будут загружаться. А оптимизация изображений с помощью CDN может помочь при возникновении каких-либо проблем.

Ангелина Писанюкавтор-переводчик статьи «A Deep Dive into Native Lazy-Loading for Images and Frames»