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 / la bannière. C’est généralement l’élément repère le plus grand (Largest Contentful Paint ou LCP) — la plus grande image visible au chargement de la page. Le LCP est un des Core Web Vitals qui a un impact direct sur votre classement sur Google.

Mettre votre image hero en lazy loading revient à dire au navigateur d’attendre pour la télécharger qu’il en “ait besoin” — or, il en a besoin immédiatement. Cela dégrade considérablement votre score LCP.

Si l’image hero a l’attribut loading="lazy" dans votre thème, retirez-le. À la place, 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 télécharger cette image en priorité par rapport au reste — c’est le moyen le plus efficace d’améliorer le LCP.

La première image produit sur les pages de collection. Si votre page de collection montre des produits sous forme de grille, la première rangée d’images est visible dès l’ouverture. Ces images ne doivent surtout pas être en lazy loading. Seules celles en dessous de la ligne de flottaison en ont besoin.

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.

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 fonctionne aussi sur les vidéos. Les thèmes Shopify peuvent mettre les éléments <video> en lazy loading avec les attributs loading="lazy" et preload="none". Même chose pour les intégrations YouTube/Vimeo : on utilise généralement ce qu’on appelle un pattern de facade (afficher d’abord une miniature, jusqu’à ce que l’utilisateur clique sur play pour afficher la vidéo). Pour une explication étape par étape, jetez un œil à notre documentation : comment mettre les vidéos en lazy loading sur Shopify. Dans le même ordre d’idées, on peut reporter le chargement des iframes (cartes interactives, formulaires) en intégrant la balise loading="lazy". Les images constituent toutefois la cible numéro un puisqu’elles sont de très loin les éléments les plus lourds sur les pages produits ou collections.

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