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 de votre page d’accueil dans PageSpeed Insights. Les vidéos intégrées déclenchent souvent :

• “Réduire le JavaScript inutilisé” — dû au chargement de l’API YouTube
• “Éviter les charges utiles de réseau trop volumineuses” — si la vidéo se charge au chargement de la page
• “Différer les images hors écran” — si l’affiche (poster) de la vidéo ou sa source (src) n’est pas en lazy loading

Après avoir implémenté le pattern façade, relancez PageSpeed — vous devriez voir des améliorations à la fois sur votre score et sur votre Total Blocking Time.

FAQ

Le lazy loading des vidéos va-t-il nuire à mon SEO Shopify ?

Non, avec une bonne implémentation. Google gère très bien le contenu en lazy loading lorsque des techniques standard (loading="lazy" natif, Intersection Observer avec des seuils raisonnables) sont utilisées. Le gain SEO vient de l’amélioration de la vitesse — les scores Core Web Vitals s’améliorent, ce qui est un signal de classement léger. Évitez le lazy loading du contenu au-dessus de la ligne de flottaison.

Quelle est la différence entre le pattern façade et le lazy loading natif ?

Le loading="lazy" natif diffère le chargement jusqu’à ce que la vidéo soit proche du viewport. Le pattern façade remplace entièrement l’iframe par une miniature jusqu’à ce qu’on clique dessus — l’iframe et ses scripts ne se chargent que sur l’intention de l’utilisateur. Pour les vidéos YouTube/Vimeo, le pattern façade permet d’économiser beaucoup plus de poids (plus de 200 Ko de scripts) que le lazy loading natif. La façon la plus propre de l’ajouter sans écrire le JavaScript vous-même : décrivez ce que vous voulez à Fudge (“appliquer le pattern façade aux vidéos YouTube sur tout le site”) et il génère la section de façon native pour votre thème.

Dois-je mettre la vidéo hero en lazy loading ?

Non. La vidéo hero est au-dessus de la ligne de flottaison et le lazy loading d’un contenu que l’utilisateur va voir immédiatement crée juste un retard de l’affichage. Utilisez preload="metadata" pour les vidéos hero afin de préparer la lecture sans avoir à télécharger tout le fichier. Le lazy loading est fait pour les vidéos situées en dessous de la ligne de flottaison.

Les vidéos en autoplay peuvent-elles quand même être en lazy loading ?

Oui — différez l’iframe/la vidéo jusqu’à ce que la section entre dans le viewport via l’Intersection Observer, puis déclenchez l’autoplay. Les navigateurs exigent que les vidéos en lecture automatique soient en silencieux, peu importe à quel moment elles se chargent. L’idée : ne chargez pas du tout la vidéo tant qu’elle n’est pas visible, puis lancez-la automatiquement en muet une fois chargée.

Comment vérifier que les vidéos sont bien en lazy loading ?

Ouvrez les DevTools de Chrome → Onglet Network (Réseau) → filtrez par “media”. Rechargez la page et regardez ce qui se charge au rendu initial par rapport au scroll. Les vidéos correctement en lazy loading n’apparaîtront pas dans l’onglet Network tant que vous ne scrollez pas à côté. PageSpeed Insights signale également les vidéos qui ne sont pas en lazy loading en indiquant “Différer les images hors écran”.