Chargement paresseux vs chargement immédiat sur Shopify : Réparez le LCP de votre image de héros

Comparaison rapide : chargement paresseux et chargement hâtif

Avant de plonger en profondeur, voici la différence fondamentale. Les deux stratégies contrôlent quand le navigateur télécharge une ressource — mais leurs objectifs sont opposés.

La boutique Shopify idéale utilise les deux Thèmes — chargement rapide pour le contenu que les visiteurs voient en premier, chargement paresseux pour tout ce qu'ils feront défiler plus tard. Le défi est de savoir où tracer la limite, en particulier lorsque « au-dessus de la ligne de flottaison » diffère selon les appareils. Testez la vitesse de votre boutique pour voir comment fonctionne votre stratégie de chargement actuelle.

Comment fonctionne chaque stratégie de chargement sous le capot

Chargement hâtif : le chemin par défaut

Le chargement immédiat est le comportement par défaut du navigateur. Lorsque l'analyseur HTML rencontre une balise <img> sans attribut loading, il place immédiatement l'image dans la file de téléchargement :

Ceci est rapide et prévisible pour les images au-dessus de la ligne de flottaison. L'inconvénient ? Si vous avez 40 images sur une page de collection, le navigateur essaie de télécharger les 40 simultanément. Votre image de héros – celle qui détermine votre Score LCP — doit partager la bande passante avec 39 autres images vers lesquelles le visiteur n'a pas fait défiler.

Chargement différé : différé jusqu'à ce que ce soit nécessaire

Lorsque vous ajoutez loading="lazy" à une image, le navigateur l'enregistre mais ne le télécharge pas jusqu'à ce que IntersectionObserver détecte que l'image s'approche de la fenêtre :

Cette étape supplémentaire est exactement la raison pour laquelle le chargement paresseux de votre image LCP est si coûteux : vous ajoutez une attente inutile pour votre élément visuel le plus important. Mais pour les images situées en dessous de la ligne de flottaison, ce report est un pur avantage : moins de concurrence en matière de bande passante et un rendu initial plus rapide.

Quand utiliser le chargement rapide sur Shopify

Chargez immédiatement tout élément qui apparaît dans la fenêtre d'affichage initiale - ce que le visiteur voit avant défilement. Sur Shopify, cela signifie généralement :

Quand utiliser le chargement différé sur Shopify

Chargement paresseux de tout ce que le visiteur ne verra pas tant qu'il n'aura pas fait défiler. Sur la plupart des boutiques Shopify, c'est la majorité des images :

Pour plus de détails sur ce qu'il faut charger paresseux et la mise en œuvre technique, consultez notre version complète Guide de chargement paresseux de Shopify.

Stratégie de chargement par type de page Shopify

Différents modèles de page ont des éléments LCP et des structures de contenu différents. Voici la stratégie de chargement optimale pour chacun :

Comment mettre en œuvre les deux stratégies de chargement dans Shopify Liquid

Voici le code Liquid pratique pour mettre en œuvre la bonne stratégie de chargement sur votre thème. Ceci suit Chargement paresseux natif de Shopify bonnes pratiques.

Basique : chargement basé sur l'index de section

{%- liquid
  if section.index > 2
    assign loading = "lazy"
  else
    assign loading = "eager"
  endif
-%}

{{ section.settings.image | image_url: width: 1200 | image_tag: loading: loading }}

Avancé : Image LCP avec priorité de récupération

{%- if section.index == 1 -%}
  {%- comment -%} Hero section — LCP image, maximum priority {%- endcomment -%}
  {{ section.settings.image | image_url: width: 1400 | image_tag: loading: "eager", fetchpriority: "high", decoding: "sync" }}
{%- elsif section.index == 2 -%}
  {%- comment -%} Second section — eager but normal priority {%- endcomment -%}
  {{ section.settings.image | image_url: width: 1200 | image_tag: loading: "eager" }}
{%- else -%}
  {%- comment -%} Below fold — lazy load {%- endcomment -%}
  {{ section.settings.image | image_url: width: 1200 | image_tag: loading: "lazy" }}
{%- endif -%}

Grille de produits : première rangée chargée immédiatement, reste différé

{%- for product in collection.products -%}
  {%- if forloop.index <= 4 and section.index <= 2 -%}
    {%- assign img_loading = "eager" -%}
  {%- else -%}
    {%- assign img_loading = "lazy" -%}
  {%- endif -%}

  {{ product.featured_image | image_url: width: 600 | image_tag: loading: img_loading, alt: product.title }}
{%- endfor -%}

fetchpriority : la troisième stratégie de chargement que vous devez connaître

En plus du chargement immédiat et différé, il existe un troisième levier : fetchpriority. Cet attribut ne détermine pas quand une ressource se charge, mais sa priorité par rapport aux autres ressources :

La combinaison de loading="eager" + fetchpriority="high" sur votre image LCP est la stratégie de chargement la plus agressive disponible. Il indique au navigateur : "Téléchargez ceci immédiatement et donnez-lui la priorité sur tout le reste." Pour Optimisation LCP, cette combinaison réduit généralement de 100 à 300 ms votre temps LCP.

Correctif : chargement immédiat de l’image principale Shopify dans theme.liquid

L'un des problèmes de vitesse Shopify les plus courants en 2026 : l'image de votre bannière de héros est chargée de manière différée par défaut, détruisant votre score LCP. De nombreux thèmes, notamment Dawn — ne définissent pas fetchpriority="high" sur l'image du héros, laissant la performance sur la table.

Voici la solution exacte pour votre theme.liquid ou fichier de section héros :

{%- comment -%} Fix: Force eager loading + high priority for hero banner image {%- endcomment -%}
{%- assign hero_image = section.settings.image -%}

{%- if hero_image != blank -%}
  {{ hero_image | image_url: width: 1400 | image_tag:
    loading: "eager",
    fetchpriority: "high",
    decoding: "sync",
    alt: hero_image.alt | default: section.settings.heading,
    class: "hero-banner__image"
  }}
{%- endif -%}

Après avoir effectué cette modification, exécuter un test de vitesse pour vérifier l'amélioration du LCP. Vous devriez constater une amélioration de 100 à 500 ms du temps LCP, en fonction de la taille de votre image de héros et du temps de réponse du serveur. Pour les magasins où la modification du code n'est pas une option, Thunder gère cela automatiquement — il détecte votre élément LCP et applique les attributs de chargement optimaux sans toucher à vos fichiers de thème.

5 erreurs de stratégie de chargement Shopify qui tuent votre score de vitesse

Nous constatons ces erreurs sur des centaines de boutiques Shopify. Chacun vous coûte de vrais points PageSpeed :

Foire aux questions

La bonne stratégie de chargement fait une réelle différence

Le chargement paresseux ou le chargement rapide n'est pas un choix binaire — il s'agit d'appliquer la bonne stratégie au bon élément. Chargez immédiatement votre image LCP avec une priorité élevée, chargez immédiatement le reste du contenu au-dessus de la ligne de flottaison et chargez paresseusement tout ce qui se trouve en dessous de la ligne de flottaison. C'est la formule qui vous permet d'obtenir le rendu initial le plus rapide possible sans gaspiller de bande passante.

Mais n’oubliez pas : la stratégie de chargement des images n’est qu’une partie de l’équation. L’optimisation de vos images Shopify (format, compression et dimensions) est tout aussi importante. De plus, les scripts tiers provenant d’applications nuisent souvent davantage aux performances que des images non optimisées. Une approche globale, qui traite ensemble les images, les scripts, le CSS et les polices, donne les meilleurs résultats.

Étape suivante : Exécutez votre test de vitesse gratuit pour voir l'impact de votre stratégie de chargement actuelle sur les performances, puis explorez notre guide complet d'optimisation de la vitesse Shopify pour une image complète.