Оптимизация картинок WooCommerce для быстрой загрузки и SEO с помощью YoastSEO

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

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

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

• Проверьте размер файлов изображений (JPEG, PNG) в админке или через консоль (FTP).
• Оцените время загрузки страниц продуктов с помощью PageSpeed Insights или GTmetrix.
• Проверьте наличие alt-тегов и их релевантность в карточках товаров.
• Посмотрите, включена ли поддержка WebP или других современных форматов.

Пошаговое решение: оптимизация картинок WooCommerce с SEO-фокусом

1. Используйте WebP и адаптивные изображения

Добавьте поддержку WebP для уменьшения веса изображений без потери качества. WooCommerce с WordPress 5.8+ поддерживает адаптивные изображения, но WebP требует дополнительного плагина или настройки сервера.

Пример добавления WebP через плагин WebP Express:

add_filter('webp_express_rewrite_urls', function($urls) {
    return true;
});

Или используйте Clearfy Pro для автоматической конвертации и оптимизации изображений.

2. Автоматическое добавление alt-тегов через YoastSEO

WooCommerce не всегда заполняет alt-теги для вариативных товаров и изображений галереи. Чтобы исправить, добавим фильтр для генерации alt из названия товара:

add_filter('wp_get_attachment_image_attributes', function($attr, $attachment, $size) {
    if (empty($attr['alt'])) {
        $product = wc_get_product($attachment->post_parent);
        if ($product) {
            $attr['alt'] = $product->get_name();
        }
    }
    return $attr;
}, 10, 3);

3. Lazy Load и оптимизация загрузки картинок

В WordPress 5.5+ включён нативный lazy load, но для WooCommerce стоит проверить его корректность. Если возникают конфликты, используйте проверенный плагин с поддержкой WooCommerce, например, Lazy Load by WP Rocket.

4. Минификация и кэширование изображений

Настройте кэширование через плагины (WP Super Cache, W3 Total Cache) и включите минификацию CSS/JS, чтобы ускорить загрузку страниц с изображениями.

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

• Пройдите проверку через Google PageSpeed Insights – показатель скорости должен улучшиться по разделу «Изображения».
• Проверьте HTML-код товара – все изображения должны иметь корректные alt-теги.
• Проверьте загрузку страниц в режиме инкогнито, убедитесь в lazy load и отображении WebP (если поддерживается браузером).
• Отслеживайте позиции страниц в поиске через Google Search Console, фиксируя изменения трафика.

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

• Отсутствие alt-тегов у вариативных товаров: исправляется добавлением фильтра для автоматического заполнения (см. код выше).
• Конфликт плагинов lazy load: отключайте встроенный lazy load в WordPress через add_filter('wp_lazy_loading_enabled', '__return_false'); и используйте один плагин.
• Изображения большого размера: уменьшайте исходные файлы перед загрузкой или используйте автоматическую компрессию, например, через Clearfy.
• WebP не отображается: проверьте настройки сервера и плагина, убедитесь, что браузер поддерживает WebP.

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

• Регулярно обновляйте плагин YoastSEO и WooCommerce для совместимости с новыми функциями оптимизации.
• Ограничьте права доступа к папкам с изображениями, чтобы исключить несанкционированное изменение.
• Используйте CDN с поддержкой WebP для доставки изображений – ускорит загрузку для разных регионов.
• Оптимизируйте базу данных WordPress периодически, чтобы уменьшить overhead и улучшить отклик сайта.

Сравнение вариантов оптимизации изображений для WooCommerce