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

Привет, в этой статье Я рассказываю как сделать ленивую загрузку изображений на любом сайте и на любом движке, а так же показываю пример на базе WordPress, аналогичный DLE, Drupal, Prestashop и другим популярным CMS.

Немного теории

Ты что ещё не в курсе? Ленивая или отложенная загрузка (от английского lazy load) это технология позволяющая загружать только те изображения на странице, которые в данный момент нужны пользователю. Результат внедрения — ускорение загрузки страницы, довольный посетитель и увеличение конверсии.

Все заметили как вконтакте быстро грузится!?

Пример из жизни

Представь что у тебя на странице около 200 изображений (это может быть страница категорий в интернет магазине или раздел фотогалереи или даже запись в блоге). Пусть каждое изображение размером 250 на 250 пикселей и весит 50 Кб. Итого получаем почти 10 мб изображений (200 шт * 50 кб = 10’000 кб) и 200 запросов к серверу.

Зачем нагружать пользователя таким количеством информации сразу? Давай покажем ему только первые 8 изображений, а остальные по мере того как они ему понадобятся. Загрузка страницы в этом случае пройдёт в разы быстрее. Кроме того, большинство твоих пользователей вообще не будут скролить страницу до конца. Им будет достаточно этих 8 уже загружённых изображений!

Отличный пример реализации ленивой загрузки: смотреть пример!

Wildberries это сайт с ежедневной милионной посещаемостью Представляешь себе нагрузку на сервер?

Внедрение (установка) ленивой загрузки

Установить ленивую загрузку на своём сайте может каждый и ты тоже, достаточно поэтапно выполнить следующие шаги:

1. Скачай lazyload.rar

2. Загрузи файлы из архива на свой сервер, например в корень твоего сайта, чтобы файлы были доступны ссылке вроде tvoisite.ru/js/jquery.js

3. Подключи эти файлы в шаблон (для WordPress это файл header.php, а для DLE это main.tpl), а сразу после них вставь код. У тебя должно получиться нечто похожее на это:

<script src='/js/jquery-1.8.2.min.js' type='text/javascript'></script>
<script src='/js/jquery.lazyload.min.js' type='text/javascript'></script>

<script type='text/javascript'>
	$(function() {
		$("img").lazyload({
			failurelimit : 10,
			threshold : 150,
			placeholder : "/img/dot.gif",
			effect : "fadeIn"
		});
	});
</script>

Эти строчки нужно включить до элемента </header>

4. Чтобы картинка сразу не загружалась, надо для всех изображений которые мы хотим лениво загружать, заменить
<img src=
на
<img data-original=

5. Готово! Но ты должен настроить этот скрип под себя, вот параметры которые ты можешь настроить:

  • failurelimit : 10 — скрипт останавливает поиск после того, как обнаружит 10 изображений на странице. Если у твоей страницы достаточно сложная разметка, то укажи здесь число побольше.
  • threshold : 150 — порог открытия изображения. Если установить значение 0, то изображение начнёт загружаться только в тот момент когда появится на странице. В нашем случае изображение начнёт загружать заранее, т.е. за 150 пикселей до появления в зоне видимости.
  • placeholder : «/img/dot.gif» — путь к фоновой картинке, которая будет отображаться пока не загрузится само изображение. Здесь можно установить какую-нибудь анимацию загрузки.
  • effect : «fadeIn» — эффект появления графического элемента.

Подвожу итог

Я использую технологию отложенной загрузки в двух своих интернет магазинах. Это позволяет мне экономить ресурсы сервера, а так же не заставлять пользователя томится в ожидании полной загрузки страницы. В своё время с помощью этой технологии Я уменьшил скорость загрузки своего интернет магазина с 6 до 2 секунд. Только вдумайтесь: в три раза быстрее!

 

А ты используешь ленивую загрузку?

Есть что добавить? Остались вопросы? Написать!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *