Настройка Lazy Load в WordPress без плагинов

В том случае, если вы хотите ускорить загрузку вашего сайта работающего на CMS WordPress, имеет смысл настроить в нем Lazy Loading для картинок (изображений). Т.е. их загрузку браузером только в том случае, если они должны отображаться пользователю. Есть множество плагинов, которые позволяют это сделать в пару кликов, но для тех, кто не хочет устанавливать лишние плагины из-за соображений безопасности (или каких то еще) и написан данный пост.


Что такое Lazy Load?

Lazy Load (Ленивая загрузка) - отложенная загрузка изображений, это прием, который позволяет отложить загрузку изображений на просматриваемой странице до того момента, когда они действительно нужны (т.е. видны пользователю). Благодаря этому, при первоначальной загрузке страницы сайта - нет необходимости загружать изображения, которые присутствуют на данной странице, что значительно экономит трафик и ускоряет загрузку страницы (при использовании мобильного интернета, например). Также, благодаря этому достигается экономия трафика на сервере (актуально, если сайт использует CDN), т.к. далеко не все пользователи читают запрошенную статью до конца и таким образом просматривают все доступные на ней изображения.

Как подключить Lazy Load в WordPress?

На момент написания этой статьи, на нашем сайте используется именно этот способ отложенной загрузки изображений.
Первым делом необходимо скачать сам скрипт Lazy Load, я воспользовался следующим:
https://github.com/eisbehr-/jquery.lazy
В файле вашей темы, необходимо подключить загрузку файла jquery.lazy.min.js, который можно скачать с github разработчика.

Как видно из названия, для корректной работы требуется наличие библиотеки jquery, которая должна быть успешно загружена ПЕРЕД загрузкой jquery.lazy.min.js. Иначе вы будете получать ошибку при открытии страницы.

Как активировать Lazy Load в WordPress?

В предыдущем пункте мы загрузили необходимую библиотеку, теперь осталось ее активировать. Для ее нормальной работы, у каждого изображения на странице (тег img), должен быть указан параметр data-src, а стандартный src должен отсутствовать или быть пустым. Чтобы этого добиться, необходимо в файл functions.php вашей темы оформления, добавить следующие строки:
images_lazy_load_wordpress.txt

$pattern - данным регулярным выражением, мы ищем необходимые атрибуты в теге img чтобы сформировать свой новый тег img, вместо стандартного, который генерируется движком WordPress.
$replacement - тут мы формируем новый тег img, добавляем ко всем уже существующим классам дополнительный класс lazy, вместо src, мы используем data-src, а также переносим alt, width, height.

Т.е., если изначально тег img выглядел вот так:

img class="size-medium wp-image-8556 aligncenter" src="https://static.sysadmin.ru/wp-content/uploads/2019/03/ss-500x93.jpg" alt="test" width="500" height="93" srcset="https://static.sysadmin.ru/wp-content/uploads/2019/03/ss-500x93.jpg 500w, https://static.sysadmin.ru/wp-content/uploads/2019/03/ss.jpg 669w" sizes="(max-width: 500px) 100vw, 500px"

То после обработки, он примет вот такой вид:

img class="size-medium wp-image-8556 aligncenter lazy" data-src="https://static.sysadmin.ru/wp-content/uploads/2019/03/ss-500x93.jpg" alt="test" width="500" height="93"
Если на вашем сайте вы активно используете srcset, то тогда вам надо будет самостоятельно модифицировать регулярное выражение. Чтобы формируемый тег img, помимо data-src, имел и правильно сформированный data-srcset (плагин jquery.lazy имеет поддержку srcset). Возможно, пригодится информация из данной статьи: http://scripthere.com/how-to-lazy-load-images-in-wordpress-without-plugin/

После этого осталось активировать отложенную загрузку изображений, для этого необходимо в соответствующий файл вашей темы оформления (у нас это файл footer.php) внести такие строчки:


$('.lazy').lazy({
effect: "fadeIn",
effectTime: 100,
threshold: 0
});
Вносится они должны в теги script и только ПОСЛЕ успешной загрузки скрипта jquery.lazy.min.js


Комментарии:

    • Денис

    Возможно какая-то ошибка в регулярке, т.к. у меня после всех вышеописанных действий сайт ломается

      • AJIekceu4

      Этот код взят прямо из нашего файла functions.php в используемой теме оформления и он успешно функционирует. Смотрите и анализируйте логи, там будет точно написано в чем ошибка.

    • Александр

    а как же noscript ?

      • AJIekceu4

      Для нашего сайта это не актуально. Если в вашем случае необходимо обеспечить совместимость с пользователями у которых отключены скрипты, то в интернете есть инструкции и по такой реализации lazy load, просто нужно будет немного подправить код под ваш случай, согласно этим инструкциям.

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

Ваш e-mail не будет опубликован.

Напоминаем Вам, что Ваше сообщение будет опубликовано только после проверки администратором сайта. Обычно это занимает 1-2 рабочих дня.