Что такое LazyLoad?

Суть метода LazyLoad - подгружать картинки не в момент загрузки страницы, а по мере ее просмотра. Это облегчает первоначальную загрузку страницы, скорость отображения пользователям и отношение поисковых систем.

На многих своих сайтах я использую LazyLoad картинок, для ускорения загрузки самого сайта. Сделать это легко.

Заходим на сайт и сохраняем себе в папку public/js файл  отсюда. Саму полную документацию вы можете посмотреть в гитхабе автора библиотеки. Мы же пройдемся кратко и по сути.

Подключаем библиотеку перед закрытием тега </body>, там же где у нас подключены и другие скрипты.

<script src="/js/yall.min.js"></script>

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

<script>
    document.addEventListener('DOMContentLoaded',function(){
        yall();
    });
</script>

Половина дела сделана - сама библиотека подключена. Теперь нужно только настроить саму ленивую загрузку картинок в тегах. Для этого берем одну минимальную картинку. Я обычно беру картинку в 1 пиксель прозрачную или же использую готовую картинку под блок, чтобы не было сдвигов верстки. К примеру скачиваем где-нибудь однопиксельную картинку с прозрачным фоном png или подходящую по цвету фона jpg. Сохраняем ее в папке /public/images/lazyload.png,  так она будет доступна у нас по ссылке /images/lazyload.png

Дальше наша задача заменить аттрибут src аттрибутом data-src, так чтобы data-src указывал на путь к нашей картинке, а сам был src="/images/lazyload.png". При этом в тег <img> так же добавляем класс lazy.

Таким образом, если изначальная картинка у нас была:

<img class="img-90 rounded-circle" src="/themes/front/assets/images/dashboard/1.png" alt="">

то после проделанных действия должна выглядеть как

<img class="img-90 rounded-circle lazy" src="/images/lazyload.png" data-src="/themes/front/assets/images/dashboard/1.png" alt="">

После изменений сохраняем и проверяем. Это основное действие.

Ок, но как быть с картинками загружаемыми через текстовый редактор, или визивиг?

Для этого нужно вкручивать автозамену. Самый примитивный пример на PHP выглядит как-то так:

$body = str_replace('img class="lazy" src="/images/imgload_small.png" data-src=','img class="lazy" src="/images/lazyload.png" data-src=',$body);

В этом примере мы у всех тегов img с аттрибутом src меняем параметры и добавляем класс. Все, как и нужно. Но нужно понимать что пользователи, как всегда, могут что-то учудить, а значит пример нуждается в доп. обработке.