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

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

Магазины на WooCommerce часто содержат десятки и сотни товаров с большими изображениями. Это замедляет загрузку страниц и ухудшает пользовательский опыт. Отложенная загрузка (lazy loading) решает проблему — изображения загружаются только при прокрутке до них, что сокращает время первичной загрузки и снижает нагрузку на сервер.

Диагностика проблемы с загрузкой изображений товаров

• Проверьте скорость загрузки страницы с помощью Google PageSpeed Insights. Если блок "Изображения" показывает рекомендации по ленивой загрузке, это повод внедрять lazy loading.
• Откройте страницу товаров, прокручивайте вниз и смотрите в инструментах разработчика (Chrome DevTools) во вкладке Network, загружаются ли все изображения сразу или по мере появления в зоне видимости.
• Проверьте, поддерживает ли ваша тема и WooCommerce встроенную ленивую загрузку — с версии WordPress 5.5 и выше поддержка есть, но не всегда корректно работает с WooCommerce.

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

1. Использование встроенной поддержки WordPress (от 5.5)

По умолчанию WordPress добавляет атрибут loading="lazy" к изображениям <img>. Однако WooCommerce часто генерирует картинки через шаблоны, где этот атрибут отсутствует.

Чтобы добавить его, используйте фильтр wp_get_attachment_image_attributes:

add_filter('wp_get_attachment_image_attributes', function($attr, $attachment, $size) {
    if (!isset($attr['loading'])) {
        $attr['loading'] = 'lazy';
    }
    return $attr;
}, 10, 3);

2. Добавление lazy loading через JavaScript библиотеку Lozad.js

Если по каким-то причинам HTML-атрибуты не подходят (например, тема грузит изображения нестандартно), можно применить библиотеку Lozad.js.

Пошагово:

1. Загрузите и подключите скрипт в functions.php вашей темы:

function enqueue_lozad() {
    wp_enqueue_script('lozad', 'https://cdn.jsdelivr.net/npm/lozad@1.16.0/dist/lozad.min.js', [], null, true);
    wp_add_inline_script('lozad', "
        document.addEventListener('DOMContentLoaded', function() {
            const observer = lozad('.lozad', { rootMargin: '10px 0px', threshold: 0.1 });
            observer.observe();
        });
    ");
}
add_action('wp_enqueue_scripts', 'enqueue_lozad');

2. Измените вывод изображений товаров, чтобы вместо src использовать data-src и добавьте класс lozad. Например, переопределите шаблон WooCommerce content-product.php или используйте фильтр:

add_filter('woocommerce_get_product_thumbnail', function($image_html, $product) {
    $image_html = preg_replace('/src=\"(.*?)\"/', 'data-src="$1"', $image_html);
    $image_html = str_replace('<img', '<img class="lozad"', $image_html);
    return $image_html;
}, 10, 2);

Проверка результата после внедрения ленивой загрузки

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

Частые ошибки при внедрении ленивой загрузки в WooCommerce

• Отсутствие поддержки в теме: если тема жестко задаёт src для изображений без фильтров, ленивую загрузку не подключить без правки шаблонов.
• Конфликты с плагинами кеширования: иногда плагин кеширования минифицирует или кэширует скрипты таким образом, что lazy loading ломается. Проверяйте отключение кеша при тестах.
• SEO-проблемы: если изображения не загружаются для поисковых роботов, это негативно влияет на SEO. Используйте атрибут loading="lazy", а не только JS-решения.
• Ошибки JavaScript: при неправильном подключении скрипта lazy loading может не работать. Проверяйте консоль браузера.

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

• Используйте встроенный механизм WordPress loading="lazy" как первый шаг — он нативен и оптимизирован.
• Для сложных тем с нестандартным выводом применяйте библиотеку Lozad.js с серверным изменением img тегов.
• Тестируйте ленивую загрузку на всех основных браузерах, так как поддержка атрибута loading в <img> появилась относительно недавно.
• Включайте кеширование и CDN — ленивые изображения быстрее загружаются и меньше нагружают сервер.
• Избегайте ленивой загрузки для важного контента (например, логотипов и основных баннеров) — задавайте им loading="eager".

Сравнение методов реализации ленивой загрузки в WooCommerce