Ленивая загрузка изображений в Вордпресс без плагинов

Если контент — король, тогда на втором месте производительность.

Ленивая загрузка — это метод отложенной загрузки ресурсов браузером до тех пор, когда они понадобятся. То есть, когда посетитель проскроллит страницу до того места, где находится изображение, тогда оно и загрузится. За счет этого уменьшается время начальной загрузки страницы и улучшается производительность сайта.

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) версия изображения.

lazy_attachment(get_the_post_thumbnail($post->ID, 'large');