Как настроить отложенный запуск видео в WooCommerce

Проблема: видео в товарах WooCommerce замедляют загрузку страниц

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

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

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

• Откройте Chrome DevTools (F12) и перейдите во вкладку Network.
• Обновите страницу товара.
• Отфильтруйте по типу Media и обратите внимание на время загрузки видеофайлов.
• Перейдите в вкладку Performance и проанализируйте, сколько времени занимает загрузка и инициализация видеоплеера.

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

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

1. Заменяем стандартный встраиваемый видеоплеер на плейсхолдер

Вместо прямой вставки тега <video> или iframe с видео используйте изображения-превью с кнопкой запуска. При клике скрипт подгружает и запускает видео.

function omni_add_lazy_video_to_product() {
    global $product;
    $video_url = get_post_meta( $product->get_id(), '_product_video_url', true );
    if ( ! $video_url ) {
        return;
    }
    $thumbnail = get_post_meta( $product->get_id(), '_product_video_thumbnail', true );
    if ( ! $thumbnail ) {
        $thumbnail = wc_placeholder_img_src();
    }
    echo '<div class="omni-lazy-video" data-video-url="' . esc_url( $video_url ) . '">';
    echo '<img src="' . esc_url( $thumbnail ) . '" alt="Видео товара" class="omni-lazy-video-thumb" />';
    echo '<button class="omni-lazy-video-play" aria-label="Запустить видео">▶</button>';
    echo '</div>';
}
add_action( 'woocommerce_before_single_product_summary', 'omni_add_lazy_video_to_product', 20 );

2. Добавляем JavaScript для загрузки видео по клику

Создайте JS-файл lazy-video.js в вашей теме или плагине и подключите его:

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.omni-lazy-video').forEach(function(container) {
    var btn = container.querySelector('.omni-lazy-video-play');
    btn.addEventListener('click', function() {
      var videoUrl = container.getAttribute('data-video-url');
      var video = document.createElement('video');
      video.src = videoUrl;
      video.setAttribute('controls', '');
      video.setAttribute('autoplay', '');
      video.style.width = '100%';
      container.innerHTML = '';
      container.appendChild(video);
    });
  });
});

Подключение в functions.php:

function omni_enqueue_lazy_video_script() {
    if ( is_product() ) {
        wp_enqueue_script( 'omni-lazy-video', get_stylesheet_directory_uri() . '/js/lazy-video.js', array(), '1.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'omni_enqueue_lazy_video_script' );

3. Управление видео URL и миниатюрой в админке

Добавьте метаполя для видео URL и миниатюры для продуктов с помощью плагина Advanced Custom Fields или вручную:

function omni_add_video_custom_fields() {
    woocommerce_wp_text_input( array(
        'id' => '_product_video_url',
        'label' => __('URL видео', 'woocommerce'),
        'desc_tip' => true,
        'description' => __('Введите URL видео (MP4 или YouTube embed)', 'woocommerce'),
        'type' => 'url',
    ) );
    woocommerce_wp_text_input( array(
        'id' => '_product_video_thumbnail',
        'label' => __('URL миниатюры видео', 'woocommerce'),
        'desc_tip' => true,
        'description' => __('Введите URL изображения-превью видео', 'woocommerce'),
        'type' => 'url',
    ) );
}
add_action( 'woocommerce_product_options_general_product_data', 'omni_add_video_custom_fields' );

function omni_save_video_custom_fields( $post_id ) {
    $video_url = isset( $_POST['_product_video_url'] ) ? esc_url_raw( $_POST['_product_video_url'] ) : '';
    update_post_meta( $post_id, '_product_video_url', $video_url );
    $thumbnail_url = isset( $_POST['_product_video_thumbnail'] ) ? esc_url_raw( $_POST['_product_video_thumbnail'] ) : '';
    update_post_meta( $post_id, '_product_video_thumbnail', $thumbnail_url );
}
add_action( 'woocommerce_process_product_meta', 'omni_save_video_custom_fields' );

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

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

Частые ошибки при реализации отложенного запуска видео и как их исправить

• Видео не загружается после клика: проверьте правильность URL видео и наличие CORS-заголовков для внешних ресурсов.
• Видео проигрывается без звука или не автозапускается: современные браузеры ограничивают автозапуск видео со звуком. Добавьте атрибут muted для автозапуска без звука, либо запускайте видео после пользовательского действия.
• Кнопка запуска не видна: проверьте стили CSS, убедитесь, что кнопка не скрыта и имеет достаточный размер для клика.
• Видео запускается сразу при загрузке страницы: убедитесь, что видео тег вставляется только после клика, а не статически в разметке.

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

• Используйте HTTPS для видео URL, чтобы избежать предупреждений браузера о небезопасном контенте.
• Оптимизируйте миниатюры для быстрого отображения — используйте форматы WebP или JPEG с сжатием.
• Если используете внешние видео (YouTube, Vimeo), применяйте их API для ленивой загрузки iframe (например, с помощью loading="lazy" или плагинов).
• Кешируйте страницы и ресурсы, но исключите видеофайлы из кэша, чтобы избежать проблем с загрузкой после клика.
• Проверяйте аудиторию: для мобильных устройств можно отключить автозапуск видео или показывать только превью, чтобы снизить трафик.

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