Comment diagnostiquer les problèmes de chargement paresseux de Shopify
Avant de passer aux correctifs, confirmez que le chargement différé est réellement interrompu. Voici un diagnostic rapide de 2 minutes :
Étape 1 : Vérifiez l'onglet Réseau
- 1. Ouvrez votre boutique Shopify dans Chrome
- 2. Ouvrez DevTools (F12 ou Cmd+Opt+I sur Mac) Réseau
- 3. Accédez au
- 4. Filtrer par Img (images uniquement)
- 5. Rechargement dur : Ctrl+Maj+R (ou Cmd+Shift+R)
- 6. Comptez les demandes d'images qui se déclenchent immédiatement
- 7. Maintenant, faites défiler lentement vers le bas : de nouvelles demandes apparaissent-elles ?
Si toutes les images se chargent en même temps lors du chargement de la page : Le chargement paresseux ne fonctionne pas du tout.
Si certaines images se chargent lors du défilement mais que beaucoup se chargent à l'avance : Le chargement paresseux fonctionne partiellement mais certaines images sont manquées.
Si les images se chargent au fur et à mesure du défilement : Le chargement différé fonctionne – la suggestion PageSpeed peut concerner un problème différent.
Étape 2 : Inspecter les images individuelles
Cliquez avec le bouton droit sur une image ci-dessous → Inspecter. Vérifiez le
Balise <img> pour :
loading="lazy" → Le chargement paresseux natif est défini
class="lazyload" ou data-src="..." → Chargement paresseux de JavaScript (peut fonctionner mais ajoute une surcharge)
Attribut
Non loading → Image chargée avec impatience par défaut
Vous pouvez également effectuer une vérification rapide auprès de notre test de vitesse Shopify gratuit — il signale automatiquement les problèmes d'image différés.
Ignorer le dépannage : Thunder résout automatiquement les 8 problèmes
Chaque correctif ci-dessous nécessite une édition du code du thème, du temps de développement et une maintenance continue. Thunder Page Speed Optimizer gère le chargement paresseux, le report de script, le CSS critique et l'optimisation des polices en une seule installation - quelle que soit la configuration de votre thème ou de votre application.
- ✦ Fonctionne avec n'importe quel thème — chargement paresseux ancien, nouveau, personnalisé ou cassé
- ✦ Gère le contenu ajouté par les applications — diffère leurs scripts et optimise leurs ressources
- ✦ Détection automatique du LCP — ne charge jamais paresseusement ce qui devrait être impatient
- ✦ Amélioration du score de vitesse moyen de plus de 27 points
Correctif 1 : votre thème n’utilise pas image_tag
Le problème : De nombreux thèmes Shopify, notamment ceux créés avant 2022 ou fortement personnalisés, utilisent de simples balises <img> au lieu du filtre Liquid image_tag de Shopify. Sans image_tag, ils ne bénéficient pas du chargement différé automatique, des images adaptatives via srcset ni de la diffusion en WebP.
Comment vérifier : Ouvrez votre code de thème (Boutique en ligne → Thèmes → Modifier le code) et recherchez image_tag dans les fichiers de section. Si vous trouvez surtout des balises simples <img src= à la place, votre thème n’utilise pas le traitement moderne des images de Shopify.
Le correctif : Remplacez les balises <img> simples par le filtre image_tag. Cela nécessite de modifier les fichiers Liquid du thème :
Avant :
<img src="{{ image | image_url: width: 800 }}" alt="{{ image.alt }}" />Après :
{{ image | image_url: width: 800 | image_tag: loading: "lazy", alt: image.alt }}
Pour le guide complet d'implémentation du chargement paresseux natif, y compris la logique de section.index, consultez notre Guide de chargement paresseux natif de Shopify.
Correctif 2 : les images injectées par l'application contournent le chargement paresseux de votre thème
Le problème : Chaque application Shopify qui ajoute des éléments visuels — widgets d'avis (Judge.me, Loox), badges de confiance (Trust Hero), popups de vente incitative (ReConvert), widgets de discussion (Tidio) — injecte son propre code HTML et ses propres images directement dans la page. Ces images sont non rendu via les modèles Liquid de votre thème, afin que la logique de chargement paresseux de votre thème ne les touche jamais.
La boutique Shopify moyenne compte 6 à 8 applications. Chacun peut injecter 1 à 5 images plus JavaScript. Cela représente potentiellement plus de 30 images et scripts qui se chargent avec impatience et que votre thème ne peut pas contrôler.
Comment vérifier : Dans DevTools, regardez les images ci-dessous qui ont été chargées immédiatement. Cliquez avec le bouton droit → Inspecter. Si l'image est enveloppée dans un <div> avec une classe spécifique à l'application (comme jdgm-widget ou loox-widget) plutôt que dans la section HTML de votre thème, il est injecté par l'application.
Le correctif : C'est le problème le plus difficile à résoudre manuellement. Possibilités :
Contacter chaque développeur d'application et demandez-leur d'ajouter loading="lazy" à leurs images injectées. Certains le feront, mais la plupart n’y donneront pas la priorité.
Écrire du JavaScript personnalisé qui trouve les images injectées par l'application après le chargement de la page et ajoute l'attribut paresseux. Ceci est fragile et se brise lorsque les applications mettent à jour leur code.
Utiliser une application d'optimisation de vitesse qui gère les scripts d'application au niveau du réseau, reportant les charges utiles entières de l'application jusqu'à ce qu'elles soient nécessaires. C'est ce que Thunder le fait automatiquement.
Correctif 3 : JavaScript et le chargement différé natif sont en conflit
Le problème : Certains thèmes incluent une bibliothèque de chargement paresseux JavaScript (comme lazysizes) et l’attribut natif loading="lazy". Cela crée un double traitement : l'IntersectionObserver natif du navigateur se déclenche, et la bibliothèque JS exécute son propre observateur. Le résultat peut être des images qui clignotent, se chargent deux fois ou, dans certains cas, ne se chargent jamais du tout.
Cela se produit également lorsque les commerçants installent une application de chargement différé au-dessus d'un thème qui dispose déjà d'un chargement différé natif.
Comment vérifier : Recherchez les deux sur la même image :
- •
loading="lazy"(natif) - •
class="lazyload"oudata-src(bibliothèque JavaScript)
Si vous voyez les deux, il y a un conflit. Recherchez également lazysizes.js ou des bibliothèques similaires dans le dossier des ressources de votre thème.
Le correctif : Supprimez la bibliothèque JavaScript de chargement différé et utilisez l’attribut natif loading="lazy". En 2026, plus de 96 % des navigateurs le prennent en charge : une bibliothèque JS supplémentaire n’est donc pas nécessaire. Retirez son script du thème et remplacez les attributs data-src par src, avec loading="lazy".
Avant (chargement paresseux JS) :
<img data-src="product.jpg" class="lazyload" alt="Produit" />Après (chargement différé natif) :
<img src="product.jpg" loading="lazy" alt="Produit" width="600" height="400" />Correctif 4 : les images d'arrière-plan CSS ne peuvent pas être chargées paresseusement
Le problème : L'attribut loading="lazy" ne fonctionne que sur les éléments <img> et <iframe>. Les images définies en CSS avec background-image sont toujours téléchargées dès que le CSS est analysé, même si l'élément se trouve bien en dessous de la ligne de flottaison.
De nombreux thèmes utilisent des images d'arrière-plan CSS pour les sections de héros, les superpositions de bannières, les effets de parallaxe et les motifs décoratifs. Ceux-ci sont invisibles au chargement paresseux natif.
Comment vérifier : Dans l’onglet Réseau de DevTools, recherchez les images chargées immédiatement mais non visibles à l’écran. Cliquez sur l’URL de l’image et vérifiez si elle est référencée dans un fichier CSS plutôt que dans une balise HTML <img>.
Le correctif : Deux approches :
Option A : Convertir en balises <img>
Remplacez les images d’arrière-plan CSS par de véritables éléments <img>, positionnés avec CSS à l’aide de object-fit: cover et d’un positionnement absolu. Vous pourrez alors ajouter loading="lazy".
Option B : JavaScript IntersectionObserver
Écrivez du JavaScript qui détecte l’approche des sections situées hors écran, puis applique dynamiquement la propriété CSS background-image. Cette solution est plus complexe, mais conserve votre structure de mise en page.
Pour les bannières initialement visibles, les images d’arrière-plan CSS conviennent : elles doivent se charger immédiatement. Le problème vient des sections ci-dessous utilisant des images d’arrière-plan. Apprenez-en davantage sur l’optimisation de tous les types d’images dans notre Guide d'optimisation des images Shopify.
Correctif 5 : l’attribut loading manque dans les sections personnalisées
Le problème : Les sections par défaut de votre thème peuvent gérer correctement le chargement différé, mais les sections personnalisées (ajoutées par les développeurs ou les applications de création de sections) l'ignorent souvent. Une seule section personnalisée avec des images chargées avec impatience peut charger 5 à 10 images supplémentaires sur chaque page.
Comment vérifier : Inspectez les images dans différentes sections de votre page. Faites attention aux sections qui semblent différentes du style par défaut du thème — il s'agit probablement d'ajouts personnalisés. Vérifiez chacun d'eux pour loading="lazy".
Le correctif : Modifiez chaque fichier de section personnalisée et ajoutez la logique de section.index :
{%- liquid
if section.index > 2
assign loading = "lazy"
else
assign loading = "eager"
endif
-%}
{{ section.settings.image | image_url: width: 1200 | image_tag: loading: loading }}
Appliquez ceci à chaque section personnalisée qui affiche des images. Pour un aperçu de la façon dont section.index fonctionne et quand l'utiliser chargement paresseux ou impatient, voir notre guide comparatif.
Correctif 6 : votre thème charge paresseusement les images au-dessus du pli (ce qui fait mal au LCP)
Le problème : C'est le problème inverse — et ironiquement, c'est pire que de ne pas avoir de chargement paresseux du tout. Certains thèmes appliquent loading="lazy" à toutes les images, y compris la bannière du héros et la photo principale du produit. Cela oblige le navigateur à exécuter IntersectionObserver avant de télécharger votre image la plus importante, ajoutant ainsi 200 à 1 000 ms à votre LCP.
⚠️ Cela vous coûte 1 seconde de LCP
L'équipe de performance de Shopify a mesuré un Pénalité LCP médiane de 1,0 seconde pour les magasins qui chargent paresseusement leur image LCP. Votre image de héros devrait toujours chargement impatient.
Comment vérifier : Ouvrez votre page d’accueil. Faites un clic droit sur l’image principale de la bannière, puis choisissez Inspecter. Si vous voyez loading="lazy", cela nuit à votre LCP. Faites la même vérification sur l’image principale d’une page produit.
Le correctif : Chargez immédiatement les images initialement visibles et ajoutez fetchpriority="high" à votre image LCP :
{{ section.settings.hero_image | image_url: width: 1400 | image_tag: loading: "eager", fetchpriority: "high" }}Pour un dépannage détaillé du LCP, consultez notre Guide d'optimisation Shopify LCP.
Correctif 7 : la largeur et la hauteur manquantes provoquent un changement de disposition
Le problème : Images chargées paresseusement sans cause de dimensions explicites Changement de mise en page cumulatif (CLS). Avant le chargement de l’image, le navigateur ne lui réserve aucun espace. Lorsque l'image est finalement téléchargée, la page saute en poussant le contenu vers le bas. Les visiteurs voient du texte alternatif dans un petit espace effondré, puis un changement visuel soudain – une expérience terrible.
Comment vérifier : Dans DevTools, surveillez les sauts de mise en page lorsque vous faites défiler. Vous pouvez également exécuter un audit Lighthouse : les problèmes CLS seront signalés par « Les éléments de l'image n'ont pas de largeur et de hauteur explicites ». Attributs
Le correctif : Ajoutez toujours les attributs width et height aux images, ou utilisez la propriété CSS aspect-ratio :
Option A : Attributs HTML
<img src="product.jpg" loading="lazy" alt="Produit" width="600" height="400" />Option B : format d'image CSS
.product-image {
aspect-ratio: 3 / 2;
width: 100%;
object-fit: cover;
} Conseil de pro : Shopify image_tag ajoute automatiquement les attributs de largeur et de hauteur. Si vous utilisez du brut
Balises <img> , vous devez les ajouter vous-même. C'est une raison de plus pour utilise le filtre image_tag natif de Shopify.
Correctif 8 : Compatibilité Safari et navigateur
Le problème : Safari a ajouté la prise en charge native du chargement paresseux dans la version 15.4 (mars 2022). Si vous testez avec une version plus ancienne de Safari, le chargement paresseux ne fonctionnera pas. Plus couramment, le seuil de chargement paresseux de Safari est différent de celui de Chrome — Safari commence à charger les images paresseuses plus tôt (plus loin de la fenêtre d'affichage), ce qui peut donner l'impression que le chargement paresseux ne fonctionne pas sur les appareils Apple.
Comment vérifier : Si le chargement différé fonctionne dans Chrome mais pas dans Safari, vérifiez la version de Safari. Notez également que l'implémentation d'IntersectionObserver de Safari a des marges racine légèrement différentes : les images peuvent commencer à charger 2 à 3 hauteurs d'écran avant d'entrer dans la fenêtre d'affichage.
Le correctif : Dans la plupart des cas, le comportement de Safari est en fait correct : il est simplement plus agressif en matière de préchargement. Si vous avez besoin d'une parité exacte entre les navigateurs, vous aurez besoin d'un chargement paresseux basé sur JavaScript avec des seuils explicites, mais le chargement paresseux natif avec des seuils par défaut du navigateur est l'approche recommandée en 2026.
Pour les vraiment paranoïaques, cochez caniuse.com/loading-lazy-attr pour la prise en charge actuelle du navigateur : elle est de plus de 96 % à l'échelle mondiale, couvrant pratiquement tous les acheteurs Shopify.
Quand arrêter le dépannage DIY
Si 2 à 3 de ces problèmes se produisent simultanément (ce qui est courant dans les magasins proposant des thèmes plus anciens et plusieurs applications), les résoudre manuellement devient peu pratique. Chaque correctif nécessite des modifications du code du thème qui peuvent être interrompues lors des mises à jour du thème, et le contenu injecté par l'application est essentiellement hors de votre contrôle.
C'est ici qu'un gagne sa place. Au lieu de corriger des problèmes individuels, vous obtenez une solution qui gère l'ensemble de la pile d'optimisation (images, scripts, CSS, polices) sur n'importe quel thème et n'importe quelle combinaison d'applications.
Pas prêt pour une application ? Au minimum, effectuez un test de vitesse gratuit pour comprendre votre base de référence actuelle et identifier les problèmes qui ont réellement le plus d'impact sur vos performances. Pour des conseils d'optimisation plus larges, notre guide complet d'optimisation de la vitesse Shopify couvre chaque technique en détail.
Foire aux questions
Comment savoir si le chargement différé fonctionne sur ma boutique Shopify ?
Ouvrez Chrome DevTools (F12) → onglet Réseau → filtrer par 'Img'. Rechargez la page sans utiliser le cache. Si toutes les images se chargent en même temps pendant le chargement de la page, le chargement paresseux ne fonctionne pas. Si de nouvelles demandes d’images n’apparaissent que lorsque vous faites défiler vers le bas, le chargement différé est actif. Vous pouvez également cliquer avec le bouton droit sur une image située sous la zone initialement visible → Inspecter et rechercher loading='lazy' dans le code HTML.
Pourquoi PageSpeed Insights indique-t-il toujours « Différer les images hors écran » si j'ai un chargement paresseux ?
Cela signifie généralement que le chargement différé n'est pas appliqué à toutes les images ci-dessous. Causes courantes : votre thème ne charge que paresseusement certaines images mais en oublie d'autres, les images injectées par l'application contournent le chargement paresseux du thème ou les images d'arrière-plan CSS ne peuvent pas être chargées paresseusement avec l'attribut de chargement. Il peut également se déclencher si le seuil de chargement paresseux du navigateur charge légèrement les images avant qu'elles n'entrent dans la fenêtre d'affichage.
Les applications Shopify peuvent-elles interrompre le chargement paresseux de mon thème ?
Oui. Les applications injectent leur propre code HTML, images et scripts directement dans le DOM, en contournant entièrement les modèles Liquid de votre thème. Ces images injectées par l'application n’auront pas l’attribut loading='lazy' à moins que le développeur de l'application ne l'ait spécifiquement ajouté. De plus, certaines applications incluent leur propre code JavaScript à chargement différé qui peut entrer en conflit avec le chargement différé du navigateur natif, provoquant un double traitement ou des images qui ne se chargent jamais.
Dois-je utiliser une application à chargement différé ou la corriger dans le code de mon thème ?
Si le problème est mineur (quelques images manquent l'attribut de chargement), le résoudre dans le code du thème est simple. Si vous avez plusieurs applications injectant des images, un thème fortement personnalisé, ou si vous souhaitez une optimisation complète au-delà du simple chargement paresseux des images (différé de script, CSS critique, préchargement de polices), une application comme Thunder Page Speed Optimizer gère tout automatiquement et fonctionne quel que soit le thème ou la configuration de l'application.
Le chargement paresseux fonctionne-t-il sur Shopify mobile ?
Oui, le chargement paresseux natif (loading='lazy') fonctionne sur tous les navigateurs mobiles modernes, y compris Safari sur iOS 15.4+, Chrome sur Android et Samsung Internet. Si le chargement différé semble interrompu uniquement sur mobile, recherchez : les bibliothèques de chargement différé JavaScript qui entrent en conflit avec les navigateurs mobiles, les images rendues à différentes tailles sur mobile qui peuvent correspondre au seuil de préchargement du navigateur ou les modèles de thème spécifiques aux mobiles qui n'incluent pas l'attribut de chargement.
Comment puis-je corriger le chargement rapide sur mon image de bannière Shopify theme.liquid hero ?
Si l’image principale de votre bannière dans theme.liquid utilise loading='lazy' au lieu de loading='eager', cela peut dégrader votre LCP de 1 seconde au maximum. Recherchez sa balise dans le fichier de section de l’en-tête ou de la bannière, pas directement dans theme.liquid : vérifiez sections/header.liquid ou sections/image-banner.liquid. Remplacez loading='lazy' par loading='eager' et ajoutez fetchpriority='high'. Avec image_tag, utilisez la logique section.index : les sections d’index 1 ou 2 doivent charger leurs images immédiatement, et les suivantes de manière différée. Thunder Page Speed Optimizer détecte automatiquement votre image LCP et ne la charge jamais de manière différée, quelle que soit la configuration du thème.
Pourquoi mes images chargées paresseusement affichent-elles un texte alternatif avant le chargement ?
Cela se produit lorsque les images chargées paresseusement n'ont pas d'attributs explicites de largeur et de hauteur (ou de dimensions CSS). Sans dimensions, le navigateur ne peut pas réserver d'espace pour l'image, il affiche donc le texte alternatif dans un espace réduit. Lorsque l'image se charge enfin, la page saute (changement de mise en page). Corrigez ce problème en vous assurant que chaque image chargée paresseusement possède des attributs de largeur et de hauteur, ou utilisez le filtre image_tag de Shopify qui ajoute automatiquement des dimensions.
Faites fonctionner correctement votre chargement différé Shopify
Les problèmes de chargement paresseux sur Shopify sont presque toujours dus à des lacunes dans l'implémentation du thème, à des conflits d'applications ou à un comportement incorrect au-dessus du pli. Les correctifs vont du simple (ajout de loading="lazy" à quelques images) au complexe (refonte des sections personnalisées et gestion du contenu injecté par l'application).
N'oubliez pas : même le chargement paresseux parfait ne concerne que la livraison d'images. Scripts bloquant le rendu et CSS non optimisés causent souvent plus de dégâts que les images non différées. Une approche globale – gestion conjointe des images, des scripts, du CSS et des polices – donne les meilleurs résultats.
Commencez ici : Testez la vitesse de votre boutique pour voir exactement ce qui affecte les performances, puis appliquez les correctifs ci-dessus - ou laissez Thunder le gère automatiquement. Les forfaits commencent à 19,99$/mois avec un essai gratuit.