Подключение lazyload для ускорения загрузки сайта

Есть замечательная библиотека для Lazyload: https://github.com/aFarkas/lazysizes которая отлично себя показала в работе и прошла тест google page speed insights.

1. Подключаем в свой проект библиотеку

Качаем библиотеку http://afarkas.github.io/lazysizes/lazysizes.min.js и кладем ее в js шаблона сайта.

Подключаем в header.php для всех страниц сайта с помощью кода:

$asset = \Bitrix\Main\Page\Asset::getInstance(); 
//обычно $asset инициализирован где-нибудь выше в коде

$asset->addJs(SITE_TEMPLATE_PATH . "/js/lazysizes.min.js", true);

2. Настраиваем работу

Дальше во всех шаблонах компонентов и включаемых областях, где есть картинки, нужно настроить работу lazyload следующим образом:

<img data-src="images/flower3.png" class="lazyload" alt="">

То есть src превращается в data-src и добавляется класс lazyload.

Вот и всё!

3. Проверяем работу библиотеки

В консоли разработчика в браузере при корректной работе класс должен замениться на lazyloaded, а data-src превратится в простой src, как на картинке ниже:

Вот и всё. После этого отлично пройдут тесты гугла и сайт будет грузится заметно быстрее.