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 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 et importés sur le système d’assets de Shopify ou 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
>
    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 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 toujours cet attribut. Sans poster, les visiteurs voient un rectangle gris vide jusqu’au chargement de la vidéo. L’image du poster doit être préchargée (ne pas utiliser de lazy loading dessus).

Article lié : Lazy Loading 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 performance sur les boutiques Shopify. Chacune d’entre elles charge plusieurs mégaoctets de scripts depuis les serveurs de YouTube/Vimeo, même si le visiteur ne regarde jamais la vidéo.

Le facade pattern : remplacez l’iframe par une miniature cliquable. Lorsque le visiteur clique pour lancer la lecture, 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 de la 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 par https://player.vimeo.com/video/ID?autoplay=1.

Article lié : Ajouter du contenu animé sur Shopify.

Article lié : Accélérer un thème Shopify.

Option plus simple : Utilisez le web component Lite YouTube Embed (une bibliothèque open-source populaire) qui implémente le facade pattern 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 autoplay comme élément décoratif derrière du texte) sont particulièrement gourmandes en ressources si elles se chargent pour chaque visiteur qui arrive sur la page.

Approche : charger la vidéo uniquement lorsque la section apparaît à l’écran (au 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 ceci avec <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) : la vidéo en arrière-plan dans le hero se charge de toute façon immédiatement — 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.

Article lié : 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 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