Блог о SEO
Telegram-канал
БлогТехническая оптимизацияЛенивая загрузка изображений

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

2020-03-18
114
Ленивая загрузка изображений
Содержание

Ленивая загрузка (lazy loading) изображений и видео - это техника откладывания загрузки некритичных ресурсов страницы до момента их появления в видимой области браузера.

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

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

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

При ленивой загрузке, изображения находящиеся вне первого экрана заменяются плейсхолдером (шаблонным «легким» изображением) до момента их попадания во 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). Данные об изображениях для которых не настроена ленивая загрузка будут выведены на вкладке «Мобильные», в рекомендации «Отложите загрузку скрытых изображений».

Отложите загрузку скрытых изображении? в PageSpeed

Уже настроили на сайте ленивую загрузку? Изменилась ли скорость загрузки?

Комментарии
Оставить комментарий
Отправить
Подпишитесь на новые статьи блога