Настройка 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 разработчика.

Как активировать 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"

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

$('.lazy').lazy({
effect: "fadeIn",
effectTime: 100,
threshold: 0
});