Qu'est-ce que le chargement différé ?
Le chargement paresseux est une stratégie qui retarde le chargement des ressources non critiques jusqu'à ce qu'elles soient réellement nécessaires. Au lieu de télécharger chaque image de la page au moment où un visiteur arrive, le navigateur charge uniquement les images au fur et à mesure que le visiteur les fait défiler.
Pensez-y comme à la cuisine d'un restaurant : au lieu de préparer chaque plat du menu dès l'ouverture du restaurant, ils préparent chaque plat lorsqu'un client le commande. Le résultat ? Premier service plus rapide et moins d’efforts inutiles.
Sur une page de produit ou de collection Shopify typique, vous pouvez avoir 20 à 50 images. Sans chargement paresseux, le navigateur essaie de tous les télécharger simultanément, luttant pour la bande passante et ralentissant les images que votre visiteur voit réellement en premier : la bannière du héros, la photo du produit, les icônes de navigation.
Avec un chargement paresseux, seul le au-dessus de la ligne de flottaison Les images se chargent immédiatement. Tout ce qui se trouve en dessous du pli attend que le visiteur défile à proximité. Le résultat : un rendu de page initial plus rapide, une utilisation moindre de la bande passante et une meilleure expérience, en particulier sur mobile.
Comment ça marche techniquement : Le navigateur utilise le API IntersectionObserver pour surveiller quand un élément est sur le point d'entrer dans la fenêtre. Lorsqu'il détecte que l'image est proche, il déclenche le téléchargement. Avec chargement paresseux natif (chargement="paresseux"), this is all handled by the browser — zero JavaScript required from your end.
Pourquoi le chargement paresseux est important pour les magasins Shopify
Les magasins Shopify sont par nature riches en image. Photos de produits, images de style de vie, bannières de collection, badges de confiance, widgets d'application : une page d'accueil typique peut facilement contenir plus de 30 images totalisant 5 à 15 Mo de données.
Sans chargement paresseux, toutes ces images sont en concurrence pour la bande passante lors du chargement initial de la page. Voici ce que cela signifie en pratique :
LCP plus lent (plus grande peinture à contenu) : L'image du héros — l'élément visuel le plus important — se charge plus lentement car elle partage la bande passante avec 30 autres images vers lesquelles le visiteur n'a même pas encore fait défiler.
Taux de rebond plus élevés sur mobile : Les connexions mobiles sont plus lentes et plus variables. Le chargement de 10 Mo d'images sur une connexion 4G peut prendre 8 à 12 secondes. Si votre boutique ne s'affiche pas rapidement, Les visiteurs du rebondissent — et ils ne reviennent pas.
Bande passante gaspillée : La plupart des visiteurs ne font pas défiler la page jusqu'en bas. Si 60 % de vos images sont en dessous de la ligne de flottaison et que 70 % des visiteurs partent avant de les faire défiler, vous téléchargez des mégaoctets de données que personne ne voit.
Éléments essentiels du Web inférieur : Google utilise Core Web Vitals comme signal de classement. Un chargement excessif de l'image a un impact direct sur LCP et peut provoquer des changements de mise en page (CLS) si les dimensions de l'image ne sont pas définies.
Un chargement paresseux approprié peut réduire le poids initial de la page de 40–70% sur les pages riches en images. Cela se traduit directement par une première peinture plus rapide et une meilleure expérience utilisateur. Le chargement paresseux n’est cependant qu’une pièce du puzzle – pour une image complète, lisez notre guide d'optimisation complet.
L'erreur de chargement paresseux n°1 (et cela vous coûte 1 seconde)
Voici la vérité contre-intuitive : l'erreur de chargement paresseux la plus courante n'est pas l'échec du chargement paresseux : il s'agit d'un chargement paresseux trop agressif.
Plus précisément, chargement paresseux de votre image de héros ou de votre élément LCP. Selon La propre équipe de performance de Shopify:
⚠️ Le Tueur LCP
"Les sites Shopify qui chargent paresseusement leur image LCP ont un LCP médian qui est 1,0 seconde plus lente que ceux qui sont chargés avec impatience."
— Équipe de performances Shopify, performance.shopify.com
Pourquoi cela se produit-il ? Lorsque vous définissez chargement="paresseux" sur une image au dessus de la ligne de flottaison, vous ajoutez une étape inutile :
Sans chargement différé (correct) :
Le navigateur lit HTML → Trouve l'image → Commence le téléchargement immédiatement
Avec chargement paresseux sur LCP (faux) :
Le navigateur lit HTML → Recherche l'image → Marque comme paresseuse → Attend IntersectionObserver → Détecte que l'image est dans la fenêtre d'affichage → Alors commence le téléchargement
Cette étape de détection supplémentaire ajoute 200 à 1 000 ms de retard à votre image la plus importante. Sur mobile avec une exécution JavaScript plus lente, c'est encore pire.
La règle est simple :
- ✓ Au dessus de la ligne de flottaison : Charge impatiente (non
attribut
chargement Attribut, ouchargement="impatient") - ✓ Sous le pli : Chargement paresseux (
chargement="paresseux") - ✗ Jamais : Chargement paresseux de l'image du héros, de l'image du produit ou de tout candidat LCP
Cela semble simple, non ? En pratique, c'est délicat. « Au-dessus de la ligne de flottaison » est différent sur chaque appareil, chaque taille d'écran et chaque modèle de page. Ce qui se trouve au-dessus de la ligne de flottaison sur un écran de bureau de 27 pouces peut se trouver en dessous de la ligne de flottaison sur un iPhone SE. Pour y parvenir manuellement, il faut être attentif à des dizaines de points d'arrêt.
Ignorer le travail manuel : Thunder gère automatiquement le chargement paresseux
Thunder Page Speed Optimizer s'applique stratégies de chargement intelligentes sur l'ensemble de votre magasin. Il identifie automatiquement votre image LCP et la charge avec impatience tout en chargeant paresseusement tout ce qui se trouve en dessous du pli — pas de changement de code, pas d'édition de thème, pas de devinettes sur les points d'arrêt.
Mais Thunder va au-delà du chargement paresseux de base. Il également :
- ✦ Diffère les scripts d'application bloquant le rendu — le plus gros tueur de vitesse que le chargement paresseux seul ne peut pas réparer
- ✦ Inlines critical CSS pour que votre page s'affiche instantanément
- ✦ Précharge les polices pour éliminer le Flash of Invisible Text (FOIT)
- ✦ Surveille quotidiennement pour que les optimisations restent efficaces lorsque vous ajoutez des produits et des applications
La plupart des magasins voient un Amélioration du score de vitesse de plus de 27 points quelques minutes après l'installation. Aucun développeur n'est nécessaire. Vérifier les plans pour trouver la bonne solution pour votre magasin.
Installer Thunder — Essai gratuit →Thunder est-il déjà installé ? Vous pouvez ignorer les sections de mise en œuvre manuelle ci-dessous – Thunder gère tout cela automatiquement. Continuez à lire si vous voulez comprendre ce qui se passe sous le capot.
Chargement paresseux natif ou JavaScript : lequel utiliser en 2026
Il existe deux approches pour le chargement paresseux des images, et cette décision est plus importante que la plupart des développeurs Shopify ne le pensent.
Chargement paresseux natif (chargement="paresseux")
Ajouté à la spécification HTML en 2019, le chargement différé natif est désormais pris en charge par 96 %+ des navigateurs (toutes les versions modernes de Chrome, Firefox, Safari et Edge). Vous ajoutez simplement chargement="paresseux" à votre
Étiquette