Lazy Loading d'Images sur Shopify : Comment le configurer (Guide 2026)

Points clés

• 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 → cherchez loading="lazy" dans le HTML.
• Votre image hero/bannière ne doit PAS utiliser le lazy loading — c’est l’élément Largest Contentful Paint et il doit se charger immédiatement.
• Pour ajouter le lazy loading manuellement : modifiez les balises d’image dans les fichiers Liquid des sections ou des snippets pour y inclure loading="lazy".

Pour activer le lazy loading sur les images dans Shopify, ajoutez loading="lazy" aux balises <img> situées sous la ligne de flottaison (below-the-fold) (ou passez loading: 'lazy' au filtre image_tag) et gardez l’image hero en chargement immédiat (eager). La plupart des thèmes modernes le font déjà, alors vérifiez le vôtre en premier.

Le lazy loading retarde le chargement des images jusqu’à ce qu’elles soient sur le point d’entrer dans la zone d’affichage (viewport). Au lieu de télécharger toutes les images d’une page lors de son premier chargement, le navigateur ne télécharge les images qu’au fur et à mesure que le visiteur fait défiler la page. Pour les longues pages de produits ou de collections Shopify avec des dizaines d’images, cela peut considérablement réduire le temps de chargement initial de la page.

Pourquoi vous pouvez nous faire confiance

Jacques a plus de 15 ans d’expérience en développement, et nous travaillons dans l’écosystème Shopify depuis plus de quatre ans. Nous développons Fudge, l’opérateur IA pour les boutiques Shopify, noté 4.9 sur le Shopify App Store, donc le chargement des images dans le code des thèmes est notre quotidien.

Votre thème Shopify utilise-t-il déjà le lazy loading sur les images ?

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

Dawn, le thème sur lequel la plupart des thèmes Shopify gratuits sont basés, inclut loading="lazy" par défaut pour :

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

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

Le lazy loading modifie uniquement le moment où les images sont téléchargées. Pour réduire le poids de chaque fichier, découvrez comment compresser les images dans 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 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 courants :

• sections/main-collection-product-grid.liquid — images de produits de la page 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 du scroll.

Pendant que vous modifiez ces balises, vérifiez aussi leur texte alternatif (alt text). Voir comment ajouter du texte alternatif aux images dans Shopify.

Comment ajouter le lazy loading dans Shopify avec le filtre image_tag

La méthode moderne sur Shopify pour afficher les images 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> avec le lazy loading, les bons attributs width/height, et un srcset pour les images responsives. Si votre thème utilise l’ancienne syntaxe img_url, passer à image_url + image_tag est la mise à niveau la plus propre.

Référence copier-coller pour image_tag

Les modèles que vous utiliserez le plus :

{% 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 le 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 : eager load avec une priorité fetch élevée {% endcomment %}
{{ section.settings.image | image_url: width: 2000 | image_tag: loading: 'eager', fetchpriority: 'high' }}

Tout attribut HTML passé à image_tag (comme fetchpriority) est écrit sur la balise <img> générée. Pour savoir quand et pourquoi utiliser l’eager loading sur les bannières hero, consultez comment corriger l’eager loading des bannières hero dans 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, Horizon et les thèmes gratuits basés sur eux (Sense, Craft, Refresh, Studio et la plupart des thèmes OS 2.0 gratuits). Dans Dawn, les images des cartes produits sont rendues via snippets/card-product.liquid, qui définit déjà loading="lazy". Les images de section (bannières d’images, image avec texte) exposent la logique dans chaque fichier de section sous sections/. Dawn charge également en eager-load les premières images d’une page - cherchez une logique vérifiant section.index ou une variable lazy_load avant de modifier quoi que ce soit. Horizon, le thème par défaut des nouvelles boutiques depuis 2025, organise ses fichiers différemment, alors cherchez loading dans son code pour trouver la même logique.

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

Anciens thèmes (avant 2021). Beaucoup s’appuyaient sur la bibliothèque JavaScript lazysizes : class="lazyload" et les attributs data-src, avec un script échangeant le vrai src au scroll. 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" permet de supprimer un script bloquant le rendu et une source courante d’images cassées. Faites-le template par template sur un thème dupliqué, pas avec un chercher-remplacer global.

Si vous préférez ne pas fouiller dans les fichiers Liquid, décrivez la modification à apporter à Fudge, l’opérateur IA pour les boutiques Shopify : “add native lazy loading to all below-the-fold images” - il trouvera les bons snippets et les modifiera dans un brouillon que vous pourrez prévisualiser avant de le publier.

À quelle amélioration devez-vous vous attendre ?

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

Ce que cela signifie pour les Signaux Web Essentiels (Core Web Vitals) :

• Le LCP s’améliore car l’image hero ne concurrence plus les téléchargements sous la ligne de flottaison.
• Les métriques de laboratoire (Lab metrics) comme le TBT peuvent s’améliorer légèrement sur les pages chargées en images, car moins de tâches de décodage s’exécutent pendant le chargement.
• Le CLS reste stable si vos images ont des attributs width et height - et s’empire si ce n’est pas le cas.

Pour voir où se situent les vraies boutiques sur ces métriques, consultez notre rapport State of Shopify Performance 2026.

Résoudre les problèmes de lazy loading dans Shopify

Les images apparaissent blanches lors d’un scroll rapide. Le lazy loading natif lance le téléchargement quand l’image s’approche de la zone d’affichage (viewport) ; sur les connexions lentes, un scroll rapide peut le devancer. C’est normal et généralement acceptable. Si cela vous dérange sur une page clé, la solution est d’avoir moins d’images en lazy load au-dessus du milieu de page, pas de supprimer le lazy loading partout.

Les images ne se chargent jamais. C’est presque toujours un conflit entre le lazy loading natif et celui basé sur un script : la balise a data-src (qui attend un script qui ne tourne 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- ainsi que les classes lazyload.

Les images dans des sliders ou des onglets ne se chargent pas. Les navigateurs ignorent les téléchargements pour les images en display: none ou très loin en dehors de la zone d’affichage, de sorte que les slides cachées d’un carrousel se chargent tardivement lorsqu’un visiteur swipe. Pour la première slide, utilisez l’eager loading ; pour le reste, c’est le comportement souhaité.

Le layout saute quand les images se chargent. Il manque les attributs width/height. Ajoutez-les (ou utilisez image_tag, qui le fait pour vous) pour que le navigateur réserve l’espace. Nous expliquons cette mécanique dans notre guide CLS pour Shopify.

Vérifier que ça fonctionne. Chrome DevTools → onglet Network (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 au fur et à mesure que vous scrollez. Si toutes les images se téléchargent d’emblée, 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 utiliser le lazy loading

L’image hero / bannière. C’est généralement l’élément Largest Contentful Paint (LCP) — la plus grande image visible lors du premier chargement de la page. Le LCP est l’un des Signaux Web Essentiels (Core Web Vitals) que Google utilise comme signal de l’expérience sur la page.

Mettre votre image hero en lazy loading 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" et fetchpriority="high" :

<img src="banner.jpg" alt="Summer sale banner" loading="eager" fetchpriority="high" />

fetchpriority="high" place l’image devant les autres images dans la file de téléchargement, ce qui raccourcit généralement le LCP.

Pour un guide ciblé incluant le modèle section.index et <link rel="preload"> dans theme.liquid, consultez Fix Hero Banner Eager Loading in 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 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 situées après les premières cartes.

Utiliser srcset pour des images responsive

En parallèle du lazy loading, srcset s’assure que les navigateurs ne téléchargent que la taille d’image appropriée à leur écran — pas une image de 2000px pour une carte produit de 400px.

Le filtre image_tag de Shopify génère le srcset automatiquement. Pour l’ancienne utilisation de 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 }}"
/>

Si vous vous demandez si un hébergeur d’images tiers serait plus performant que celui intégré à Shopify, consultez notre comparatif des CDN d’images Shopify.

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 différer les éléments <video> avec preload="none" et une image poster, et les intégrations YouTube/Vimeo peuvent être chargées en lazy load en utilisant un modèle de façade (afficher une miniature statique jusqu’à ce que l’utilisateur clique sur play). Pour un guide complet, consultez notre article sur comment appliquer le lazy loading aux 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 à plus fort impact car ce sont les ressources lourdes les plus courantes sur les pages de produits et de collections Shopify.

Le lazy loading est l’une des nombreuses optimisations de vitesse. Pour le reste, découvrez comment accélérer un thème Shopify.

FAQ