Ленивая загрузка: что это, для чего и как реализовать

Ленивая загрузка — это способ оптимизации скорости работы сайта, подразумевающий отказ от загрузки всего контента на странице, если в этом нет необходимости.

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

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

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

Зачем нужна ленивая загрузка

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

• на страницах которых размещено много изображений (online-сервисы с фото, инфосайты с огромным количеством медиаконтента);
• с недостаточно высокой оценкой скорости загрузки по сервису PageSpeed ​​Insights;
• с недостаточной скоростью загрузки (у сайтов-конкурентов в нише этот показатель намного больше);
• размещенным на слабом сервере, который не дает достаточной скорости загрузки документов;
• преобладающая аудитория которых заходит с мобильных устройств.

Есть две существенные причины, почему нужна отложенная загрузка:

1. Улучшить поведенческие факторы. На многих сайтах для отображения контента используется JavaScript, что снижает их скорость загрузки. Посетители не любят долго ждать, поэтому с высокой вероятностью они покинут ваш ресурс и уйдут к конкуренту. Ленивая загрузка решит этот вопрос.
2. Экономия трафика. На страницах загружается лишь тот контент, который нужен пользователю (к которому он доскролил). Это актуально для посетителей с плохой скоростью интернета или ограниченным количеством килобайт.

Виды Lazy loading

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

• По клику. Фото и видео подгружается, когда посетитель переходит по ссылке. Например, объемные картинки загружаются, когда пользователь кликает на миниатюру.
• В фоновом режиме. Фоновая загрузка контента подразумевает следующее: пользователь загружает страницу и оставляет ее открытой. Такой метод применяется для документов, использующихся в работе — чертежи, схемы и большие размеры фото.
• По скроллингу. Фреймы и картинки подгружаются только тогда, когда пользователь до них добирается. Чаще всего к такому способу прибегают владельцы интернет-магазинов с объемным каталогом товаров или инфо сайты с длинными страницами, на которых опубликовано много видео и фото контента.

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

Как сделать Lazy loading

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

Ожидаем Lazy loading внутри WordPress

Команда WordPress объявила, что ленивая загрузка картинок будет реализована при обновлении движка версии 5.4. Это позволит отказаться от использования JS и посторонних плагинов. Релиз был запланирован на 31 марта 2020 года, но после обновления lazy-loading, так и не внедрили, ссылаясь на возможность установки дополнительного плагина. Теперь остается ждать, что запланированное будет реализовано в версии 5.5.

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

Классический lazy loading от David Walsh

В стандартной версии этот скрипт меняет атрибут src на data-src в теге img:

<img data-src="image.jpg" alt="test image">

Теги img, содержащие атрибуты data-src, содержатся в CSS. После загрузки фото, они плавно отображаются с использованием следующих переходов:
img {
opacity: 1;
transition: opacity 0.3s;
}
img[data-src] {
opacity: 0;
}

Дальше JavaScript передает всем img атрибут src, которые в результате приобретают значение data-src. Когда все картинки будут загружены, data-src пропадает из img:

[].forEach.call(document.querySelectorAll(’img[data-src]’), function(img) {
img.setAttribute(’src’, img.getAttribute(’data-src’));
img.onload = function() {
img.removeAttribute(’data-src’);
};
});

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

Robin Osborne — улучшенный Lazy loading

Интересная технология, в которой JavaScript используется как улучшения для классических CSS и HTML. При этом картинки показываются даже если JS сломался или был отключен. Обеспечивается удобный доступ посетителям к содержимому на страницах. При этом не нужны никакие фреймы или плагины.

Lazy loading реализована по следующему принципу: контент подгружается только тогда, когда пользователь к нему доскроллил.

BLazy.js на простом JavaScript

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

Простое внедрение. Разметка:

<img class="b-lazy" src="placeholder.gif" data-src="image.jpg" alt="test image">

Тег img нужно заменить:

1. Добавить класс .b-lazy.
2. В виде значения src использовать плейсхолдер. Уменьшить нагрузку на сервер позволят прозрачные инлайновые gif с кодом base. Однако есть один момент: если на других веб-страницах будут такие же картинки, там не будет реализовано кэширование.
3. Data-src показывает на изображение, которое требует асинхронной загрузки.

JS: задайте стандартный вызов bLazy и выполните настройку объекта по карте опций:

var bLazy = new Blazy({
//опции
});

Lazy Load XT jQuery

Удобный плагин для создания собственного скрипта для Lazy Load. У него есть две версии:

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

Активировать плагин на сайте легко: добавьте jQuery-библиотеку перед закрывающим тегом, указав одну из версий: упрощенная — jquery.lazyloadxt.js , расширенная — jquery.lazyloadxt.extra.js.

<script src="jquery.js"></script>

<script src="jquery.lazyloadxt.js"></script>

Также предлагается еще одно неплохое решение, позволяющие обойтись без установки плагина – скрипт jqlight.lazyloadxt.min.js:

<script src="jqlight.lazyloadxt.js"></script>

<script src="jquery.lazyloadxt.js"></script>

Нужно заменить в картинках src на data-src:

<img data-src="lazy.jpg" width="100" height="100" alt="test image">

Lazy Load заработает автоматически или запустите вручную, указав следующее:

$(elements).lazyLoadXT();

Размытое фото от Craig Buckler

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

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

Первым делом необходимо задействовать библиотеку jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

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

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

Нужно еще обратить внимание на div с id=»smartPortfolio», id=»moreButton» и id=»loadingDiv«, так как они располагаются в скрипте, обеспечивающем загрузку контента с других документов.

При этом SmartPortfolio используется в качестве «контейнера» портфолио, а MoreButton — кнопка, кликнув на которую, осуществляется загрузка следующего фрагмента, LoadingDiv — часть документа, где отображается текст, если произойдет какая-то ошибка или пользователь откроет все портфолио.

Код скрипта (вставьте перед </body>):

var lazyload = lazyload || {};
(function($, lazyload) {
«use strict»;
var page = 2,
buttonId = «#moreButton»,
loadingId = «#loadingDiv»,
container = «#smartPortfolio»;
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);

Файлы, которые будут загружаться при нажатии на кнопку, хранятся в папке pages. В ней три файла, один из них пустой. Вот как прописан в нем путь:

var url = «./pages/» + page + «.html»;

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

buttonId = «#moreButton»,
loadingId = «#loadingDiv»,
container = «#smartPortfolio»;

Дальше, перед пропишите скрипт:

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

Выводы

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

А вы используете ленивую загрузку? Каким способом вы ее реализуете? Поделитесь опытом в комментариях.