Comment Lazy Loader des Vidéos sur Shopify (2026)

À retenir

• Les éléments vidéo natifs doivent utiliser loading="lazy" et preload="none" pour empêcher le téléchargement automatique des données vidéo.
• Les embeds YouTube et Vimeo utilisent un pattern “façade” — afficher une miniature cliquable, puis charger l’iframe seulement au moment du clic.
• Les vidéos en background ne doivent être chargées que lorsque la section apparaît à l’écran, et non au chargement initial de la page.
• Les vidéos non optimisées sont l’une des causes principales des temps de chargement trop lents sur Shopify.

La vidéo sur une boutique Shopify peut être très convaincante : démos de produits, films de marque, tutoriels. Mais la vidéo est aussi l’un des assets les plus lourds sur le web. Un seul embed vidéo non optimisé peut rajouter plusieurs secondes à votre temps de chargement, même pour les visiteurs qui ne font que scroller sans la regarder.

Le lazy loading vidéo est la solution.

Comment ajouter le lazy loading aux vidéos natives sur Shopify

Pour les fichiers vidéo auto-hébergés uploadés dans le système d’assets de Shopify ou sur un CDN, utilisez les attributs natifs de lazy loading du HTML.

<video
  src="{{ section.settings.video_url }}"
  poster="{{ section.settings.poster_image | img_url: '1200x' }}"
  loading="lazy"
  preload="none"
  muted
  playsinline
  loop
>
  Aïe, votre navigateur ne supporte pas la vidéo.
</video>

Attributs clés :

loading="lazy" — indique au navigateur de différer le chargement de la source de la vidéo jusqu’à ce qu’elle soit nécessaire.

preload="none" — empêche le navigateur de télécharger la moindre donnée vidéo avant que l’utilisateur n’interagisse avec le player. Sans ça, les navigateurs vont souvent précharger les métadonnées de la vidéo ou même les premières secondes, gaspillant ainsi de la bande passante.

poster — affiche une image fixe tant que la vidéo n’est pas chargée. Ajoutez-le à chaque fois. Sans ça, les visiteurs voient un rectangle gris vide jusqu’à ce que la vidéo se charge. L’image de l’attribut poster doit être préchargée (ne la mettez pas en lazy loading).

À lire aussi : Lazy Loader des Images sur Shopify.

Le pattern façade pour les embeds YouTube et Vimeo

Les iframes YouTube et Vimeo font partie des plus gros problèmes de performances sur les boutiques Shopify. Chacune charge des mégaoctets de scripts depuis les serveurs de YouTube/Vimeo, même si le visiteur ne lance jamais la vidéo.

Le pattern façade : remplacez l’iframe par une miniature (thumbnail) cliquable. Quand le visiteur clique pour la lancer, remplacez l’image par l’iframe réelle.

Voici une implémentation de base :

<div class="video-facade" data-video-id="VOTRE_ID_YOUTUBE">
  <img
    src="https://img.youtube.com/vi/VOTRE_ID_YOUTUBE/maxresdefault.jpg"
    alt="Miniature vidéo"
    loading="lazy"
    style="width:100%; cursor:pointer;"
  />
  <button class="video-play-btn" aria-label="Lancer la vidéo">
    <!-- Insérez l'icône SVG Play ici -->
  </button>
</div>

document.querySelectorAll('.video-facade').forEach(function(facade) {
  facade.addEventListener('click', function() {
    var videoId = facade.dataset.videoId;
    var iframe = document.createElement('iframe');
    iframe.src = 'https://www.youtube.com/embed/' + videoId + '?autoplay=1';
    iframe.allow = 'autoplay; encrypted-media';
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    facade.replaceWith(iframe);
  });
});

Pour Vimeo : remplacez img.youtube.com/vi/ID/maxresdefault.jpg par l’URL d’une miniature Vimeo et modifiez l’URL de l’embed par https://player.vimeo.com/video/ID?autoplay=1.

À lire aussi : Ajouter du Contenu Animé sur Shopify.

À lire aussi : Accélérer un Thème Shopify.

Option plus simple : Utilisez le web component Lite YouTube Embed (une librairie open-source populaire) qui implémente le pattern façade avec un seul élément HTML.

Le lazy loading sur les vidéos en background

Les vidéos en arrière-plan (celles qui se lancent en auto-play comme élément décoratif derrière du texte) sont particulièrement gourmandes si elles se chargent pour chaque visiteur qui atterrit sur la page.

L’approche : charger la vidéo uniquement lorsque la section apparaît à l’écran lors du scroll.

var videoSection = document.querySelector('.hero-video-section');
var videoEl = videoSection.querySelector('video');

var observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.isIntersecting) {
      // Charger la vidéo
      var source = videoEl.querySelector('source');
      if (source && source.dataset.src) {
        source.src = source.dataset.src;
        videoEl.load();
        videoEl.play();
      }
      observer.disconnect();
    }
  });
}, { threshold: 0.1 });

observer.observe(videoSection);

Utilisez cette méthode avec un <source data-src="..."> au lieu de <source src="..."> pour éviter que le navigateur ne télécharge la source de la vidéo avant que l’Intersection Observer ne se déclenche.

Pour la section hero (au-dessus de la ligne de flottaison) : une vidéo en fond dans le hero se charge immédiatement de toute manière, puisqu’elle est déjà visible. Dans ce cas, utilisez preload="metadata" plutôt que preload="none" pour que le navigateur se prépare à lancer la vidéo rapidement.

À lire aussi : Ajouter une Vidéo à une Galerie de Produits Shopify.

Devriez-vous vraiment utiliser la vidéo sur Shopify ?

La vidéo vaut le coup quand :

• Elle montre quelque chose qui ne peut pas être transmis par une photo (la texture d’un tissu, un produit en mouvement, un processus)
• Elle est bien produite (une vidéo de mauvaise qualité nuit à la confiance)
• Vous avez implémenté le lazy loading (sinon le coût en web perf est trop élevé)

La vidéo ne vaut pas le coup quand :

• Elle est purement décorative, sans véritable lien avec le produit
• Elle se lance en auto-play avec du son (c’est pénible, et la plupart des navigateurs vont le bloquer de toute façon)
• Le même message pourrait être passé plus efficacement avec une belle photo

Pensez aux alternatives des GIFs. Pour des clips courts tournant en boucle (2 à 5 secondes), une vidéo MP4 avec autoplay muted loop est généralement 60 à 80 % plus légère qu’un GIF équivalent, tout en ayant exactement le même rendu.

Comment vérifier l’impact des vidéos sur vos performances

Passez l’URL de votre produit ou page d’accueil dans PageSpeed Insights. Les embeds vidéo vont souvent déclencher ceci :

• “Réduire les ressources JavaScript inutilisées” — dû au chargement de l’API de YouTube
• “Éviter de très grandes charges utiles de réseau” — si la vidéo se charge avec le reste de la page
• “Différer le chargement des images hors écran” — si le poster ou la src de la vidéo ne sont pas en lazy loading

Après avoir mis en place le pattern façade, relancez PageSpeed — vous devriez constater de meilleures performances sur votre score et votre Total Blocking Time (TBT).