Ускорение загрузки страниц сайта является неотъемлемой частью его продвижения. Ниже мы разберем такую технологию, как Lazy load («ленивая загрузка») изображений и контента, дадим рекомендации по ее внедрению.
Для чего нужен Lazy loading?
В большинстве случаев, при посещении страницы пользователем, происходит одновременная загрузка всех ее элементов, что требует большего количества ресурсов, в том числе и временных. Чтобы этого избежать, применяют технологию, благодаря которой загрузка части контента и изображений происходит отложено, т.е. подгружается в первую очередь в видимой части страницы.
На практике это выглядит следующим образом, посетитель отрывает страницу и первоначально ему демонстрируется первый экран с текстовым и прочим медиаконтентом. Из-за того, что страница в этот момент не грузится целиком, получить «первый экран» удается за гораздо короткий промежуток времени. Далее, по мере скроллинга (либо при выполнении иного условия), подгружаются остальные части страницы. Все это и есть «ленивая загрузка».
Скорость загрузки страницы существенно влияет на продвижение сайта в поисковых системах, особенно это касается Google. Поисковик заинтересован не только в том, чтобы показывать релевантный запросу пользователя контент, но, и чтобы загрузка предложенных страниц происходила максимально быстро.
Таким образом, скорость загрузки страниц напрямую относится к показателю качества ресурса.
Lazy load так же позволяет значительно снизить нагрузку на сервер или распределить ее, особенно это касается сайтов (страниц), которые содержат в себе множество картинок или другого типа медиаконтента.
Виды Lazy loading
Виды «ленивой загрузки» делятся по принципам взаимодействия пользователя со страницей.
- Скроллинг – наиболее популярный вариант. Для того, чтобы загрузить следующую часть контента, пользователю достаточно пролистать страницу ниже. Это очень удобно, т.к. не требует дополнительных манипуляций и подходит для организации «бесконечно» длинной страницы. Активно используется в социальных сетях при формировании ленты или на ресурсах СМИ, когда один пост сменяет другой, и прочих видах сайтов.
- По клику. Дойдя до «конца» страницы, пользователю будет предложено нажать кнопку для отображения следующей части экрана или различных уточнений (например, характеристики товара). Такой метод применяется интернет магазинами, агрегаторами или каталогами. Но на контентных ресурсах может увеличиться процент отказов. Чтобы этого не произошло, информация на странице должна быть интересна пользователю. Данным методом удобно реализовывать ленивую загрузку для картинок и прочих тяжеловесных медиа элементов, которые могут быть подгружены по желанию пользователя.
- Загрузка контента в фоне, метод схожий со скроллингом. Суть его заключается в том, что первоначально подгружается первый экран, и пока пользователь изучает предложенную информацию, на фоне происходит загрузка остальной части страницы. В некоторых случаях это улучшает поведенческие факторы, т.к. при первом способе (скроллинге), могут появляться «лаги» при пролистывании страницы, а загрузка в фоне решит эту проблему. Особенно это будет актуальным, если на странице опубликованы изображения большого размера. Но в этом случае, допустимым является подгрузка исключительно тех элементов, которые действительно нужны и интересны пользователю.
Способы реализации «ленивой загрузки»
Способы реализации технологии «ленивой загрузки» зависят от того, используется ли вы самописный движок сайта или готовую CMS, например, WordPress или «1С-Битрикс». В первом случае придется обратиться к программисту, а для владельцев ресурсов на популярных CMS имеются уже готовые решения.
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 подойдет скрипт + к нему для фреймворка Node.js. Суть использования скрипта заключается в том, чтобы создать скриншоты, показывающие как, представляется загружаемый контент пользователям и краулерам.
Какие проблемы могут возникнуть при реализации?
Основная и неявная проблема, которая может поджидать разработчика при настройке «ленивой загрузки» – закрытие части контента от индексации для поисковых ботов. Это чревато падением трафика из поисковой выдачи как отдельных страниц, так и всего сайта.
Чтобы этого избежать, рекомендуется провести тестирование после внедрения технологии с помощью специального . Подробную информацию о том, как это сделать можно прочитать в .
Также при подключении скриптов Lazy Load, обязательно нужно убедиться в том, что они поддерживаются основными браузерами.
Lazy load способна значительно ускорить загрузку страниц сайта, улучшая при этом поведенческие факторы. Способов реализации данной технологии масса, что дает возможность подобрать подходящий под нужды конкретного сайта.
