À 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 HTML.- Votre image hero/bannière NE DOIT PAS être en lazy loading — 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 des sections ou des 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 toutes les images d’une page lors de son chargement initial, le navigateur ne les télécharge qu’au fur et à mesure que le visiteur fait défiler la page. Pour les pages longues de produits ou de collections Shopify contenant 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 collectionsections/featured-collection.liquid— produits mis en avant sur la page d’accueilsnippets/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.
Quelles images NE DOIVENT PAS être mises en lazy loading
L’image hero / la bannière. Il s’agit généralement de l’élément LCP (Largest Contentful Paint) — la plus grande image visible lors du premier chargement de la page. Le LCP est un Core Web Vital qui affecte directement votre classement sur Google.
Appliquer le lazy loading à votre image hero signifie que le navigateur attend pour la télécharger jusqu’à ce qu’il en ait “besoin” — alors qu’il en a besoin immédiatement. Cela nuit considérablement à votre score LCP.
Si votre image hero possède l’attribut loading="lazy" dans votre thème, supprimez-le. Ajoutez plutôt loading="eager" ou fetchpriority="high" :
<img src="banner.jpg" alt="Bannière soldes d'été" loading="eager" fetchpriority="high" />fetchpriority="high" indique au navigateur de donner la priorité au téléchargement de cette image sur 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 chargement anticipé (eager loading) des bannières hero sur Shopify.
La première image de produit sur les pages de collection. Si votre page de collection affiche les images des produits sous forme de grille, la première rangée d’images est visible immédiatement. Elles ne doivent pas utiliser le lazy loading. Seules les images situées 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.
L’impact sur les Core Web Vitals
Un lazy loading correctement implémenté améliore :
- Le LCP (Largest Contentful Paint) — en s’assurant que l’image hero se charge rapidement (sans lazy loading) et que d’autres ressources ne se disputent pas la bande passante.
- Le 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 modifier de manière significative :
- Le CLS (Cumulative Layout Shift) — assurez-vous que les images ont des attributs explicites de largeur (
width) et de hauteur (height) pour réserver l’espace. Sans cela, les images en lazy loading peuvent causer des décalages de mise en page lorsqu’elles se chargent.
Pour avoir un point de repère sur les performances réelles des boutiques concernant ces métriques, consultez notre rapport L’état des performances Shopify 2026.
Article connexe : Ajouter du texte alternatif (Alt Text) aux images sur Shopify. Si vous vous demandez si un hébergeur d’images tiers serait plus performant que celui intégré à Shopify, consultez notre comparaison des CDN d’images pour 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
Les thèmes modernes (Dawn, Sense, Refresh, Craft et la plupart des thèmes post-2021) incluent loading="lazy" par défaut sur les images de produits des pages de collection, les images mises en avant des articles de blog 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.
Non, s'il est correctement implémenté. Google gère très bien le contenu en lazy loading — son robot d'exploration (crawler) déclenche des défilements de la page. 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 sur les images au-dessus de la ligne de flottaison, ce qui détériorerait le LCP.
Il manque les attributs width et height. Sans dimensions explicites, le navigateur ne réserve pas d'espace pour l'image — lorsqu'elle se charge, le contenu saute. 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 fait automatiquement.
Non. Le lazy loading retarde le téléchargement jusqu'à ce que l'image soit "proche de la zone d'affichage (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 chargement rapide (eager loading). L'image hero / LCP doit toujours utiliser loading="eager" et fetchpriority="high".
Pas via l'attribut loading (qui ne fonctionne que sur <img> et <iframe>). La solution la plus propre : décrivez ce que vous voulez à Fudge ("convertir le background CSS du hero en une balise img avec du 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 la zone d'affichage.
Article connexe : Accélérer un thème Shopify.