Pages lentes des GIF animés Shopify : utiliser les formats vidéo

Pourquoi les GIF animés nuisent à la vitesse de Shopify

GIF est pratique, mais il est inefficace pour les médias de vitrine modernes. Une démonstration de produit en boucle, un clip de mouvement de tissu, une animation avant et après ou une bannière de héros peuvent devenir plusieurs mégaoctets sous forme de GIF. Le navigateur doit le télécharger, le décoder et le restituer tout en gérant également votre image de héros, votre CSS, vos scripts, vos intégrations d'applications et vos données de produit.

Les conseils Lighthouse de Chrome recommandent les formats vidéo tels que MP4 ou WebM pour le contenu animé, car les GIF volumineux gaspillent de la bande passante par rapport à la vidéo. La documentation multimédia des produits de Shopify prend en charge les fichiers GIF et WebP animés, et les images de produits peuvent être volumineuses, mais la prise en charge n'est pas la même chose que les performances. Un magasin peut télécharger un GIF qui fonctionne techniquement et échouer néanmoins aux tests de vitesse mobile.

Le problème est plus douloureux lorsque le GIF apparaît au-dessus de la ligne de flottaison. Si le GIF devient l'élément visible le plus grand, cela peut affecter LCP. S'il se charge en dessous de la ligne de flottaison mais démarre immédiatement, il peut ajouter une charge utile réseau inutile. S’il apparaît à l’intérieur d’un carrousel de produits sans dimensions stables, il peut contribuer au CLS. Utilisez le Guide de livraison d'images Guide d'optimisation Shopify LCP et si ces diagnostics apparaissent ensemble.

Quand conserver un GIF et quand le remplacer

Conservez un GIF uniquement lorsqu'il est petit, décoratif et ne fait pas partie du premier écran. Remplacez-le lorsqu'il s'agit d'une démonstration de produit, d'une bannière pleine largeur, d'une boucle de page d'accueil, d'une animation de page de destination ou de tout nom de fichier PageSpeed ​​dans le diagnostic de contenu animé.

Utilisez une image statique lorsque le mouvement ne modifie pas la décision d'achat. Utilisez MP4 lorsque les acheteurs ont besoin de comprendre le mouvement, l'échelle, l'assemblage, la texture ou l'ajustement. Utilisez WebM comme source supplémentaire facultative si votre flux de travail le prend en charge, mais conservez MP4 pour une compatibilité étendue.

Manuel étape par étape : remplacez les GIF Shopify par une vidéo

1. Trouvez le GIF cher

Exécutez PageSpeed Insights, Chrome DevTools Network et le test de vitesse Shopify gratuit. Triez les requêtes réseau par taille et recherchez .gif Fichiers . Vérifiez si le GIF se trouve au-dessus de la ligne de flottaison, dans une galerie de produits, chargé par un générateur de pages ou injecté par une application.

2. Exportez l'animation au format MP4

Gardez la vidéo courte, muette, bouclable et recadrée à la taille d'affichage exacte. Évitez d'exporter un clip de 1 920 px de large pour une fiche produit de 420 px. Un objectif pratique pour le mouvement de l'interface utilisateur d'un produit est souvent inférieur à 1 Mo, et plus petit est préférable sur mobile.

3. Utilisez une image d'affiche et des dimensions stables

L'image de l'affiche donne au navigateur quelque chose de rapide à peindre avant le chargement de la vidéo. La largeur, la hauteur ou le rapport hauteur/largeur protègent la stabilité de la mise en page.

<video
  class="product-motion"
  autoplay
  muted
  loop
  playsinline
  preload="metadata"
  poster="{{ 'folding-demo-poster.jpg' | asset_url }}"
  width="900"
  height="900"
>
  <source src="{{ 'folding-demo.webm' | asset_url }}" type="video/webm">
  <source src="{{ 'folding-demo.mp4' | asset_url }}" type="video/mp4">
</video>

4. Mouvement de charge paresseuse sous le pli

Si la vidéo n'est pas visible au premier rendu, évitez la lecture hâtive. Utilisez d'abord une affiche, puis définissez la source lorsque la section s'approche de la fenêtre.

const videos = document.querySelectorAll('video[data-src]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;

    const video = entry.target;
    video.src = video.dataset.src;
    video.load();
    observer.unobserve(video);
  });
}, { rootMargin: '300px' });

videos.forEach((video) => observer.observe(video));

5. Ne pas lire automatiquement chaque vidéo de fiche produit

Les pages de collection comportant de nombreuses cartes animées peuvent vite devenir lourdes. Préférez une image de produit statique, puis diffusez un mouvement en survolant ou en appuyant. Cela protège les utilisateurs mobiles et maintient la réactivité des filtres de collection.

.product-motion {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: #f3f4f6;
}

@media (prefers-reduced-motion: reduce) {
  .product-motion {
    display: none;
  }
}

6. Retestez le LCP, le poids de la page et l'interaction

Après avoir remplacé le GIF, retestez la même URL. Vous devriez voir une taille de transfert inférieure et moins d’octets d’image animée. Si le GIF était au-dessus de la ligne de flottaison, comparez LCP. Si la page semble toujours lente, vérifiez énormes charges utiles réseau, vitesse de la page produit, et Optimisation vidéo Shopify.

Correction manuelle vs Thunder Fix

Créez une meilleure règle média pour votre magasin

Utilisez cette règle : image statique d'abord, vidéo lorsque le mouvement facilite la conversion, GIF uniquement lorsque le fichier est petit et non critique. Cela permet de conserver une expérience produit riche sans obliger chaque visiteur mobile à télécharger de lourdes animations avant de comprendre l'offre.

Pour la séquence d'optimisation complète, utilisez le guide complet d'optimisation de la vitesse Shopify, comparez vos pages à forte média avec les Guide de vitesse mobile vs ordinateur de bureau, et révision Tarification Thunder si vous souhaitez une optimisation automatisée avant le nettoyage manuel des médias.

FAQ