Отложенная загрузка картинок в WordPress без плагинов: практическое руководство

Отложенная загрузка изображений (lazy load) — это техника, которая позволяет ускорить загрузку страниц сайта за счёт загрузки картинок только тогда, когда они становятся видимыми пользователю. В WordPress современные версии уже имеют встроенную поддержку lazy load, однако иногда требуется более тонкая настройка или реализация на старых версиях. В этой статье мы рассмотрим, как реализовать отложенную загрузку изображений без плагинов и с минимальными ресурсами.

Почему отложенная загрузка картинок важна для WordPress

Изображения часто занимают большую часть веса страницы, что замедляет её загрузку, особенно на мобильных устройствах и медленных соединениях. Применение lazy load снижает количество данных, загружаемых сразу, что улучшает опыт пользователя и показатели Core Web Vitals.

Кроме того, правильная реализация lazy load помогает снизить нагрузку на сервер и экономить трафик посетителей.

Встроенная поддержка lazy load в WordPress 5.5 и выше

Начиная с версии 5.5 WordPress автоматически добавляет атрибут loading="lazy" к тегам <img>. Это самый простой способ включить отложенную загрузку без плагинов.

Вы можете проверить это, просмотрев исходный код страницы — все изображения, вставленные стандартными средствами WordPress, будут содержать этот атрибут. Если по каким-то причинам вы хотите отключить или изменить это поведение, ниже есть примеры.

Отключение встроенного lazy load

Для отключения автоматического lazy load добавьте следующий код в файл functions.php вашей темы:

function wp7_disable_native_lazy_load() {
    return false;
}
add_filter('wp_lazy_loading_enabled', 'wp7_disable_native_lazy_load');

Этот фильтр полностью отключит автоматическую отложенную загрузку.

Реализация кастомной отложенной загрузки без плагинов

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

Шаг 1. Изменение атрибута src на data-src

Чтобы избежать мгновенной загрузки, заменим у изображений атрибут src на data-src, а в src укажем плейсхолдер — небольшой прозрачный gif или svg.

Добавьте в functions.php следующий код, который будет фильтровать вывод изображений в контенте:

function wp7_lazyload_images($content) {
    if (is_admin()) return $content;

    $placeholder = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';

    // Регулярное выражение для поиска тегов img с src
    $pattern = '/<img([^>]+)src=["\']([^"\']+)["\']([^>]*)>/i';

    $replacement = '<img$1src="' . $placeholder . '" data-src="$2"$3 loading="lazy">';

    $content = preg_replace($pattern, $replacement, $content);

    return $content;
}
add_filter('the_content', 'wp7_lazyload_images');

Теперь все изображения в постах будут иметь вместо src прозрачный пиксель, а реальный адрес будет в data-src.

Шаг 2. Добавление JavaScript для подгрузки изображений при появлении в зоне видимости

Создайте файл lazyload.js в папке вашей темы и добавьте туда следующий скрипт:

document.addEventListener('DOMContentLoaded', function() {
  var lazyImages = [].slice.call(document.querySelectorAll('img[data-src]'));

  if ('IntersectionObserver' in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.removeAttribute('data-src');
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Фолбек для старых браузеров - загружаем сразу
    lazyImages.forEach(function(lazyImage) {
      lazyImage.src = lazyImage.dataset.src;
      lazyImage.removeAttribute('data-src');
    });
  }
});

Подключите этот скрипт в functions.php темы:

function wp7_enqueue_lazyload_script() {
    wp_enqueue_script('wp7-lazyload', get_stylesheet_directory_uri() . '/lazyload.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'wp7_enqueue_lazyload_script');

Советы по оптимизации и совместимость

Если вы используете темы с собственными конструкторами или плагинами, которые выводят изображения нестандартно, проверьте, как они работают с этим кодом. Возможно, потребуется адаптировать фильтр или добавить исключения.

Также, для SEO важно, чтобы у изображений были атрибуты alt. Наш фильтр сохраняет остальные атрибуты без изменений, так что они не потеряются.

Использование плагина Clearfy Pro для расширенной оптимизации

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

Заключение

Отложенная загрузка изображений — простой, но мощный способ улучшить производительность сайта на WordPress. Встроенный lazy load уже помогает большинству сайтов, но при необходимости вы можете реализовать собственное решение, как показано выше. Это даст полный контроль и позволит адаптировать загрузку под ваши задачи.