Самый простой способ сделать в Вордпресс ленивую загрузку адаптивных изображений без использования плагинов от американского коллеги Адама Бали.
Если контент — король, тогда на втором месте производительность.
Ленивая загрузка — это метод отложенной загрузки ресурсов браузером до тех пор, когда они понадобятся. То есть, когда посетитель проскроллит страницу до того места, где находится изображение, тогда оно и загрузится. За счет этого уменьшается время начальной загрузки страницы и улучшается производительность сайта.
JavaScript
В примере будет использоваться библиотека lazysizes. Подробная инструкция по ее установке и использованию по ссылке на Гитхабе.
PHP
Предположим, что lazysizes уже установлен.
Изображения в Вордпресс обычно выводятся с помощью функции wp_get_attachment_image(). Нам доступен ряд свойств, которые позволяют подкорректировать вывод таким образом, чтобы срабатывала ленивая загрузка.
// getting the featured image id as an example $attachment_id = get_post_thumbnail_id( $post->ID ); $size = 'large'; echo wp_get_attachment_image( $attachment_id, $size, false, [ 'class' => 'lazyload', 'src' => '#', 'srcset' => '#', 'data-src' => wp_get_attachment_image_url( $attachment_id, $size ), 'data-srcset' => wp_get_attachment_image_srcset( $attachment_id, $size ) ]);
Этот код можно использовать в шаблонах. Можем пойти дальше и обернуть код в маленькую функцию.
function lazy_attachment($attachment_id, $size) { echo wp_get_attachment_image( $attachment_id, $size, false, [ 'class' => 'lazyload', 'src' => '#', 'srcset' => '#', 'data-src' => wp_get_attachment_image_url( $attachment_id, $size ), 'data-srcset' => wp_get_attachment_image_srcset( $attachment_id, $size ) ]); }
Помещаем код в файл functions.php активной темы, и теперь можем вызывать ленивую загрузку изображений с помощью одной строки кода.
lazy_attachment($attachment_id, $size);
Не забываем заменить $attachment_id и $ size нужными значениями. В примере используется большая (large) версия изображения.
По материалам adambalee.comlazy_attachment(get_the_post_thumbnail($post->ID, 'large');
Делаю сайты на Вордпресс с 2008 года, в том числе уникальные инструменты для решения сложных бизнес‑задач.
Подробнее