À retenir
- Les éléments vidéo natifs doivent utiliser
loading="lazy"etpreload="none"pour empêcher le téléchargement automatique des données vidéo.- Les intégrations YouTube et Vimeo utilisent un pattern de « façade » : afficher une miniature cliquable, ne charger l’iframe que lors du clic.
- Les vidéos en arrière-plan ne doivent se charger que lorsque la section devient visible au défilement, et non au chargement de la page.
- Les vidéos non optimisées sont l’une des principales causes de la lenteur des temps de chargement des pages Shopify.
La vidéo sur une boutique Shopify peut être captivante : démonstrations de produits, films de marque, tutoriels. Mais la vidéo est aussi l’un des actifs les plus lourds du web. Une seule intégration vidéo non optimisée peut ajouter des secondes à votre temps de chargement de page, même pour les visiteurs qui la font défiler sans la regarder.
Le lazy loading des vidéos 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
Non, si l'implémentation est correcte. Google gère très bien le contenu en lazy loading lorsque des techniques standards (le loading="lazy" natif, l'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 mineur. Évitez le lazy loading pour le contenu au-dessus de la ligne de flottaison.
Le loading="lazy" natif diffère le chargement jusqu'à ce que la vidéo soit proche du viewport. Le pattern de façade remplace entièrement l'iframe par une miniature jusqu'au clic : l'iframe et ses scripts ne se chargent que sur l'intention de l'utilisateur. Pour les intégrations YouTube/Vimeo, la 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 de façade aux intégrations YouTube sur tout le site") et il génère la section native pour votre thème.
Non. La vidéo hero est au-dessus de la ligne de flottaison et appliquer le lazy loading à un contenu que l'utilisateur verra immédiatement ne fait que retarder l'affichage. Utilisez preload="metadata" pour les vidéos hero afin de préparer la lecture sans télécharger le fichier complet. Le lazy loading est destiné aux vidéos en dessous de la ligne de flottaison.
Oui : différez l'iframe/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 autoplay soient en sourdine, quel que soit le moment où elles sont chargées. Le modèle : ne chargez pas du tout la vidéo avant qu'elle soit visible, puis lancez-la automatiquement en sourdine une fois chargée.
Ouvrez les DevTools de Chrome → onglet Network → filtrez par "media". Rechargez la page et observez ce qui se charge au rendu initial par rapport au défilement. Les vidéos correctement configurées en lazy loading n'apparaîtront pas dans l'onglet Network tant que vous ne ferez pas défiler la page près d'elles. PageSpeed Insights signale également les vidéos sans lazy loading avec l'avertissement "Différer les images hors écran".
