Lazy loading vidéo Shopify : video_tag reporte le téléchargement hors écran

Parce qu’une vidéo domine le poids de la page dès qu’elle est présente. D’après le crawl HTTP Archive d’avril 2026 cité par Performance @ Shopify (environ 670 000 pages mobiles), environ 20 % des vitrines Shopify affichent un élément <video> sur la page d’accueil. Chez la boutique médiane qui en sert une, la vidéo pèse 12,5 Mo, soit 75 % du poids total de la page mobile. Plus de 80 000 pages mobiles envoient plus de 5 Mo de vidéo.

Ce poids a un coût mesurable, mais pas celui que beaucoup de marchands surveillent en premier. La métrique la plus touchée est le Speed Index (SI), pas le Largest Contentful Paint (LCP). Les pages avec plus de 5 Mo de vidéo ont un Speed Index médian de 14,6 s sur mobile, contre 7,2 s sans vidéo.

Chrome a ajouté le support natif de loading="lazy" sur les éléments <video> (Chrome 148, correctif important dans Chrome 150). Shopify a branché ce comportement sur le filtre Liquid video_tag : comme image_tag le fait depuis des années pour les images, video_tag pose automatiquement loading="lazy" sur les vidéos des sections plus bas dans la page.

Si votre thème utilise video_tag et ne définit pas lui-même l’attribut loading, les vidéos sous la ligne de flottaison ne se téléchargent qu’à l’approche du défilement. Aucune modification de thème n’est requise. Le déploiement plateforme date de juillet 2026 ; Performance @ Shopify (Dan Gayle, 13 août 2026) en publie les premiers résultats de monitoring utilisateur réel.

Le gain principal est un Speed Index plus sain : moins de fichiers multi-mégaoctets qui concurrencent le réseau au chargement. Sur environ 20 % des pages avec vidéo où la vidéo est l’élément LCP, Shopify note un second bénéfice : différer les vidéos hors écran libère de la bande passante pour que la vidéo LCP du premier écran peigne son premier frame plus tôt.

Le support navigateur se dégrade proprement. loading="lazy" sur <video> est récent : Chrome le prend en charge de façon fiable à partir de la version 150 (après le correctif du bug signalé depuis Chrome 148), les autres navigateurs suivent. Ceux qui n’interprètent pas l’attribut l’ignorent et chargent la vidéo comme avant. Aucune casse ni polyfill à écrire : le déploiement plateforme a pu partir pour tout le monde en une fois.

Selon la spécification HTML, une vidéo en lazy loading ne bloque plus l’événement window load. Les scripts et comportements qui attendent load peuvent donc s’exécuter plus tôt. L’autoplay continue de fonctionner : une vidéo lazy avec autoplay démarre quand elle entre dans le viewport, pas au chargement initial.

Le lazy loading automatique ne s’applique qu’aux vidéos rendues via le filtre Liquid video_tag, sans attribut loading forcé. Les thèmes qui écrivent un <video> brut à la main, ou qui s’appuient sur des embeds tiers (YouTube, Vimeo, players d’apps), n’en bénéficient pas. Même logique si une section force déjà loading="eager" partout.

{{ product.featured_media | video_tag }}

Ne jamais appliquer le lazy loading à une vidéo visible au chargement. Si la vidéo est dans le premier écran, surtout si c’est votre élément LCP, le lazy ajoute un délai avant même le début du téléchargement : l’inverse de l’objectif. La règle automatique de video_tag évite déjà le header et les premières sections (positions 1 et 2) ; pour un hero, vous pouvez aussi forcer loading à eager.

{{ section.settings.video | video_tag: loading: 'eager', autoplay: true, muted: true }}

Gardez une image poster adaptée. Performance @ Shopify recommande de coupler lazy loading et posters responsives (technique présentée dans leur article Fast video banners that work on every device) : le poster montre la bonne image selon l’appareil pendant que la vidéo hors écran attend. Pour le détail du filtre, la référence officielle reste la doc video_tag sur shopify.dev.

S’appuyer sur le défaut, comme pour les images : ne passez loading que quand le layout l’exige. Toute valeur explicite prime sur la règle automatique. Si la position de section (à partir de la 3e, hors header) ne colle pas à votre composition, pilotez loading avec section.index et section.location.

{%- liquid
  if section.index > 2
    assign loading = "lazy"
  else
    assign loading = "eager"
  endif
-%}
{{ section.settings.video | video_tag: loading: loading }}

<video loading="lazy" playsinline="playsinline" preload="metadata" aria-label="Potion beats" poster="//cdn.shopify.com/.../thumbnail.jpg">
  <source src="//cdn.shopify.com/.../HD-1080p-7.2Mbps.mp4" type="video/mp4">
  <img src="//cdn.shopify.com/.../thumbnail.jpg">
</video>

La même logique de position de section que pour image_tag s’applique (voir aussi les articles Shopify sur le lazy load des images et les nouvelles fonctionnalités Liquid liées à la performance). Pour publier un changement de thème sans risque, un rollout progressif reste pertinent : voir notre article sur les rollouts Shopify.

La vidéo reste l’asset le plus lourd sur la plupart des vitrines qui en utilisent. Tant qu’il n’existait pas de loading="lazy" natif sur <video>, différer les fichiers hors écran demandait des contournements. Avec le support Chrome (148, stabilisé en 150) et le comportement automatique de video_tag (déployé juillet 2026), les vidéos sous la ligne de flottaison attendent le défilement par défaut.

Si votre thème s’appuie déjà sur video_tag, vous profitez du gain sans ticket technique : moins de pages vues qui téléchargent la vidéo, 1,23 Mo de moins en moyenne. Si vous avez un hero vidéo, gardez-le eager et soignez le poster. Si vous êtes sur du markup brut ou des embeds YouTube, planifiez une migration vers video_tag ou un lazy loading explicite. Pour le reste du chemin critique vitrine, voir Early Hints Shopify, streaming HTML Liquid, thème existant ou sur mesure et rollouts Shopify.