Как использовать WebP в WooCommerce для мобильных устройств

Диагностика проблемы с изображениями в WooCommerce на мобильных

Основная проблема — медленная загрузка страниц товаров из-за тяжёлых изображений. WooCommerce по умолчанию не конвертирует изображения в WebP, что негативно влияет на производительность мобильных устройств с ограниченными ресурсами и медленным интернетом. Чтобы проверить, используются ли WebP-форматы, откройте страницу товара на мобильном устройстве и проверьте в инструментах разработчика браузера (вкладка Network) тип загружаемых изображений. Если все файлы имеют расширения JPEG или PNG, WebP не применяется.

Пошаговое решение: внедрение поддержки WebP в WooCommerce

1. Убедитесь, что сервер поддерживает WebP

Проверьте поддержку WebP на сервере, например, с помощью PHP-функции imagewebp(). Создайте и запустите простой скрипт:

<?php
if (function_exists('imagewebp')) {
    echo 'WebP поддерживается';
} else {
    echo 'WebP не поддерживается';
}
?>

Если поддержка отсутствует, обратитесь к хостеру или настройте сервер для поддержки WebP, например, через обновление GD или Imagick.

2. Автоматическая генерация WebP при загрузке изображений

Добавьте в functions.php вашей темы следующий код, который создаст WebP версии изображений при загрузке через медиа-библиотеку:

function convert_to_webp_on_upload($metadata, $attachment_id) {
    $upload_dir = wp_upload_dir();
    $file_path = $upload_dir['basedir'] . '/' . $metadata['file'];

    $image = wp_get_image_editor($file_path);
    if (!is_wp_error($image)) {
        $webp_path = preg_replace('/\.[^.]+$/', '.webp', $file_path);
        $image->save($webp_path, 'image/webp');
    }
    return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'convert_to_webp_on_upload', 10, 2);

3. Настройка вывода WebP изображений в WooCommerce

Чтобы WooCommerce отдавал WebP изображения на мобильных устройствах, используйте фильтр для замены URL изображений на WebP, если браузер поддерживает этот формат. Добавьте в functions.php:

function serve_webp_images_for_mobile($image_url) {
    if (strpos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false) {
        $webp_url = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $image_url);
        $webp_path = str_replace(wp_get_upload_dir()['baseurl'], wp_get_upload_dir()['basedir'], $webp_url);
        if (file_exists($webp_path)) {
            return $webp_url;
        }
    }
    return $image_url;
}

add_filter('woocommerce_single_product_image_thumbnail_html', function($html) {
    if (preg_match('/src="([^"]+)"/', $html, $matches)) {
        $webp_url = serve_webp_images_for_mobile($matches[1]);
        $html = str_replace($matches[1], $webp_url, $html);
    }
    return $html;
});

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

• Откройте страницу товара на мобильном устройстве.
• В инструментах разработчика браузера откройте вкладку Network и отфильтруйте по изображениям.
• Проверьте, что загружаются файлы с расширением .webp.
• Сравните скорость загрузки страницы до и после внедрения WebP — она должна улучшиться.

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

• WebP не создаются при загрузке: проверьте поддержку PHP GD или Imagick и права на запись в папку uploads.
• WebP не подставляются в WooCommerce: убедитесь, что проверка HTTP_ACCEPT корректна и что файлы WebP действительно существуют.
• Изображения не отображаются в некоторых браузерах: добавьте fallback на оригинальные форматы, как показано в коде.

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

• Храните WebP версии рядом с оригиналами, чтобы не создавать путаницу в структуре файлов.
• Используйте CDN с поддержкой WebP для ещё более быстрой доставки.
• Регулярно очищайте неиспользуемые изображения с помощью плагинов типа Clearfy Pro (https://wpshop.ru/plugins/clearfy?utm_source=wpmobile.ru&utm_medium=article&utm_campaign=kak-ispolzovat-webp-v-woocommerce-dlya-mobilnyh-ustrojstv), чтобы не перегружать сервер.

Сравнение подходов к внедрению WebP в WooCommerce