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

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

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

Начина с версии WordPress 5.5 в ядро была встроена функция автозагрузки изображений. Она позволяет загружать картинки только тогда, когда пользователь прокручивает страницу и изображение становится видимым. Это значительно ускоряет первичную загрузку страницы и экономит трафик.

Однако бывают ситуации, когда автозагрузка мешает корректному отображению контента, вызывает баги в JS-плагинах или ухудшает UX, например, при работе с плагинами слайдеров, галерей или кастомных скриптов анимации.

В таких случаях требуется отключить автозагрузку для всего сайта или только для отдельных изображений или страниц.

Как отключить автозагрузку изображений программно в WordPress

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

Пример функции для отключения автозагрузки по всему сайту на уровне темы или плагина:

function wplesson_disable_lazy_loading( $default, $image, $context ) {
    return false; // Отключаем lazy load
}
add_filter( 'wp_lazy_loading_enabled', 'wplesson_disable_lazy_loading', 10, 3 );

Этот код нужно добавить в файл functions.php вашей темы или в собственный плагин. Он полностью отключит автозагрузку изображений.

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

Если нужно отключить lazy load только для определённых изображений, можно использовать фильтр с проверкой контекста или ID изображения:

function wplesson_conditional_lazy_loading( $default, $image, $context ) {
    // Отключить lazy load для изображений в контенте записей
    if ( $context === 'the_content' ) {
        return false;
    }
    return $default;
}
add_filter( 'wp_lazy_loading_enabled', 'wplesson_conditional_lazy_loading', 10, 3 );

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

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

Если вы предпочитаете не трогать код, в репозитории WordPress есть плагины, которые позволяют управлять lazy load:

• Disable Lazy Load — простой плагин, который полностью отключает автозагрузку на сайте.
• Clearfy Pro — многофункциональный оптимизатор, который позволяет отключить lazy load и решить другие задачи ускорения сайта. Подробнее на wpshop.ru.

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

Рекомендации по тестированию и отладке

После отключения автозагрузки важно проверить работу сайта на разных устройствах и браузерах. Обратите внимание на:

• Время загрузки страниц — сравните с включенным lazy load.
• Правильное отображение изображений, отсутствие «миганий» или задержек.
• Совместимость с плагинами слайдеров, галерей и кастомных скриптов.

Для мониторинга используйте инструменты, такие как Google PageSpeed Insights, GTmetrix, а также режим разработчика в браузерах.

Дополнительный пример: отключение lazy load только для изображений в шорткоде

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

function wplesson_shortcode_no_lazy_load( $atts ) {
    $image_url = esc_url( $atts['src'] ?? '' );
    if ( ! $image_url ) {
        return '';
    }
    // Выводим изображение без loading="lazy"
    return '<img src="' . $image_url . '" alt="" loading="eager" />';
}
add_shortcode( 'no_lazy_img', 'wplesson_shortcode_no_lazy_load' );

Теперь при использовании [no_lazy_img src="url"] изображение загрузится сразу, без отложенной загрузки.

Итог

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