В том случае, если вы хотите ускорить загрузку вашего сайта работающего на 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 вашей темы оформления, добавить следующие строки:
############################Lazy load for images############################
function add_image_responsive_class($content) {
$pattern ="/<img\s*(?:class\s*\=\s*[\'\"](.*?)[\'\"].*?\s*|src\s*\=\s*[\'\"](.*?)[\'\"].*?\s*|alt\s*\=\s*[\'\"](.*?)[\'\"].*?\s*|title\s*\=\s*[\'\"](.*?)[\'\"].*?\s*|width\s*\=\s*[\'\"](.*?)[\'\"].*?\s*|height\s*\=\s*[\'\"](.*?)[\'\"].*?\s*)+.*?>/i";
$replacement = '<img class="$1 lazy" data-src="$2" alt="$3" title="$4" width="$5" height="$6" />';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'add_image_responsive_class');
############################Lazy load for images############################$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.ginw.ru/wp-content/uploads/2019/03/ss-500x93.jpg" alt="test" width="500" height="93" srcset="https://static.ginw.ru/wp-content/uploads/2019/03/ss-500x93.jpg 500w, https://static.ginw.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.ginw.ru/wp-content/uploads/2019/03/ss-500x93.jpg" alt="test" width="500" height="93"Если на вашем сайте вы активно используете srcset, то тогда вам надо будет самостоятельно модифицировать регулярное выражение. Чтобы формируемый тег img, помимо data-src, имел и правильно сформированный data-srcset (плагин jquery.lazy имеет поддержку srcset).
После этого осталось активировать отложенную загрузку изображений, для этого необходимо в соответствующий файл вашей темы оформления (у нас это файл footer.php) внести такие строчки:
$('.lazy').lazy({
effect: "fadeIn",
effectTime: 100,
threshold: 0
});
Вносится они должны в теги script и только ПОСЛЕ успешной загрузки скрипта jquery.lazy.min.js