Lazy Load des images Shopify : Comment le configurer (Guide 2026)

À retenir

• La plupart des thèmes Shopify modernes (Dawn, Craft, Sense) incluent loading="lazy" sur les images par défaut.
• Pour vérifier : faites un clic droit sur n’importe quelle image de votre boutique → Inspecter → recherchez loading="lazy" dans le HTML.
• Votre image hero/bannière ne doit PAS être chargée en lazy loading — c’est l’élément du Largest Contentful Paint et elle doit se charger immédiatement.
• Pour ajouter le lazy loading manuellement : modifiez les balises d’image dans les fichiers Liquid de section ou de snippet pour y inclure loading="lazy".

Le lazy loading retarde le chargement des images jusqu’à ce qu’elles soient sur le point d’entrer dans la fenêtre d’affichage (viewport). Au lieu de télécharger chaque image d’une page lors de son chargement initial, le navigateur ne télécharge les images que lorsque le visiteur défile vers elles. Pour les longues pages de produits ou de collections Shopify avec des dizaines d’images, cela peut réduire considérablement le temps de chargement initial de la page.

Comment activer le lazy loading des images sur Shopify

Étape 1 — Vérifiez si votre thème le fait déjà.

Faites un clic droit sur n’importe quelle image de votre boutique → Inspecter → regardez la balise <img> dans le code HTML. Si vous voyez loading="lazy", votre thème intègre déjà le lazy loading pour cette image.

Les thèmes Shopify modernes basés sur Dawn (le thème officiel de Shopify) incluent loading="lazy" par défaut pour :

• Les images de produits des pages de collection
• Les images de la galerie sous la ligne de flottaison
• Les images mises en avant des articles de blog
• Les images des sections qui ne sont pas le premier contenu visible

Si votre thème a été développé après 2021, il est très probable qu’il l’inclue déjà.

Article connexe : Compresser des images sur Shopify.

Comment ajouter le lazy loading aux images manuellement

Si votre thème n’inclut pas loading="lazy", ajoutez-le aux balises d’image dans les fichiers Liquid de vos sections et de vos snippets.

Étape 1 - Dupliquez votre thème.

Étape 2 - Dans l’éditeur de code, trouvez la section ou le snippet où l’image est rendue. Emplacements fréquents :

• sections/main-collection-product-grid.liquid — images de produits de la page de collection
• sections/featured-collection.liquid — produits mis en avant sur la page d’accueil
• snippets/card-product.liquid — modèle de carte produit utilisé dans plusieurs sections

Étape 3 - Trouvez la balise <img> et ajoutez loading="lazy" :

<!-- Avant -->
<img
  src="{{ product.featured_image | img_url: '400x' }}"
  alt="{{ product.featured_image.alt }}"
  width="400"
  height="400"
/>

<!-- Après -->
<img
  src="{{ product.featured_image | img_url: '400x' }}"
  alt="{{ product.featured_image.alt }}"
  width="400"
  height="400"
  loading="lazy"
/>

Étape 4 - Enregistrez et testez. Utilisez l’onglet Réseau (Network) des Chrome DevTools pour confirmer que les images ne se chargent qu’au moment où vous faites défiler la page.

Comment ajouter le lazy loading sur Shopify avec le filtre image_tag

La méthode moderne pour rendre les images sur Shopify consiste à utiliser le filtre image_tag, qui gère le lazy loading (et d’autres bonnes pratiques) automatiquement :

{{ product.featured_image | image_url: width: 400 | image_tag: loading: 'lazy', alt: product.featured_image.alt }}

Cela génère une balise <img> comprenant le lazy loading, les bons attributs width/height, et l’attribut srcset pour l’affichage responsive des images. Si votre thème utilise l’ancienne syntaxe img_url, passer à image_url + image_tag est la meilleure façon de l’optimiser.

Référence copier-coller pour image_tag

Les modèles que vous utiliserez réellement :

{% comment %} Image sous la ligne de flottaison : lazy load {% endcomment %}
{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy' }}

{% comment %} Contrôler quelles tailles vont dans srcset {% endcomment %}
{{ product.featured_image
    | image_url: width: 1200
    | image_tag: loading: 'lazy', widths: '400, 800, 1200', sizes: '(max-width: 767px) 100vw, 50vw' }}

{% comment %} Hero au-dessus de la ligne de flottaison : chargement eager avec une priorité de récupération élevée {% endcomment %}
{{ section.settings.image | image_url: width: 2000 | image_tag: loading: 'eager', fetchpriority: 'high' }}

Tout attribut HTML que vous passez à image_tag (comme fetchpriority) est écrit sur la balise <img> générée. Pour savoir quand et pourquoi utiliser le modèle eager sur les bannières hero, consultez corriger le chargement eager de la bannière hero sur Shopify.

Où se trouve le lazy loading dans les thèmes populaires

Le fichier que vous devez modifier diffère selon la famille de thèmes :

Dawn et ses dérivés (Sense, Craft, Refresh, Studio, et la plupart des thèmes gratuits OS 2.0). Les images des fiches produits sont rendues via snippets/card-product.liquid, qui définit déjà loading="lazy". Les images de section (bannières d’image, image-avec-texte) exposent la logique dans chaque fichier de section sous sections/. Dawn charge aussi en mode eager les premières images d’une page - cherchez la logique qui vérifie section.index ou une variable lazy_load avant de modifier quoi que ce soit.

Thèmes premium (Impulse, Prestige, Turbo, et similaires). La plupart des versions post-2021 utilisent le loading="lazy" natif, mais les anciennes versions intégraient leur propre lazy loading en JavaScript. Vérifiez les balises <img> : si vous voyez data-src au lieu de src, le thème utilise une approche basée sur un script (voir la note sur lazysizes ci-dessous) et l’ajout de loading="lazy" par-dessus entrera en conflit.

Anciens thèmes (pré-2021). Beaucoup s’appuyaient sur la bibliothèque JavaScript lazysizes : attributs class="lazyload" et data-src, avec un script qui remplace par le vrai src au défilement. Le lazy loading natif des navigateurs a rendu cela obsolète. Si votre thème l’utilise encore, migrer vers un simple src + loading="lazy" supprime un script qui bloque le rendu et une source courante d’images cassées. Faites-le modèle par modèle sur un thème dupliqué, pas avec un rechercher-remplacer.

Si vous préférez ne pas avoir à chercher dans les fichiers Liquid, décrivez le changement à Fudge : « ajouter le lazy loading natif à toutes les images sous la ligne de flottaison » - il trouvera les bons snippets et les modifiera sur place.

À quelle amélioration s’attendre ?

Le gain est proportionnel au nombre d’images situées sous la ligne de flottaison. Le calcul : une page de collection affichant 24 fiches produits d’environ 80 Ko par image représente un poids d’image d’environ 1,9 Mo. Si 16 de ces fiches sont sous la ligne de flottaison, le lazy loading supprime environ 1,3 Mo du chargement initial - une bande passante qui est alors allouée à votre image LCP, aux polices et aux scripts.

Ce que cela signifie pour les Core Web Vitals :

• LCP s’améliore car l’image hero n’est plus en concurrence avec les téléchargements sous la ligne de flottaison.
• TBT s’améliore légèrement sur les pages riches en images, car moins de tâches de décodage s’exécutent pendant le chargement.
• CLS reste stable si vos images ont des attributs de largeur et de hauteur - et se dégrade si ce n’est pas le cas.

Pour savoir où se situent les vraies boutiques sur ces métriques, consultez notre rapport État de la Performance Shopify 2026.

Dépannage du lazy loading sur Shopify

Les images apparaissent vides lors d’un défilement rapide. Le lazy loading natif commence le téléchargement lorsque l’image s’approche de la fenêtre d’affichage (viewport) ; sur des connexions lentes, un défilement rapide peut le devancer. C’est normal et généralement acceptable. Si cela vous dérange sur une page clé, la solution est de réduire le nombre d’images en lazy loading au-dessus du milieu de la page, et non de supprimer le lazy loading partout.

Les images ne se chargent jamais. Presque toujours un conflit entre le lazy loading natif et celui basé sur un script : la balise a data-src (en attente d’un script qui ne s’exécute plus) et loading="lazy". Choisissez un seul système - pour les thèmes modernes, déplacez l’URL dans src et supprimez les attributs data- et les classes de lazyload.

Les images à l’intérieur des sliders ou des onglets ne se chargent pas. Les navigateurs ignorent les téléchargements pour les images qui sont en display: none ou loin en dehors de la fenêtre d’affichage, donc les diapositives cachées d’un carrousel se chargent tardivement lorsqu’un visiteur les fait défiler. Pour la première diapositive, utilisez le chargement eager ; pour les autres, c’est le comportement souhaité.

La mise en page saute lorsque les images se chargent. Attributs width/height manquants. Ajoutez-les (ou utilisez image_tag, qui le fait pour vous) pour que le navigateur réserve l’espace. Nous couvrons les mécanismes dans notre guide CLS pour Shopify.

Vérifier que ça fonctionne. Outils de développement Chrome → Onglet Réseau → filtrez par Img → rechargez avec le cache désactivé. Vous devriez voir une courte liste initiale d’images, puis de nouvelles lignes apparaître à mesure que vous défilez. Si chaque image se télécharge dès le début, vos attributs loading n’atteignent pas le HTML rendu - vérifiez si une application ou un script réécrit les balises.

Quelles images ne doivent PAS être chargées en lazy loading

L’image hero / l’image de la bannière. C’est généralement l’élément du Largest Contentful Paint (LCP) — la plus grande image visible lorsque la page se charge pour la première fois. Le LCP est un Core Web Vital qui affecte directement votre classement Google.

Faire du lazy loading sur votre image hero signifie que le navigateur attend pour la télécharger jusqu’à ce qu’il en ait « besoin » — mais il en a besoin immédiatement. Cela nuit considérablement à votre score LCP.

Si votre image hero a loading="lazy" dans votre thème, supprimez-le. Ajoutez plutôt loading="eager" ou fetchpriority="high" :

<img src="banner.jpg" alt="Bannière de soldes d'été" loading="eager" fetchpriority="high" />

fetchpriority="high" indique au navigateur de prioriser la récupération de cette image par rapport à tout le reste — le moyen le plus efficace d’améliorer le LCP.

Pour un guide détaillé incluant le modèle section.index et <link rel="preload"> dans theme.liquid, consultez Corriger le chargement eager de la bannière hero sur Shopify.

La première image de produit sur les pages de collection. Si votre page de collection affiche des images de produits dans une grille, la première rangée d’images est visible immédiatement. Celles-ci ne doivent pas être chargées en lazy loading. Seules les images sous la ligne de flottaison bénéficient du lazy loading.

Certains thèmes gèrent cela avec une logique conditionnelle — en n’appliquant loading="lazy" qu’aux images après les quelques premières fiches.

Impact sur les Core Web Vitals

Le lazy loading correctement implémenté améliore :

• LCP (Largest Contentful Paint) — en s’assurant que l’image hero se charge rapidement (pas en lazy loading) et que les autres ressources ne se disputent pas la bande passante.
• TBT (Total Blocking Time) — en réduisant le nombre de téléchargements de grandes images pendant le chargement de la page.

Il ne devrait pas changer de manière significative :

• CLS (Cumulative Layout Shift) — assurez-vous que les images ont des attributs de largeur et de hauteur explicites pour réserver l’espace. Sans cela, les images en lazy loading peuvent provoquer un décalage de mise en page lorsqu’elles se chargent.

Pour un contexte de référence sur la performance des vraies boutiques sur ces métriques, consultez notre rapport État de la Performance Shopify 2026.

Connexe : Ajouter du texte alternatif aux images dans Shopify. Si vous vous demandez si un hébergeur d’images tiers serait meilleur que celui intégré à Shopify, consultez notre comparaison des CDN d’images Shopify.

Utiliser srcset pour les images responsives

En plus du lazy loading, srcset garantit que les navigateurs ne téléchargent que la taille d’image appropriée à leur écran — pas une image de 2000px pour une fiche produit de 400px.

Le filtre image_tag de Shopify génère srcset automatiquement. Pour une utilisation plus ancienne avec img_url :

<img
  src="{{ product.featured_image | img_url: '400x' }}"
  srcset="{{ product.featured_image | img_url: '400x' }} 400w,
          {{ product.featured_image | img_url: '800x' }} 800w,
          {{ product.featured_image | img_url: '1200x' }} 1200w"
  sizes="(max-width: 767px) 100vw, 50vw"
  loading="lazy"
  alt="{{ product.featured_image.alt }}"
/>

Combiné avec le lazy loading, un srcset correct peut réduire les données d’image transférées de 40 à 60 % sur mobile.

Le lazy loading est-il uniquement pour les images sur Shopify ?

Non. Le lazy loading s’applique aussi aux vidéos. Les thèmes Shopify peuvent charger les éléments <video> en lazy loading en utilisant l’attribut loading="lazy" et preload="none", et les intégrations YouTube/Vimeo peuvent être chargées en lazy loading en utilisant un modèle de façade (en affichant une vignette statique jusqu’à ce que l’utilisateur clique sur play). Pour un guide complet, consultez notre guide sur comment faire du lazy loading sur les vidéos dans Shopify. De même, les iframes (utilisées pour les cartes ou formulaires intégrés) peuvent être différées avec loading="lazy". Les images restent la cible ayant le plus d’impact, car elles sont l’actif lourd le plus courant sur les pages de produits et de collections Shopify.

FAQ

Connexe : Accélérer un thème Shopify.