Ленивая загрузки изображений на web-страницах

Всё больше и больше людей заходят на сайты с мобильных устройств. И поэтому важно, то как быстро загружается сайт. Не стоит забывать про поисковики, скорость загрузки сайта влияет на ранжирование.
Одним из способов уменьшить время загрузки сайтов является "Ленивая загрузка".
Проще говоря, это использование фотографии-заглушки, а когда вы проскролите страницу до фотографий - они прогрузятся.
Это снижает количество HTTP-запросов к серверу, что способствует более быстрой загрузке контента сайта.
Реализация крайне проста.
Качаете файлы библиотеки. Добавляем код в тег <script>

$(document).ready(function(){
   $('img.lazy').lazyload()
})

Ждём когда прогрузится страница. И "вешаем" обработчик на картинки с классом lazy.

<img src="/images/logo.png" data-src="/products/image10.png" class="lazy">

//Фотография "заглушка"
src="/images/logo.png"

//Фотография, которая потом прогрузится.
data-src="/products/image10.png"

На первой картинке видно, сколько фотографий грузится без отложенной загрузки

Второй скрин показывает сколько фотографий, а следственно HTTP-запросов к медиа-файлам с отложенной загрузкой.

Пример того, как браузер запрашивает картинки по мере проскроливания страницы:

Отложенную загрузку я реализовал на сайтах: turbinaspec.ru и z-s-t.ru

Материал подготовлен автором @zheev