Ce que Shopify fait nativement pour le chargement paresseux
Shopify n'a pas une seule bascule de « chargement paresseux » dans votre panneau d'administration. Il n'y a pas de case à cocher sous Paramètres → Performances qui l'active dans tout le magasin. Au lieu de cela, Shopify fournit outils pour les développeurs de thèmes pour implémenter le chargement différé – et l'utilisation ou non de ces outils dépend entièrement de votre thème.
Voici ce que Shopify propose au niveau de la plateforme :
Le filtre Liquid image_tag — Lorsque les thèmes utilisent ce filtre pour afficher les images, Shopify peut ajouter automatiquement loading="lazy" aux images des sections situées plus bas dans la page.
La propriété section.index — Elle indique la position d’une section sur la page. Les développeurs peuvent ainsi charger immédiatement les images des 2 premières sections et différer celles qui se trouvent en dessous.
Conversion automatique WebP/AVIF — Le CDN de Shopify diffuse automatiquement les images dans des formats modernes lorsque le navigateur les prend en charge, réduisant ainsi la taille des fichiers de 25 à 50 %.
Images adaptatives — Le filtre image_tag génère plusieurs tailles d’image pour que le navigateur télécharge celle qui convient à chaque écran.
Ce sont des éléments de base solides. Mais ce ne sont que des éléments de base, et non une solution complète. L'écart entre les « outils disponibles » et les « outils réellement utilisés dans votre magasin » est l'endroit où se situent la plupart des problèmes de performances.
Curieux de savoir où se situe votre magasin ? Exécutez un test de vitesse gratuit pour voir si le chargement paresseux aide ou nuit à vos performances.
Comment fonctionnent image_tag et section.index dans Shopify
Le filtre Liquid image_tag est la méthode recommandée par Shopify pour afficher les images dans les thèmes. Correctement utilisé, il gère les dimensions adaptatives, la conversion de format et le chargement différé en une seule ligne :
{{ product.featured_image | image_url: width: 800 | image_tag: loading: "lazy" }}La combinaison avec section.index est particulièrement utile. Cette propriété indique la position d’une section sur la page. L’équipe chargée des performances chez Shopify recommande de l’utiliser ainsi :
{%- liquid
if section.index > 2
assign loading = "lazy"
else
assign loading = "eager"
endif
-%}
{{ section.settings.image | image_url: width: 1080 | image_tag: loading: loading }}Ce code charge immédiatement les images des deux premières sections (généralement la bannière principale et la collection mise en avant), puis diffère celles qui se trouvent plus bas. Cette approche évite l'erreur la plus fréquente de chargement différé : différer l'image LCP.
Détail important : La propriété section.index n’a été introduite qu’à la fin de 2022. Les thèmes plus anciens ne l’utilisent pas : ils diffèrent souvent toutes les images (ce qui nuit au LCP) ou aucune (ce qui dégrade les performances pour les contenus situés sous la zone visible).
Le filtre image_tag génère aussi un attribut srcset avec plusieurs largeurs d’image, afin que le navigateur choisisse la taille optimale. Cela complète le chargement différé : lorsqu’une image devient nécessaire, le navigateur sélectionne dans srcset la version adaptée à la largeur de la zone visible.
Quels thèmes Shopify ont un chargement paresseux natif ?
Tous les thèmes ne sont pas égaux en matière d'implémentation du chargement paresseux. Voici la répartition :
Thèmes avec un bon chargement paresseux natif
Dawn (et les thèmes qui en dérivent) utilise correctement image_tag et section.index, et ajoute fetchpriority="high" aux images LCP. C’est l’implémentation de référence de Shopify et un modèle en matière de performances des thèmes.
Sense, Craft, Taste, Colorblock — Ces thèmes gratuits de Shopify reposent sur l’architecture Dawn et héritent de la même logique de chargement différé.
La plupart des thèmes premium mis à jour après 2023 — Des développeurs de thèmes réputés comme Out of the Sandbox, Archetype et Prestige ont mis à jour leurs thèmes pour les utiliser section.index et image_tag.
Thèmes avec un chargement paresseux natif faible ou inexistant
Thèmes construits avant 2022 — Ceux-ci sont antérieurs section.index et utilisent souvent des bibliothèques de chargement paresseux JavaScript comme lazysizes, ou pas de chargement paresseux du tout.
Thèmes fortement personnalisés — Même si le thème de base avait un chargement paresseux, les modifications personnalisées le cassent souvent. Les développeurs qui ajoutent des sections personnalisées ignorent fréquemment le
Logique section.index .
Thèmes utilisant le chargement paresseux uniquement JS — Certains thèmes utilisent des lazysizes ou des bibliothèques similaires qui ajoutent une surcharge JavaScript et peuvent entrer en conflit avec le chargement différé du navigateur natif.
Vous ne savez pas à quelle catégorie appartient votre thème ? Le moyen le plus simple de le savoir est d'inspecter votre site - ce que nous aborderons dans le Section de test ci-dessous. Pour un aperçu plus approfondi des performances du thème, consultez notre guide sur le thèmes Shopify les plus rapides Guide.
5 choses que le chargement paresseux natif de Shopify ne couvre pas
Même avec un thème moderne utilisant image_tag correctement, le chargement paresseux natif de Shopify présente des angles morts importants :
1. Images et scripts injectés par l'application
Chaque application Shopify qui ajoute des éléments visuels (widgets d'avis, badges de confiance, popups de vente incitative, widgets de discussion) injecte ses propres images et scripts directement dans le DOM. Ceux-ci contournent entièrement le chargement paresseux de votre thème car ils ne sont pas rendus via Liquid. image_tag.
La boutique Shopify moyenne a 6 à 8 applications installées. Chacun ajoute des scripts qui se chargent immédiatement, quel que soit leur emplacement sur la page. C'est le le plus gros tueur de vitesse sur la plupart des magasins — et cela sort complètement du cadre du chargement paresseux natif.
2. Images d'arrière-plan CSS
L'attribut loading="lazy" ne fonctionne que sur les éléments <img> et <iframe>. Les images définies comme arrière-plans CSS (background-image: url(...)) — courantes dans les sections hero, les bannières et les superpositions — sont toujours chargées immédiatement. Le navigateur les télécharge dès qu'il analyse le CSS, même si la section se trouve bien en dessous de la ligne de flottaison.
3. Vidéos et intégrations
Pendant que loading="lazy" fonctionne techniquement sur les iframes (y compris les intégrations YouTube), celles de Shopify
Le filtre image_tag ne s'applique pas aux éléments vidéo ou aux iframes - il s'agit uniquement d'images. Les commerçants qui ajoutent des vidéos de produits, des critiques YouTube ou des intégrations Instagram doivent gérer le chargement différé séparément. Voir notre Guide d'optimisation vidéo Shopify pour les motifs de façade et les techniques de chargement différé. Pour une compréhension plus approfondie des compromis, consultez chargement paresseux vs chargement impatient sur Shopify.
4. Décisions de chargement réactives
Le section.index > 2 approche est une heuristique approximative. Ce qui est "sous la ligne de flottaison" sur un moniteur de bureau est très différent d'un téléphone portable. Une grille d'images qui affiche 4 colonnes sur un ordinateur de bureau (toutes visibles) pourrait afficher 1 colonne sur mobile (seulement 1 visible). Le chargement paresseux natif ne s'adapte pas à la taille de l'écran — il utilise la même logique basée sur les sections quel que soit l'appareil.
5. Différé de script
Le chargement paresseux des images ne représente que la moitié de l'équation des performances. Scripts bloquant le rendu — à la fois de votre thème et des applications — causent souvent plus de dommages aux performances que les images non optimisées. Le chargement paresseux natif gère les images mais ne fait rien pour JavaScript. Le report des scripts d'application, l'intégration du CSS critique et le préchargement des polices nécessitent un ensemble d'outils entièrement différent.
Comblez chaque lacune : Thunder gère ce que le chargement paresseux natif ne peut pas
Thunder Page Speed Optimizer fonctionne au-dessus de le chargement paresseux natif de votre thème — comblant toutes les lacunes répertoriées ci-dessus. Il identifie automatiquement votre image LCP et la charge avec impatience, charge paresseusement tout ce qui se trouve en dessous de la ligne de flottaison (y compris le contenu injecté par l'application) et diffère les scripts non critiques que le chargement paresseux de l'image ne peut pas toucher.
- ✦ Diffère les scripts d'application — le plus gros tueur de vitesse qu'aucun chargement paresseux d'image ne peut corriger
- ✦ Détection intelligente LCP — ne charge jamais paresseusement le contenu au-dessus de la ligne de flottaison, quel que soit l'appareil
- ✦ Fonctionne avec n'importe quel thème — ancien, nouveau, personnalisé ou prêt à l'emploi
- ✦ CSS critique intégré + polices de préchargement — optimisation complète, pas seulement le chargement d'images
La plupart des magasins voient un Amélioration du score de vitesse de plus de 27 points après l'installation — car Thunder s'adresse à la pile d'optimisation complète, pas seulement au chargement des images. Voir tarifs.
Installer Thunder — Essai gratuit →Comment vérifier si votre boutique Shopify a un chargement paresseux
Avant d'apporter des modifications, vérifiez si votre thème implémente déjà le chargement différé. Voici trois façons de vérifier :
Méthode 1 : Inspecter l'élément (30 secondes)
- 1. Ouvrez votre boutique dans Chrome
- 2. Faites défiler jusqu'à une image bien en dessous du pli (par exemple, un produit dans la troisième rangée d'une collection)
- 3. Cliquez avec le bouton droit sur l'image → Inspecter
- 4. Rechercher
Balise
loading="lazy"dans le<img>
Si vous voyez loading="lazy", votre thème utilise le chargement différé natif pour cette image. Si vous voyez loading="eager" ou si l’attribut loading est absent, ce n’est pas le cas.
Méthode 2 : onglet Réseau Chrome DevTools
- 1. Ouvrez DevTools (F12) → onglet Réseau
- 2. Filtrer par "Img"
- 3. Rechargement dur (Ctrl+Shift+R)
- 4. Surveillez le nombre d'images — si toutes les images se chargent immédiatement, le chargement paresseux ne fonctionne pas
- 5. Maintenant, faites défiler lentement vers le bas — si de nouvelles demandes d'images apparaissent pendant que vous faites défiler, le chargement différé est actif
Méthode 3 : PageSpeed Insights
Gérez votre boutique à travers Informations Google PageSpeed. Si vous voyez la recommandation « Différer les images hors écran », vos images ci-dessous ne sont pas chargées paresseusement. Si cette recommandation n'apparaît pas, le chargement différé fonctionne probablement. Vous pouvez également utiliser notre test de vitesse Shopify gratuit pour une évaluation rapide.
Ajout manuel du chargement paresseux natif à Shopify
Si votre thème n'a pas de chargement paresseux ou ne l'implémente pas correctement, voici comment l'ajouter manuellement. Cela nécessite de modifier les fichiers Liquid de votre thème – effectuez d'abord une sauvegarde.
Étape 1 : utilisez image_tag au lieu des balises img
Recherchez les instances où votre thème utilise du brut
Balises <img> et remplacez-les par celles de Shopify
Filtre image_tag . Cela seul vous donne des images réactives, une conversion WebP et la base d'un chargement paresseux.
Avant (balise img manuelle) :
<img src="{{ product.featured_image | image_url: width: 800 }}" alt="{{ product.title }}" />Après (image_tag avec chargement paresseux) :
{{ product.featured_image | image_url: width: 800 | image_tag: loading: "lazy", alt: product.title }}Étape 2 : Ajouter la logique section.index
Pour éviter le chargement paresseux des images au-dessus de la ligne de flottaison, ajoutez une logique conditionnelle basée sur la position de la section :
{%- liquid
if section.index > 2
assign loading = "lazy"
else
assign loading = "eager"
endif
-%}
{{ section.settings.image | image_url: width: 1080 | image_tag: loading: loading }}Étape 3 : Ajoutez une priorité de récupération à votre image LCP
Pour votre image de héros ou l'image principale de votre produit (l'élément LCP probable), ajoutez fetchpriority="high" pour indiquer au navigateur de le prioriser :
{{ section.settings.hero_image | image_url: width: 1200 | image_tag: loading: "eager", fetchpriority: "high" }} ⚠️Important : Utiliser uniquement fetchpriority="high" sur 1 à 2 images par page. L’utiliser sur plusieurs images va à l’encontre de l’objectif : si tout est hautement prioritaire, rien ne l’est. Pour Stratégies d'optimisation du LCP, voir notre guide dédié.
Erreurs courantes de chargement paresseux natif sur Shopify
❌ Chargement paresseux de l'image du héros
Ajout loading="lazy" à votre bannière de héros ou à l'image de votre produit vedette oblige le navigateur à attendre que IntersectionObserver confirme qu'il est visible, ce qui ajoute 200 à 1 000 ms à votre LCP. L'équipe performance de Shopify a confirmé que cela coûte en moyenne 1,0 seconde de LCP.
❌ Mixage Native et JS Lazy Loading
Certains thèmes incluent lazysizes.js et natif
Attributs loading="lazy". Cela crée un double traitement : les déclencheurs de chargement différé natifs du navigateur, et la bibliothèque JS exécute sa propre logique d'intersection. Cela gaspille du temps CPU et peut provoquer le flash ou le chargement des images deux fois. Choisissez-en un : le natif est le bon choix en 2026.
❌ Attributs de largeur et de hauteur manquants
Chargement paresseux sans explicite
Les attributs width et height (ou format CSS) provoquent Changement de mise en page cumulatif (CLS). Lorsque l'image paresseuse se charge, la page saute à mesure que l'image pousse le contenu vers le bas. Le
Le filtre image_tag ajoute automatiquement des dimensions - une autre raison de l'utiliser au lieu du brut <img> .
❌ En supposant que toutes les sections utilisent image_tag
Même dans les thèmes qui utilisent généralement image_tag, les sections personnalisées et les applications de sections tierces utilisent souvent du brut
Balises <img> . Une section mal chargée peut nuire aux performances de la page entière. Auditez toutes les sections, pas seulement les valeurs par défaut du thème.
Ces erreurs sont exactement la raison pour laquelle de nombreux commerçants préfèrent une solution globale. Si vous souhaitez avoir une idée complète de ce qui ralentit votre magasin, diagnostiquez les problèmes de vitesse de votre magasin avec notre guide étape par étape, ou simplement suivez le guide d'optimisation complet.
Foire aux questions
Shopify diffère-t-il automatiquement le chargement des images ?
Partiellement. Le filtre Liquid image_tag de Shopify définit loading='lazy' pour les images des sections dont la valeur section.index est supérieure à 2. Les images des deux premières sections sont donc chargées immédiatement, et celles des suivantes de façon différée. Cela ne fonctionne toutefois que dans les thèmes qui utilisent correctement image_tag. De nombreux thèmes anciens ou personnalisés ne l’utilisent pas du tout : leurs images sont alors chargées immédiatement par défaut. Thunder Page Speed Optimizer applique automatiquement un chargement différé intelligent à tous les thèmes.
Le thème Dawn intègre-t-il un chargement paresseux ?
Oui. Dawn utilise le filtre Liquid image_tag de Shopify et la propriété section.index pour différer automatiquement le chargement des images dans les sections qui suivent les deux premières. Il utilise aussi fetchpriority='high' pour les images LCP. Son implémentation ne couvre cependant pas les images injectées dynamiquement par les applications, les images d’arrière-plan définies en CSS, les vidéos ni les iframes. Tous ces éléments peuvent également bénéficier d’un chargement différé.
Ai-je besoin d'une application à chargement différé si mon thème l'a déjà ?
Cela dépend de la qualité de l’implémentation de votre thème. S’il utilise correctement le filtre natif image_tag de Shopify et que vous avez peu d’applications, le chargement différé intégré peut suffire. En revanche, si vous utilisez plusieurs applications qui injectent leurs propres images et scripts, un thème personnalisé ou une optimisation complète incluant le report des scripts, le CSS critique et le préchargement des polices, une application comme Thunder apporte des résultats nettement meilleurs que le seul chargement différé du thème.
Quelle est la différence entre le chargement différé natif de Shopify et le chargement différé du navigateur ?
Le chargement différé du navigateur repose sur l’attribut HTML loading='lazy', qui retarde le téléchargement d’une image jusqu’à ce que l’utilisateur s’en approche en faisant défiler la page. Il fonctionne dans plus de 96 % des navigateurs modernes. Le chargement différé natif de Shopify désigne le filtre Liquid image_tag, qui ajoute automatiquement loading='lazy' aux images des sections situées sous la ligne de flottaison. Liquid de Shopify définit l’attribut et le navigateur applique le chargement différé.
Le chargement différé natif de Shopify peut-il nuire à mon score de vitesse ?
Oui. Si le thème applique loading='lazy' aux images visibles dès l’ouverture de la page, il retarde le LCP en ajoutant une étape IntersectionObserver inutile. L’équipe chargée des performances chez Shopify a constaté que les boutiques qui diffèrent le chargement de leur image LCP ont un LCP médian plus lent de 1,0 seconde que celles qui la chargent immédiatement. Les thèmes bien implémentés utilisent section.index pour l’éviter, mais tous ne le font pas correctement.
L'essentiel sur le chargement paresseux natif de Shopify
Shopify propose un chargement différé natif, mais il s'agit d'un outil destiné aux développeurs de thèmes, et non d'une fonctionnalité à l'échelle du magasin. Si vous êtes sur un thème moderne comme Dawn qui implémente image_tag et section.index correctement, vos images de thème sont probablement chargées correctement paresseusement. Mais cela laisse toujours le contenu injecté par l’application, les images d’arrière-plan CSS, les vidéos et – surtout – les scripts bloquant le rendu complètement sans réponse.
Pour la plupart des magasins, le chargement paresseux natif couvre environ 30 à 40 % de l'opportunité d'optimisation. Le reste nécessite report du script, optimisation des images, inlining CSS critique et hiérarchisation intelligente des ressources - exactement quoi Thunder Page Speed Optimizer le fait automatiquement.
Commencez par tester votre boutique : Exécutez un test de vitesse gratuit pour voir où vous en êtes, puis décidez si le chargement paresseux natif est suffisant ou si vous avez besoin d'une approche plus complète.