Отложенная загрузка изображений Img Lazy Load
Отложенная загрузка изображений используется для оптимизации скорости загрузки сайта при продвижении сайта в ПС гугл. И если вы сталкивались с Google PageSpeed Insights – сервисом по анализу скорости загрузки страницы, то вы можете найти сообщение «Отложите загрузку скрытых изображений».
Для чего нужно отложенная загрузка изображений на сайте
Дело в тот что когда вы первый раз загружаете страницу сайта, вы видите только первый экран сайта шапку + начальные блоки, то есть то что умещается на высоту монитора. Информация которая идет ниже – вы пока не видите, и может не увидете вообще пока не начнете пролистывать вниз (скроллить).
Поэтому если на страницах вашего сайта много изображений - все они будут загружаться сразу при открытии страницы, не зависимо видит пользователь их или нет, что, в свою очередь, увеличивает общее время загрузки страницы вашего сайта и позитивно влияет на раскрутку сайта в Google.
И тут нам приходит на помощь плагин «Lazy Load», который позволяет динамически подгружать изображения по мере появления блоков при прокрутке страницы.
Инструкция по установке Lazy Load 2.0 на сайт
Скачайте архив по ссылке jQuery Lazy Load, разархивируйте содержимое и загрузите на ваш сайт.
Далее нужно подключить ранее загруженный скрипт и на приведенном примере сделать загрузку фото на сайте ленивой)
В примере будет загружаться вначале logo-small.png а потом при появлении блока с фото подгружаться logo-big.png
Автоматическое изменение кода изображений для Lazy Load 2.0
В данном примере во все фото на странице через php функцию preg_replace добавляем параметр data-src. И тут есть минус того что идет нагрузка на браузер клиента.
