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

Points clés à 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 → cherchez loading="lazy" dans le code HTML.
• Votre image hero / bannière NE DOIT PAS être en lazy load — c’est l’élément Largest Contentful Paint (LCP) et il doit se charger immédiatement.
• Pour ajouter le lazy loading manuellement : modifiez les balises d’image dans les fichiers Liquid de vos sections ou snippets pour y inclure loading="lazy".

Le lazy loading retarde le chargement des images jusqu’à ce qu’elles soient sur le point d’entrer dans le viewport. Au lieu de télécharger chaque image de la page dès le premier chargement, le navigateur de vos visiteurs ne télécharge les images que lorsqu’ils font défiler la page vers le bas. Pour les longues pages de produits ou collections Shopify contenant des dizaines d’images, cela permet de 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 s’en charge déjà.

Faites un clic droit sur n’importe quelle image de votre vitrine → 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 sur la page de collection
• Les images de galerie en dessous de la ligne de flottaison (below the fold)
• Les images à la une des articles de blog
• Les images de section qui ne font pas partie du premier contenu visible

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

Article lié : Compresser les 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 vos fichiers Liquid (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 fréquents :

• sections/main-collection-product-grid.liquid — images des produits sur la page de collection
• sections/featured-collection.liquid — produits mis en avant sur la page d’accueil
• snippets/card-product.liquid — template 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 bien confirmer que les images se chargent uniquement lorsque 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.

Quelles images NE DOIVENT PAS être mises en lazy loading

L’image hero / image de bannière. Il s’agit généralement de l’élément Largest Contentful Paint (LCP) — la plus grande image visible lors du premier chargement de la page. Le LCP est un Core Web Vital qui affecte directement votre classement Google.

Appliquer le lazy loading à votre image hero signifie que le navigateur attend « d’en avoir besoin » pour la télécharger — mais il en a besoin immédiatement. Cela nuit considérablement à votre score LCP.

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

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

fetchpriority="high" indique au navigateur de prioriser le téléchargement de cette image avant tout le reste — c’est le moyen le plus efficace d’améliorer le LCP.

Pour un guide détaillé incluant le pattern section.index et <link rel="preload"> dans theme.liquid, consultez Corriger le Eager Loading 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. Elles ne doivent pas être en lazy loading. Seules les images situées sous la ligne de flottaison (below the fold) bénéficient du lazy loading.

Certains thèmes gèrent cela avec une logique conditionnelle — en appliquant loading="lazy" uniquement aux images situées après les premières cartes.

L’impact sur les Core Web Vitals

Un lazy loading bien implémenté permet d’améliorer :

• Le LCP (Largest Contentful Paint) — en s’assurant que l’image hero se télécharge rapidement (sans lazy loading) et sans utiliser la bande passante pour d’autres ressources inutilement.
• Le TBT (Total Blocking Time) — en réduisant le nombre de téléchargements volumineux qui s’effectuent pendant le chargement de la page.

Cela ne devrait pas impacter de manière significative :

• Le CLS (Cumulative Layout Shift) — assurez-vous de toujours déclarer des attributs de largeur et hauteur précis pour allouer l’espace. Sinon, les images en lazy loading provoqueront un layout shift brutal au moment de s’afficher.

Article lié : Ajouter du texte alternatif aux images sur Shopify.

Utiliser srcset pour les images responsive

Couplé au lazy loading, srcset garantit que les navigateurs de vos utilisateurs vont uniquement télécharger la largeur d’image appropriée par rapport à leur écran — il ne compte pas télécharger une image de 2000px juste pour une carte de produit de 400px.

Le filtre image_tag de Shopify génère automatiquement l’attribut srcset. Si vous utilisez toujours la syntaxe 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 }}"
/>

Mélangé au lazy loading, un bon réglage srcset est capable de réduire drastiquement la consommation de données (de l’ordre de 40% à 60% en version mobile).

Le lazy loading s’applique-t-il uniquement aux images sur Shopify ?

Non. Le lazy loading s’applique aussi aux vidéos. Les thèmes Shopify peuvent appliquer le lazy loading aux éléments <video> en utilisant l’attribut loading="lazy" et preload="none", et les intégrations YouTube/Vimeo peuvent l’utiliser via un pattern de façade (en affichant une miniature statique jusqu’à ce que l’utilisateur clique sur lecture). Pour un guide complet, consultez de notre article expliquant comment mettre des vidéos en lazy loading sur Shopify. De la même manière, 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 ce sont les ressources lourdes les plus courantes sur les pages de produits et de collections Shopify.

FAQ

Shopify charge-t-il les images en lazy loading par défaut ?

Les thèmes modernes (Dawn, Sense, Refresh, Craft et la plupart des thèmes postérieurs à 2021) incluent loading="lazy" par défaut sur les images de produits des pages de collection, les images à la une des blogs et les sections sous la ligne de flottaison. Ce n’est peut-être pas le cas des anciens thèmes. Faites un clic droit sur n’importe quelle image → Inspecter → vérifiez la présence de loading="lazy" pour confirmer le comportement de votre thème.

Le lazy loading des images va-t-il nuire à mon SEO sur Shopify ?

Non, lorsqu’il est implémenté correctement. Google gère très bien le contenu en lazy loading — son crawler déclenche des défilements du viewport. Le gain SEO réside dans l’amélioration de la vitesse ; le lazy loading réduit le poids initial de la page et améliore les Core Web Vitals (LCP, TBT). Évitez le lazy loading des images situées au-dessus de la ligne de flottaison (above-the-fold), ce qui dégraderait le LCP.

Pourquoi mes images en lazy loading causent-elles un décalage de mise en page (CLS) ?

À cause d’attributs width et height manquants. Sans dimensions explicites, le navigateur ne réserve pas d’espace pour l’image — quand elle se charge, le contenu sursaute. Ajoutez les attributs width et height (ou la propriété CSS aspect-ratio) sur chaque image en lazy loading. Le filtre image_tag de Shopify le gère automatiquement.

Dois-je utiliser le lazy loading sur les images au-dessus de la ligne de flottaison ?

Non. Le lazy loading retarde le téléchargement jusqu’à ce que l’image soit “proche du viewport”, ce qui pour le contenu au-dessus de la ligne de flottaison est immédiat, mais introduit un léger retard par rapport au eager loading. L’image hero/LCP devrait toujours utiliser loading="eager" et fetchpriority="high".

Puis-je appliquer le lazy loading aux images d’arrière-plan en CSS ?

Pas via l’attribut loading (qui ne fonctionne que sur <img> et <iframe>). La solution la plus propre : décrivez ce que vous souhaitez à Fudge (“convert the hero CSS background to an img tag with native lazy loading” / “convertis l’arrière-plan CSS hero en balise img avec lazy loading natif”) et il reconstruira la section en utilisant un véritable élément <img>. Solution de contournement manuelle : utilisez un Intersection Observer pour n’appliquer le CSS background-image que lorsque la section entre dans le viewport.

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