Как отключить ленивую загрузку для отдельных изображений в WordPress

Что такое ленивую загрузку изображений в WordPress и зачем её отключать для отдельных элементов

С выходом WordPress 5.5 в ядро была встроена функция ленивой загрузки (lazy load) изображений, благодаря которой картинки на страницах сайта загружаются только тогда, когда пользователь прокручивает страницу до них. Это значительно ускоряет загрузку страниц и снижает нагрузку на сервер.

Однако бывают ситуации, когда ленивую загрузку нужно отключить для отдельных изображений. Например, для логотипа, фоновых картинок, слайдеров или других элементов, которые должны отображаться сразу без задержки. В таких случаях отключение lazy load повышает UX и предотвращает визуальные баги.

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

Метод 1: Отключение ленивой загрузки через атрибут loading в HTML

Нативный HTML-атрибут loading управляет поведением ленивой загрузки. Значение lazy включает, а eager — отключает её для конкретного изображения.

В WordPress по умолчанию к <img> добавляется атрибут loading="lazy". Чтобы отключить ленивую загрузку для отдельного изображения, нужно заменить этот атрибут на loading="eager".

Пример использования в редакторе блока или классическом редакторе (HTML):

<img src="url_izobrazheniya.jpg" alt="Описание" loading="eager" />

Однако WordPress автоматически добавляет loading="lazy" при выводе the_content(), поэтому такой способ не всегда срабатывает.

Отключение lazy load для изображения в PHP через фильтр

Для более надежного результата используйте фильтр wp_lazy_loading_enabled, который позволяет отключать ленивую загрузку на уровне PHP.

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

function wponline_disable_lazy_load_for_specific_images( $default, $image, $context ) {
    // Проверяем, есть ли в атрибутах изображения класс для отключения lazy load
    if ( isset( $image['class'] ) && strpos( $image['class'], 'no-lazy' ) !== false ) {
        return false; // Отключаем ленивую загрузку для этого изображения
    }
    return $default;
}
add_filter( 'wp_lazy_loading_enabled', 'wponline_disable_lazy_load_for_specific_images', 10, 3 );

Теперь достаточно добавить класс no-lazy к изображению, чтобы оно не использовало ленивую загрузку:

<img src="url_izobrazheniya.jpg" class="no-lazy" alt="Описание" />

Это самый простой и гибкий способ selectively отключить lazy load без отключения функции глобально.

Метод 2: Отключение ленивой загрузки для фоновых изображений и через CSS

Фоновые изображения, заданные через CSS, не используют ленивую загрузку от WordPress, но иногда на сайтах применяются техники с тегом <img> для фоновых целей и lazy load вызывает проблемы.

Для фоновых картинок обычно ленивую загрузку не применяют, но если в вашем случае это происходит, можно просто убрать тег <img> и использовать CSS:

.background-image {
    background-image: url('url_izobrazheniya.jpg');
    background-size: cover;
    background-position: center;
}

Если же нужен именно тег <img>, используйте класс no-lazy из предыдущего метода.

Метод 3: Использование плагинов для управления ленивой загрузкой

Если вы хотите более гибко управлять ленивой загрузкой, можно использовать плагины с расширенными настройками:

• Clearfy Pro — позволяет отключать ленивую загрузку для разных типов контента и конкретных изображений. Подробнее — перейти на страницу плагина.
• WP Rocket — популярный плагин кеширования с расширенными настройками lazy load, позволяющий исключать изображения по CSS-селекторам.
• Disable Lazy Load — легковесный плагин для полного отключения ленивой загрузки или отдельных ее частей.

Использование плагинов удобно, если не хочется править код или нужно быстро применить изменения без программирования.

Как проверить, отключилась ли ленивую загрузку для конкретного изображения

После внесения изменений рекомендую проверить результат:

• Откройте страницу сайта в браузере.
• Найдите нужное изображение через инструменты разработчика (F12).
• Проверьте атрибут loading — для отключенных ленивых изображений должно быть loading="eager" или отсутствовать атрибут loading.
• Прокрутите страницу и убедитесь, что изображение загружается сразу, а не при скролле.

Заключение и рекомендации по оптимизации загрузки изображений

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

Рекомендации:

• Используйте класс no-lazy и фильтр wp_lazy_loading_enabled для точечного отключения.
• Для фоновых изображений отдавайте предпочтение CSS вместо тегов <img>.
• Если нужно массовое управление, воспользуйтесь плагинами Clearfy Pro или WP Rocket.
• Всегда проверяйте результат через DevTools и тестируйте на разных устройствах.

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