Обсудим ваш проект?
Комплексный интернет-маркетинг
15 лет опыта | 90+ специалистов
Отправить заявку

Что такое Lazy load и как это реализовать на сайте?

Обновлено: 16 сентября 2020
Время на прочтение:
Просмотров: 14443
Дарья Иванова
редактор
Станислав Мозгель
руководитель отдела веб-разработки
Редполитика
Мы прилагаем все усилия, чтобы наши обзоры были максимально честными, точными и объективными. Если вы посещаете ссылки в нашем контенте, мы можем получить комиссионное вознаграждение от ваших покупок, однако это не влияет на нашу редакционную политику и мы не станем рекомендовать продукты или сервисы, в которых не уверены.

Ускорение загрузки страниц сайта является неотъемлемой частью его продвижения. Ниже мы разберем такую технологию, как Lazy load («ленивая загрузка») изображений и контента, дадим рекомендации по ее внедрению.


Для чего нужен Lazy loading?

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

На практике это выглядит следующим образом, посетитель отрывает страницу и первоначально ему демонстрируется первый экран с текстовым и прочим медиаконтентом. Из-за того, что страница в этот момент не грузится целиком, получить «первый экран» удается за гораздо короткий промежуток времени. Далее, по мере скроллинга (либо при выполнении иного условия), подгружаются остальные части страницы. Все это и есть «ленивая загрузка».

Нет времени разбираться?
Техподдержка сайта на «1С-Битрикс» под ключ
Специализируемся на «1С-Битрикс» более 10 лет и знаем все подводные камни и специфику. Работаем с сайтами любой технической сложности и бизнес-логики. При необходимости подключаем UX-специалиста и дизайнера. В течение 2 часов реагируем на обращения в тикетной системе.
Ваш сайт:

Скорость загрузки страницы существенно влияет на продвижение сайта в поисковых системах, особенно это касается Google. Поисковик заинтересован не только в том, чтобы показывать релевантный запросу пользователя контент, но, и чтобы загрузка предложенных страниц происходила максимально быстро.

Таким образом, скорость загрузки страниц напрямую относится к показателю качества ресурса.

Lazy load так же позволяет значительно снизить нагрузку на сервер или распределить ее, особенно это касается сайтов (страниц), которые содержат в себе множество картинок или другого типа медиаконтента. 

Виды Lazy loading

Виды «ленивой загрузки» делятся по принципам взаимодействия пользователя со страницей.

  • Скроллинг – наиболее популярный вариант. Для того, чтобы загрузить следующую часть контента, пользователю достаточно пролистать страницу ниже. Это очень удобно, т.к. не требует дополнительных манипуляций и подходит для организации «бесконечно» длинной страницы. Активно используется в социальных сетях при формировании ленты или на ресурсах СМИ, когда один пост сменяет другой, и прочих видах сайтов.
  • По клику. Дойдя до «конца» страницы, пользователю будет предложено нажать кнопку для отображения следующей части экрана или различных уточнений (например, характеристики товара). Такой метод применяется интернет магазинами, агрегаторами или каталогами. Но на контентных ресурсах может увеличиться процент отказов. Чтобы этого не произошло, информация на странице должна быть интересна пользователю. Данным методом удобно реализовывать ленивую загрузку для картинок и прочих тяжеловесных медиа элементов, которые могут быть подгружены по желанию пользователя.
  • Загрузка контента в фоне, метод схожий со скроллингом. Суть его заключается в том, что первоначально подгружается первый экран, и пока пользователь изучает предложенную информацию, на фоне происходит загрузка остальной части страницы. В некоторых случаях это улучшает поведенческие факторы, т.к. при первом способе (скроллинге), могут появляться «лаги» при пролистывании страницы, а загрузка в фоне решит эту проблему. Особенно это будет актуальным, если на странице опубликованы изображения большого размера. Но в этом случае, допустимым является подгрузка исключительно тех элементов, которые действительно нужны и интересны пользователю.

Способы реализации «ленивой загрузки»

Способы реализации технологии «ленивой загрузки» зависят от того, используется ли вы самописный движок сайта или готовую CMS, например, WordPress или «1С-Битрикс». В первом случае придется обратиться к программисту, а для владельцев ресурсов на популярных CMS имеются уже готовые решения.

Привлекли 35.000.000 людей на 185 сайтов
Мы точно знаем, как увеличить онлайн–продажи
Применяем лучшие практики digital–продвижения как из вашей тематики, так и из смежных областей бизнеса. Именно это сделает вас на голову выше конкурентов и принесёт лиды и продажи.
Ваш сайт:

Lazy load для изображений

Способов реализации отложенной загрузки изображений множество, рассмотрим основные.

Cкрипт от David Walsh

Суть работы этого скрипта заключается в том, что он производит замену атрибута <src> в теге изображения на <data-src>:

<img data-src="foto.jpg" alt=" ">

Подгрузка изображений происходит посредством CSS, и когда пользователь до них долистает, они плавно появятся:

img {

opacity: 1;

transition:

opacity 0.3s;

}

img[data-src] {

opacity: 0;

}

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {

img.setAttribute('src', img.getAttribute('data-src'));

img.onl oad = function() {

img.removeAttribute('data-src');

};

});

Далее происходит передача всем тегам изображений (img) атрибута data-scr, который после загрузки картинок убирается из тега.

Как видно из реализации данного метода, он относительно прост в настройке и при этом эффективен. Но нужно учитывать тот факт, что это способ загрузки изображений в фоне, а не при скроллинге страницы. Т.е. скорость подгрузки увеличится, но снижения итоговой нагрузки на сервер не будет, то же самое касается интернет-трафика пользователя.

Скрипт с использованием событий

Данный скрипт будет подгружать изображения при скроллинге. В этом случае, наша задача отследить события прокрутки страницы в браузере scroll, resize и orientationChange.

При срабатывании любого из этих событий, мы отслеживаем изображения, которые должны быть загружены. После идет проверка условия – находится изображение в области просмотра или нет, за это отвечают значения top offset.

Пример реализации:

HTML

<img src="/img/img/image1.jpeg " />

<img src="/img/img/image2.jpeg" />

<img src="/img/img/image3.jpg " />

<img class="lazy" data-src="/img/img/image4.jpg " />

<img class="lazy" data-src="/img/img/image5.jpg " />

<img class="lazy" data-src="/img/img/image6.jpg " />

JS

document.addEventListener("DOMContentLoaded", function() {

var lazyloadImages = document.querySelectorAll("img.lazy");

var lazyloadThrottleTimeout;

function lazyload () {

if(lazyloadThrottleTimeout) {

clearTimeout(lazyloadThrottleTimeout);

}

lazyloadThrottleTimeout = setTimeout(function() {

var scrollTop = window.pageYOffset;

lazyloadImages.forEach(function(img) {

if(img.offsetTop < (window.innerHeight + scrollTop)) {

img.src = img.dataset.src;

img.classList.remove('lazy');

}

});

if(lazyloadImages.length == 0) {

document.removeEventListener("scroll", lazyload);

window.removeEventListener("resize", lazyload);

window.removeEventListener("orientationChange", lazyload);

}

}, 20);

}

document.addEventListener("scroll", lazyload);

window.addEventListener("resize", lazyload);

window.addEventListener("orientationChange", lazyload);

});

В данном примере, первые 3 изображения грузятся обычным способом с использованием атрибута <scr>, остальным присваивается <data-src> и они загружаются при попадании в область просмотра.

Библиотека Intersection Observer API

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

Определение того, находится ли изображение в видимой части экрана, происходит с помощью специальных наблюдателей, которые вешаются на все элементы с отложенной загрузкой. После того, как картинка появляется в видимой части экрана, ее URL помещается в атрибут <scr>.

HTML

<img src="/img/img/image1.jpeg " />

<img src="/img/img/image2.jpeg" />

<img class="lazy" data-src="/img/img/image4.jpg " />

<img class="lazy" data-src="/img/img/image5.jpg " />

JS

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages;    
  if ("IntersectionObserver" in window) {
    lazyloadImages = document.querySelectorAll(".lazy");
    var imageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var image = entry.target;
          image.src = image.dataset.src;
          image.classList.remove("lazy");
          imageObserver.unobserve(image);
        }
      });
    });
    lazyloadImages.forEach(function(image) {
      imageObserver.observe(image);
    });
  } else {  
    var lazyloadThrottleTimeout;
    lazyloadImages = document.querySelectorAll(".lazy");    
    function lazyload () {
      if(lazyloadThrottleTimeout) {
        clearTimeout(lazyloadThrottleTimeout);
      }    
      lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              img.src = img.dataset.src;
              img.classList.remove('lazy');
            }
        });
        if(lazyloadImages.length == 0) { 
          document.removeEventListener("scroll", lazyload);
          window.removeEventListener("resize", lazyload);
          window.removeEventListener("orientationChange", lazyload);
        }
      }, 20);
    }

    document.addEventListener("scroll", lazyload);
    window.addEventListener("resize", lazyload);
    window.addEventListener("orientationChange", lazyload);
  }
})

При сравнении двух этих методов, будет заметна разница в скорости загрузки изображений в пользу Intersection Observer API.

Эффект размытого изображения

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

Скрипт имеет высокую производительность и небольшой вес исполняемых файлов, при этом сторонние фреймворки или библиотеки не нужны. Поддерживает все современные браузеры и корректно работает на экранах с высоким разрешением.

Lazy load для контента

Самым простым способом реализации ленивой загрузки для контента, будет использование технологии AJAX, которая будет подгружать запрашиваемые блоки <div> из стороннего файла. Покажем реализацию на примере создания фотоальбома с кнопкой, по нажатию которой будет происходить подгрузка контента из указанной директории.

Вначале нужно задать структуру HTML-документа, создав соответствующие <div> контейнеры и прочие элементы.

<div class="mainWrapper">

<h1>Фотоальбом</h1>

<div id="fotoalb">

<div class="foto">

<img src="./img/image1.png" alt="">

</div>

<div class="foto">

<img src="./img/image2.png" alt="">

</div>

</div>

<div id="moreButton" oncl ick="lazyload.load()">

<span>Следующее фото</span>

</div>

<div id="loadingDiv">

<span>Загрузка...</span>

</div>

</div>

Далее подключаем скрипт в теге <body>:

<script type="text/javascript" src="/lazyload.js"></script>

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

var lazyload = lazyload || {};

(function($, lazyload) {

"use strict";

var page = 2,

buttonId = "#moreButton",

loadingId = "#loadingDiv",

container = "#fotoalb";

lazyload.load = function() {

var url = "/pages/" + page + ".html";

$(buttonId).hide();

$(loadingId).show();

$.ajax({

url: url,

success: function(response) {

if (!response || response.trim() == "NONE") {

$(buttonId).fadeOut();

$(loadingId).text("Портфолио полностью загружено");

return;

}

appendContests(response);

},

error: function(response) {

$(loadingId).text("При запросе возникла страница. Пожалуйста, обновите страницу.");

}

});

};

var appendContests = function(response) {

var id = $(buttonId);

$(buttonId).show();

$(loadingId).hide();

$(response).appendTo($(container));

page += 1;

};

})(jQuery, lazyload);

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

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

Для организации ленивой загрузки на CMS WordPress, достаточно установить и настроить один из предложенных плагинов.

Lazy Load Optimizer

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

Autoptimize

Один из популярнейших плагинов для оптимизации скорости работы сайта на WordPress, имеет функцию Lazy load.

Lazy Loader

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

Рекомендации по реализации Lazy loading

  • Проверьте доступность контента для индексации краулерами Google.
  • При реализации бесконечной прокрутки, важно обеспечить возможность постраничной загрузки контента. Благодаря этому, пользователь может возвращаться в предыдущим страницам.
  • Для тестирования Lazy load подойдет скрипт Puppeteer + библиотека к нему для фреймворка Node.js. Суть использования скрипта заключается в том, чтобы создать скриншоты, показывающие как, представляется загружаемый контент пользователям и краулерам.

Какие проблемы могут возникнуть при реализации?

Основная и неявная проблема, которая может поджидать разработчика при настройке «ленивой загрузки» – закрытие части контента от индексации для поисковых ботов. Это чревато падением трафика из поисковой выдачи как отдельных страниц, так и всего сайта.

Чтобы этого избежать, рекомендуется провести тестирование после внедрения технологии с помощью специального скрипта. Подробную информацию о том, как это сделать можно прочитать в рекомендациях Google.

Также при подключении скриптов Lazy Load, обязательно нужно убедиться в том, что они поддерживаются основными браузерами.

Lazy load способна значительно ускорить загрузку страниц сайта, улучшая при этом поведенческие факторы. Способов реализации данной технологии масса, что дает возможность подобрать подходящий под нужды конкретного сайта.

Методология выбора
Кто мы
Директ Лайн
Крупнейшее региональное интернет-агентство России. ТОП-10 в рейтинге Рунета.
1200 +
проектов
90
экспертов
16лет
на рынке
Наша методология
Статьи в блоге Директ Лайн - это всегда оригинальный, проверенный и объективный контент. Все обзоры и рейтинги честно отражают наше мнение и опыт взаимодействия с каждым инструментом.
Содержание
Комментарии

Комплекс услуг для вашего бизнеса

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

Кейсы и статьи

Бесплатный аудит SEO
и рекламного трафика
Покажем точки роста вашего проекта,
если по нему уже ведутся работы