Оптимизация загрузки картинок в WordPress с помощью Lazy Load и плагинов

Автор: Марина Новикова | Опубликовано: 15.01.2026

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

Что такое Lazy Load и зачем он нужен

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

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

Как работает Lazy Load в WordPress: базовые принципы

Принцип работы прост:

Изображения на странице изначально подгружаются с минимальным весом или placeholder-ом.
При прокрутке страницы до определённого места, скрипт загружает полную версию изображения.
Визуально пользователь видит, что картинка появляется в момент, когда она становится видимой в окне браузера.

Для реализации этого можно использовать как собственные скрипты, так и готовые решения.

Реализация Lazy Load на WordPress с помощью кода

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

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

function wpsolution_add_lazy_loading_attr( $content ) {
    return str_replace( '<img', '<img loading="lazy"', $content );
}
add_filter( 'the_content', 'wpsolution_add_lazy_loading_attr' );

Этот код добавит loading="lazy" ко всем картинкам, которые выводятся через the_content(). Это самый простой способ внедрить Lazy Load без сторонних плагинов.

Улучшение: исключение критичных изображений

Иногда нужно исключить из Lazy Load важные изображения, например, логотип или первые изображения в статье, чтобы они загружались сразу. Для этого можно добавить проверку по классу:

function wpsolution_add_lazy_loading_attr_exclude( $content ) {
    return preg_replace_callback(
        '/<img(.*?)>/i',
        function( $matches ) {
            if ( strpos( $matches[1], 'no-lazy' ) !== false ) {
                return $matches[0];
            }
            if ( strpos( $matches[1], 'loading=' ) === false ) {
                return '<img loading="lazy"' . $matches[1] . '>';
            }
            return $matches[0];
        },
        $content
    );
}
add_filter( 'the_content', 'wpsolution_add_lazy_loading_attr_exclude' );

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

Использование плагинов для Lazy Load в WordPress

Если вы хотите получить более продвинутую функциональность и не заниматься кодом, есть несколько популярных и проверенных плагинов:

1. a3 Lazy Load

Очень популярный плагин, который автоматически добавляет Lazy Load ко всем изображениям, iframe и видео. Имеет простые настройки, позволяет исключать отдельные элементы, работает с мобильными устройствами.

Плюсы:

Полная поддержка WooCommerce и других популярных плагинов
Минимальное влияние на скорость
Поддержка мультимедиа

Скачать и настроить можно на официальной странице плагина.

2. Lazy Load by WP Rocket

Лёгкий плагин от разработчиков популярного кеширующего решения WP Rocket. Работает быстро, без лишних настроек, подходит для тех, кто хочет просто включить Lazy Load.

3. Smush

Smush — это комплексный плагин для оптимизации изображений, в том числе умеет включать Lazy Load. Если вы хотите одновременно сжать изображения и включить Lazy Load, это хороший выбор.

Советы по улучшению производительности с Lazy Load

Lazy Load — не панацея, а часть комплексной оптимизации. Вот несколько рекомендаций:

Используйте современные форматы изображений: WebP или AVIF значительно уменьшают вес.
Оптимизируйте размеры картинок: загружайте изображения, подходящие по размеру под разные устройства с помощью srcset.
Кешируйте страницу: кеширование совместно с Lazy Load ускорит время отклика.
Отслеживайте метрики: с помощью Google PageSpeed Insights проверяйте, насколько эффективно работает отложенная загрузка.

Пример комплексного решения: Lazy Load с фильтром и плагином Clearfy Pro

Если вы используете плагин Clearfy Pro, то можете включить Lazy Load в настройках плагина, а также дополнительно добавить собственный фильтр, чтобы исключить с Lazy Load изображения в виджетах и каруселях:

function wpsolution_clearfy_exclude_lazyload( $excluded_classes ) {
    $excluded_classes[] = 'widget';
    $excluded_classes[] = 'carousel';
    return $excluded_classes;
}
add_filter( 'cfp_lazyload_excluded_classes', 'wpsolution_clearfy_exclude_lazyload' );

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

Итоги

Lazy Load — обязательный инструмент для каждого современного сайта на WordPress, стремящегося к быстрой загрузке и лучшему SEO. Вы можете реализовать его с помощью простого кода или использовать готовые плагины вроде a3 Lazy Load или Clearfy Pro. Главное — не забывайте тестировать и контролировать, чтобы Lazy Load не мешал работе вашего сайта.