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

Points à retenir

• Les éléments vidéo natifs doivent utiliser preload="none" avec un poster, et charger leur source à l’aide d’un Intersection Observer. L’attribut loading ne fonctionne que sur les images et les iframes.
• Les intégrations (embeds) YouTube et Vimeo utilisent un modèle de « façade » : afficher une miniature cliquable, puis charger l’iframe uniquement au 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 de chargement des pages Shopify.

Pour charger les vidéos en différé (lazy loading) sur Shopify, remplacez les iframes YouTube et Vimeo par une miniature cliquable (le pattern façade), ajoutez preload="none" et un poster aux balises <video> auto-hébergées, et ne chargez les vidéos en arrière-plan que lorsque leur section devient visible lors du défilement.

La vidéo est l’une des ressources les plus lourdes d’une page. Un embed qui se charge au chargement de la page ralentit celle-ci, même pour les visiteurs qui la font défiler sans la regarder.

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

Pour les fichiers vidéo auto-hébergés mis en ligne sur le système d’assets de Shopify ou sur un CDN, utilisez preload="none" et une image poster. L’attribut loading ne fonctionne que sur <img> et <iframe> ; les navigateurs l’ignorent sur <video>. Pour différer le fichier lui-même, chargez sa source avec un Intersection Observer (voir le code de la vidéo en arrière-plan ci-dessous).

<video
    src="{{ section.settings.video_url }}"
    poster="{{ section.settings.poster_image | image_url: width: 1200 }}"
    preload="none"
    muted
    playsinline
    loop
>
    Votre navigateur ne prend pas en charge la vidéo.
</video>

Attributs clés :

preload="none" — empêche le navigateur de télécharger des données vidéo tant que l’utilisateur n’interagit pas avec le lecteur. Sans cela, les navigateurs préchargent souvent les métadonnées de la vidéo ou même les premières secondes, ce qui gaspille de la bande passante.

poster — affiche une image fixe tant que la vidéo n’est pas chargée. Incluez-le toujours. Sans poster, les visiteurs voient un rectangle gris vide jusqu’au chargement de la vidéo. L’image poster doit être préchargée (ne faites pas de lazy loading dessus).

Pour les images, consultez comment charger des images en différé (lazy load) 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 performance sur les boutiques Shopify. Chaque embed charge les scripts de son lecteur depuis les serveurs de YouTube ou Vimeo (environ 1 Mo de scripts par embed YouTube), même si le visiteur ne regarde jamais la vidéo.

Le pattern façade : remplacez l’iframe par une image miniature cliquable. Quand le visiteur clique pour la lire, 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="Lire la vidéo">
        <!-- Icône Play SVG 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 mettez à jour l’URL d’intégration avec https://player.vimeo.com/video/ID?autoplay=1.

Option plus simple : utilisez le composant web Lite YouTube Embed (une bibliothèque open-source populaire) qui implémente le pattern façade avec un seul élément HTML.

Pour plus d’astuces de vitesse, consultez comment accélérer un thème Shopify.

Le lazy loading sur les vidéos en background

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

Approche : ne charger la vidéo que lorsque la section devient visible au défilement.

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 ceci avec <source data-src="..."> au lieu de <source src="..."> pour éviter que le navigateur ne télécharge la source vidéo avant que l’Intersection Observer ne se déclenche.

Pour la section hero (au-dessus de la ligne de flottaison) : la vidéo en arrière-plan dans le hero se charge immédiatement de toute façon, puisqu’elle est déjà visible. Dans ce cas, utilisez preload="metadata" au lieu de preload="none" pour que le navigateur se prépare à lire la vidéo rapidement.

Pour les vidéos de produits, consultez comment 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 (texture d’un tissu, produit en mouvement, un processus)
• Elle est bien produite (une vidéo de mauvaise qualité nuit à la confiance)
• Vous avez mis en place le lazy loading (sinon le coût en performance est trop élevé)

La vidéo ne vaut pas le coup quand :

• Elle est purement décorative sans aucun but lié au produit
• Elle se lance en autoplay avec du son (agaçant, et la plupart des navigateurs la bloquent de toute façon)
• Le même message pourrait être passé plus efficacement avec une bonne photo

Envisagez des alternatives aux GIFs. Pour les petits clips 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, pour un rendu identique.

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 intégrations vidéo (embeds) déclenchent souvent :

• « Réduire les ressources JavaScript inutilisées » — à cause du chargement de l’API de YouTube
• « Évitez les charges utiles de réseau trop volumineuses » — si la vidéo se charge au chargement de la page
• « Chargez les ressources tierces de manière différée avec des façades » — signale les embeds YouTube et Vimeo

Après avoir implémenté le pattern façade, relancez PageSpeed : vous devriez voir des améliorations tant sur le score que sur le Total Blocking Time.

FAQ