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

Автор: Валерия Мельникова | Опубликовано: 23.01.2026

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

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

GeneratePress — это легкая тема, оптимизированная под скорость, но если на сайте много изображений, они могут замедлять загрузку страниц. Отложенная загрузка позволяет загружать изображения только тогда, когда они становятся видимыми в окне браузера пользователя. Это снижает нагрузку на сервер и ускоряет отображение контента.

В современном WordPress отложенная загрузка встроена по умолчанию начиная с версии 5.5, но тема GeneratePress и используемые плагины могут влиять на работу этой функции. Иногда нужно вручную улучшить или настроить lazy load, особенно если используются кастомные блоки или нестандартные изображения.

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

Использование плагинов для lazy load в GeneratePress

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

1. WP Rocket (https://wpshop.ru/plugin/wp-rocket/?utm_source=generatepress.ru&utm_medium=article&utm_campaign=kak-dobavit-otlozhennuyu-zagruzku-kartinok-v-generatepress)

WP Rocket — мощный плагин для кэширования и оптимизации, который включает эффективную функцию lazy load для изображений, iframe и видео. После активации просто включите lazy load в настройках, и плагин автоматически обработает все изображения.

2. a3 Lazy Load (https://wpshop.ru/plugin/a3-lazy-load/?utm_source=generatepress.ru&utm_medium=article&utm_campaign=kak-dobavit-otlozhennuyu-zagruzku-kartinok-v-generatepress)

Этот плагин бесплатный и легкий, отлично подходит для сайтов на GeneratePress. Он добавляет lazy load к изображениям, iframe и видео, работает с Gutenberg и классическими редакторами.

Преимущество в том, что плагин не конфликтует с темой и минимален по настройкам.

3. Clearfy Pro для расширенной оптимизации (https://wpshop.ru/plugin/clearfy-pro/?utm_source=generatepress.ru&utm_medium=article&utm_campaign=kak-dobavit-otlozhennuyu-zagruzku-kartinok-v-generatepress)

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

Реализация отложенной загрузки картинок в GeneratePress с помощью кода

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

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

Пример функции для добавления lazy load в GeneratePress

function generatepress_add_lazy_load_to_images($content) {
    // Ищем все теги img и добавляем атрибут loading="lazy" если его нет
    if (false === strpos($content, 'loading="lazy"')) {
        $content = preg_replace('/<img(.*?)>/i', '<img loading="lazy"$1>', $content);
    }
    return $content;
}
add_filter('the_content', 'generatepress_add_lazy_load_to_images');

Эта функция проверяет контент поста и добавляет атрибут loading="lazy" к тегам <img>, если его там нет. Она подключается через фильтр the_content, что позволяет не вмешиваться в ядро темы.

Как добавить placeholder для изображений

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

function generatepress_lazy_load_with_placeholder($content) {
    if (false === strpos($content, 'loading="lazy"')) {
        $content = preg_replace_callback('/<img(.*?)src="(.*?)"(.*?)>/i', function($matches) {
            $img_tag = $matches[0];
            $src = $matches[2];
            $placeholder = 'data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQv///wAAACH5BAEAAAUALAAAAAAQABAAAANNaLrc/jDKSau9OOvNu/9gKI5kaZ5oqq5s68n8AQA7';
            // Заменяем src на placeholder и добавляем data-src с оригинальным src
            $new_img = str_replace('src="'.$src.'"', 'src="'.$placeholder.'" data-src="'.$src.'" loading="lazy"', $img_tag);
            return $new_img;
        }, $content);
    }
    return $content;
}
add_filter('the_content', 'generatepress_lazy_load_with_placeholder');

Этот код заменяет реальный src изображения на маленький прозрачный gif и добавляет data-src с реальным адресом, а также атрибут loading="lazy". Для работы такой техники потребуется подключить JavaScript, который подгружает настоящие изображения при прокрутке.

JavaScript для подгрузки изображений с data-src

Вот пример простого скрипта, который можно добавить в footer GeneratePress через кастомный код или плагин:

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.getAttribute('data-src');
                    lazyImage.removeAttribute('data-src');
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });

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

Этот скрипт использует Intersection Observer API, чтобы подгружать изображения только когда они появляются в зоне видимости пользователя, что значительно снижает первоначальную нагрузку.

Особенности работы с GeneratePress и Gutenberg

GeneratePress отлично интегрируется с Gutenberg, поэтому любые блоки с изображениями тоже можно оптимизировать с помощью lazy load.

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

function generatepress_lazy_load_for_blocks($block_content, $block) {
    if (isset($block['blockName']) && strpos($block['blockName'], 'image') !== false) {
        $block_content = generatepress_add_lazy_load_to_images($block_content);
    }
    return $block_content;
}
add_filter('render_block', 'generatepress_lazy_load_for_blocks', 10, 2);

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

Заключение по теме

Отложенная загрузка — мощный инструмент оптимизации, и в GeneratePress его можно реализовать как с помощью плагинов, так и собственным кодом. Для большинства сайтов подойдет стандартная реализация WordPress или плагин a3 Lazy Load. Если нужна тонкая настройка и placeholder, используйте кастомный код и JavaScript.

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