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

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

Зачем нужна автозагрузка изображений в WooCommerce

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

Внедрение lazy load помогает:

• Снизить время initial page load;
• Уменьшить нагрузку на сервер и клиент;
• Повысить рейтинг сайта в поисковых системах за счет улучшения Core Web Vitals;
• Улучшить пользовательский опыт, особенно на мобильных устройствах.

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

Самый простой способ внедрить lazy load — использовать специализированные плагины, которые адаптированы под WooCommerce и WordPress.

Плагин Clearfy Pro

Clearfy Pro — мощный плагин для оптимизации WordPress, который включает в себя функционал автозагрузки изображений. Он автоматически заменяет стандартные теги <img> на ленивые версии с использованием атрибута loading="lazy" или внедряет JavaScript-решения.

Преимущества Clearfy Pro:

• Интеграция с WooCommerce без конфликтов;
• Настройка исключений для важных изображений (например, логотипов);
• Дополнительные опции оптимизации, например, отключение emoji, ненужных скриптов, автозагрузка видео с OmniVideo.

Настройка в Clearfy Pro сводится к включению функции "Lazy Load Images" в разделе оптимизации.

Другие плагины

• a3 Lazy Load — бесплатный и простой плагин с поддержкой WooCommerce;
• WP Rocket — премиум-кэш-плагин с полноценной интеграцией lazy load;
• Imagify — оптимизация изображений с поддержкой ленивой загрузки.

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

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

Добавление атрибута loading="lazy" к изображениям товаров

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

function wpsell_add_lazy_loading_to_woocommerce_images( $html, $post_id ) {
    // Проверяем, что это изображение товара
    if ( false !== strpos( $html, '<img' ) ) {
        // Добавляем атрибут loading="lazy" если его нет
        if ( false === strpos( $html, 'loading="lazy"' ) ) {
            $html = str_replace( '<img', '<img loading="lazy"', $html );
        }
    }
    return $html;
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'wpsell_add_lazy_loading_to_woocommerce_images', 10, 2 );
add_filter( 'woocommerce_single_product_image_html', 'wpsell_add_lazy_loading_to_woocommerce_images', 10, 2 );
add_filter( 'woocommerce_gallery_image_html', 'wpsell_add_lazy_loading_to_woocommerce_images', 10, 2 );

Этот код добавляет стандартный атрибут ленивой загрузки к изображениям в галерее товара и основному изображению.

Ленивая загрузка изображений в описаниях товаров

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

function wpsell_add_lazy_loading_to_content_images( $content ) {
    return preg_replace('/<img(.*?)>/i', '<img loading="lazy" $1>', $content);
}
add_filter( 'the_content', 'wpsell_add_lazy_loading_to_content_images' );

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

Особенности и рекомендации при добавлении автозагрузки в WooCommerce

Несмотря на простоту, lazy load требует аккуратности:

• Не стоит применять автозагрузку к логотипам, иконкам и элементам интерфейса — их нужно грузить сразу;
• Тестируйте работу на мобильных устройствах и разных браузерах;
• Проверяйте корректность отображения галерей и всплывающих окон;
• Используйте инструменты аудита скорости (PageSpeed Insights, Lighthouse) для оценки результата.

Использование WPCommunity и WPRemark

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

Заключение

Добавление автозагрузки изображений в WooCommerce — эффективный способ повысить скорость загрузки и улучшить UX без существенных затрат времени. Вы можете выбрать легкий способ через плагины, например Clearfy Pro, или реализовать кастомный код, который добавит атрибуты loading="lazy" к изображениям товаров и описаний.

Главное — тщательно тестировать и следить за корректной работой на всех страницах, чтобы не ухудшить визуальное восприятие и функционал магазина.