WooCommerce: использование хуков для динамической загрузки картинок в товарах

В чем проблема с загрузкой изображений в WooCommerce товарах

При большом каталоге товаров в WooCommerce страницы товаров могут грузиться медленно из-за большого количества изображений, особенно если у товара несколько галерейных картинок. Это негативно влияет на UX и SEO. Часто стандартная загрузка всех изображений сразу не оптимальна, особенно на мобильных устройствах.

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

Для диагностики используйте инструменты Chrome DevTools или аналогичные:

• Откройте вкладку Network и отфильтруйте по Images. Посмотрите, сколько и каких изображений загружается при открытии страницы товара.
• Обратите внимание на время загрузки каждого изображения и их размеры.
• Вкладка Performance поможет проанализировать, сколько времени занимает загрузка и рендеринг страницы.

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

Пошаговое решение: динамическая загрузка изображений через хуки WooCommerce

1. Отключаем стандартный вывод галереи WooCommerce

По умолчанию WooCommerce выводит галерею через хук woocommerce_before_single_product_summary. Чтобы заменить стандартный вывод, нужно снять этот хук:

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

2. Добавляем кастомный вывод с ленивой загрузкой (lazy loading)

Добавим функцию, которая выводит основное изображение и галерею с атрибутом loading="lazy" для всех картинок.

function custom_lazy_load_product_images() {
    global $product;
    $attachment_ids = $product->get_gallery_image_ids();
    $main_image_id = $product->get_image_id();

    if ( $main_image_id ) {
        echo wp_get_attachment_image( $main_image_id, 'woocommerce_single', false, array( 'loading' => 'eager' ) );
    }

    if ( $attachment_ids ) {
        echo '<div class="custom-product-gallery">';
        foreach ( $attachment_ids as $attachment_id ) {
            echo wp_get_attachment_image( $attachment_id, 'woocommerce_gallery_thumbnail', false, array( 'loading' => 'lazy' ) );
        }
        echo '</div>';
    }
}
add_action( 'woocommerce_before_single_product_summary', 'custom_lazy_load_product_images', 20 );

3. Подключаем скрипты для динамической подгрузки при скролле (опционально)

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

function enqueue_lazy_load_script() {
    wp_enqueue_script( 'lazy-load-images', get_stylesheet_directory_uri() . '/js/lazy-load-images.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_lazy_load_script' );

Пример содержимого lazy-load-images.js:

document.addEventListener('DOMContentLoaded', function() {
    const images = document.querySelectorAll('img[loading="lazy"]');
    if ('IntersectionObserver' in window) {
        let observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    if (img.dataset.src) {
                        img.src = img.dataset.src;
                        img.removeAttribute('data-src');
                    }
                    observer.unobserve(img);
                }
            });
        });
        images.forEach(img => {
            if (img.dataset.src) {
                observer.observe(img);
            }
        });
    }
});

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

• Откройте страницу товара и посмотрите в Network только основное изображение грузится сразу, остальные — при прокрутке.
• Проверьте наличие атрибута loading="lazy" у тега <img> у галерейных картинок.
• Проверьте консоль браузера на отсутствие ошибок JavaScript.
• Проанализируйте скорость загрузки страницы с помощью Google PageSpeed Insights или GTmetrix — должен быть заметный прирост.

Частые ошибки и как их исправить

• Ошибка: Картинки не грузятся при прокрутке.
  Причина: Не подключен скрипт lazy-load или неправильно назначен data-src.
  Решение: Проверьте правильность пути к скрипту, убедитесь, что у img задан data-src с URL изображения, а в src — плейсхолдер.
• Ошибка: На странице товара не отображается галерея.
  Причина: Удалён стандартный хук, но кастомный вывод не добавлен или содержит ошибки.
  Решение: Проверьте, что функция вывода галереи подключена к нужному хуку, и что $product доступен глобально.
• Ошибка: Замедление страницы не улучшилось.
  Причина: Проблема не в картинках или lazy loading не реализован корректно.
  Решение: Проведите дополнительную диагностику, может быть проблема в других ресурсах или настройках сервера.

Практические советы по безопасности и производительности

• Используйте wp_get_attachment_image() для автоматического выбора оптимального размера изображения из зарегистрированных размеров WordPress.
• Добавляйте атрибут loading="lazy" только для изображений, не видимых сразу пользователю, чтобы не ухудшать LCP (Largest Contentful Paint).
• Очистите кэш WooCommerce и браузера после внесения изменений, чтобы увидеть результат.
• Используйте CDN для изображений, чтобы снизить нагрузку на сервер и ускорить доставку.

Сравнение вариантов реализации динамической загрузки изображений