Ленивая загрузка изображений

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

При ленивой загрузке, изображения находящиеся вне первого экрана заменяются плейсхолдером (шаблонным «легким» изображением) до момента их попадания во viewport.

В качестве плейсхолдера может выступать:

• изображение-пиксель, разрешением 1 на 1 пиксель и фонового цвета, техника применяется у МВидео и обеспечивает наилучшие показатели в том же PageSpeed;
• изображение с анимацией загрузки, используется на BMW.com, обеспечивает хороший пользовательский опыт;
• изображение с доминирующим цветом изображения, эту технику используют Pinterest и Google Изображения (можно настроить через ImageKit);
• версия изображения низкого качества, используется в Facebook и Medium.com (в связке с CSS-свойством filter, имеющим значение blur(20px)).

После попадания в область viewport, у изображения (имеющего, например, класс lazy) посредством JS заменяется источник с адреса плейсхолдера на адрес самого изображения. Происходит загрузка нового изображения браузером и его отрисовка на странице.

Загрузка изображений тега <img>

Для того чтобы Яндекс корректно учитывал изображения загружаемые лениво, необходимо разместить ссылку на источник изображения в атрибуте data-src или data-original. При этом, для корректного учета изображения в Google достаточно того что оно загружается сразу после попадания во viewport.

Допускается указание атрибутов адаптивных изображений srcset.

Пример тега lazy loading изображения:

<img src="load.gif:" alt="Ленивец" data-src="/img/lenivetc.jpg">

Загрузка фоновых изображений

Фоновые изображения, создаваемые благодаря CSS-свойству background-image отображаются только после формирования DOM и CSSOM. Несмотря на это, они также влияют на скорость отображения страницы в браузере и требуют настройки отложенной загрузки.

В данном случае нам не нужен плейсхолдер, для настройки ленивой загрузки, просто подставляем свойство background-image с источником изображения для элемента.

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

Атрибут loading

Атрибут loading со значением lazy используется для настройки ленивой загрузки содержимого тегов img и iframe. К сожалению, на текущий момент атрибут не получил широкую поддержку у браузеров, а потому его применение не будет универсальным.

<img loading="lazy" alt="Ленивец" src="/img/lenivec.jpg">

Помимо параметра lazy, атрибуту может быть присвоен параметр eager, означающий что изображение нужно загрузить сразу при загрузке страницы. Также имеется значение auto, позволяющее браузеру самостоятельно определить как будет загружаться изображение: сразу или отложено.

Пример настройки на JavaScript

Данный пример настройки ленивой загрузки выполнен на чистом JavaScript, без использования дополнительных библиотек и рекомендуется разработчиками Google:

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  console.log(lazyImages);
  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    }); lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Указание метода имеющего большую совместимость
  }
});

Стоит отметить, что в данном коде используется метод isIntersecting, который не поддерживается в браузере Edge версии 15, вышедшей в первой половине 2017 года. Тем не менее, можно добавить для него поддержку, подключив полифилл IntersectionObserver.

Настройка с использованием JQuery

Если на сайте уже используется библиотека JQuery, можно для настройки ленивой загрузки подключить расширение JQuery.Lazy. Оно имеет множество методов подключения (в том числе и с использованием CDN).

Код вызова ленивой загрузки при этом выглядит очень лаконично:

$(function() {   $('.lazy').Lazy(); });

Расширение имеет несколько плагинов, добавляющих поддержку ленивой загрузки содержимого тегов <picture>, <audio>, <video>, <iframe>, а также видео с Vimeo и YouTube.

Как проверить ленивую загрузку

Проверить какие изображения не загружаются лениво можно вручную, для этого нужно отключить JavaScript в браузере и обновить страницу. Если какие-то изображения перестали загружаться - они загружаются благодаря JavaScript, а значит скорее всего загружаются лениво. Для Chrome есть удобное расширение Quick JavaScript Switcher, если вам нужно часто проверять работу сайта без JavaScript - советую установить.

Автоматически осуществить проверку можно также через сервис Google PageSpeed Insight (или Google Lighthouse). Данные об изображениях для которых не настроена ленивая загрузка будут выведены на вкладке «Мобильные», в рекомендации «Отложите загрузку скрытых изображений».