Préchargement de l'image Shopify Hero : Correction de LCP avec fetchpriority et Liquid (2026)

Solution rapide avec Thunder

Quand le préchargement de l'image du héros aide réellement

Largest Contentful Paint mesure le moment où le plus grand élément de texte ou d'image visible termine son rendu. Le bon seuil de Google est de 2,5 secondes ou moins pour au moins 75 % des utilisateurs réels. Sur les pages d'accueil, les pages de destination et les pages de collection de Shopify, l'élément LCP est souvent l'image de la bannière du héros.

Le ​​préchargement est utile lorsque le navigateur découvrirait autrement cette image de héros tardivement. Cela se produit lorsque l'URL de l'image est enfouie dans un extrait de section, chargée via JavaScript, cachée derrière une logique réactive ou référencée après de nombreuses balises CSS et de script. Le préchargement indique au navigateur : récupérez cette image importante plus tôt.

Le préchargement ne corrige pas une image de 900 Ko, un curseur qui attend JavaScript ou ressources bloquant le rendu qui retarde la page entière. C'est une partie de la chaîne LCP. Utilisez-le avec la compression d'image, les dimensions correctes et le nettoyage de script.

Étape 1 : Confirmer l'élément LCP

Exécutez PageSpeed Insights ou Chrome DevTools Performance. Dans Lighthouse, développez le diagnostic LCP et vérifiez quel élément est signalé. Si c'est l'image du héros, continuez. S'il s'agit d'un titre ou d'une image de produit, préchargez plutôt cette ressource.

Ne devinez pas. Les thèmes Shopify affichent souvent différents atouts de héros sur ordinateur et mobile, et les curseurs peuvent permettre à un élément différent de gagner du LCP sur mobile. Notre guide des résultats des tests de vitesse explique comment lire le rapport sans rechercher la mauvaise métrique.

Étape 2 : Précharger l'URL exacte de l'image Shopify

Ajoutez le lien de préchargement dans thème.liquide à l'intérieur de la tête, avant les scripts lourds. Utilisez le même objet image et la même largeur que ceux utilisés par votre héros.

{%- if template.name == 'index' and settings.hero_image != blank -%}
  <link
    rel="preload"
    as="image"
    href="{{ settings.hero_image | image_url: width: 1600 }}"
    imagesrcset="
      {{ settings.hero_image | image_url: width: 800 }} 800w,
      {{ settings.hero_image | image_url: width: 1200 }} 1200w,
      {{ settings.hero_image | image_url: width: 1600 }} 1600w
    "
    imagesizes="100vw"
    fetchpriority="high"
  >
{%- endif -%}

Le nom exact de l'objet différera selon le thème. C'est peut-être section.settings.image, settings.hero_image, ou une image de bloc. Si l'URL de préchargement ne correspond pas suffisamment à l'URL de l'image rendue, le navigateur peut télécharger deux images.

Étape 3 : Marquez l'image du héros comme étant impatiente et hautement prioritaire

La balise d'image elle-même ne doit pas être chargée paresseusement. Utilisez un chargement rapide et une priorité de récupération élevée pour la première image de héros au-dessus de la ligne de flottaison.

{{ section.settings.image
  | image_url: width: 1600
  | image_tag:
    widths: '800, 1200, 1600',
    sizes: '100vw',
    loading: 'eager',
    fetchpriority: 'high',
    alt: section.settings.heading
}}

Le chargement paresseux du héros est l'une des erreurs Shopify LCP les plus courantes. Le chargement paresseux est correct pour les images et galeries de produits situées en dessous de la ligne de flottaison ; ce n'est pas le cas pour l'image dont le navigateur a besoin immédiatement. Pour le reste de votre boutique, utilisez notre Guide d'optimisation des images Shopify.

Étape 4 : évitez le double téléchargement d'images réactives

Si votre préchargement pointe vers une image de bureau mais que le mobile affiche un recadrage mobile distinct, les visiteurs mobiles peuvent télécharger le mauvais fichier préchargé, puis télécharger la véritable image mobile. Cela aggrave le LCP.

{%- assign hero = section.settings.mobile_image | default: section.settings.image -%}

<link
  rel="preload"
  as="image"
  href="{{ hero | image_url: width: 1200 }}"
  imagesrcset="{{ hero | image_url: width: 600 }} 600w, {{ hero | image_url: width: 1200 }} 1200w"
  imagesizes="100vw"
  fetchpriority="high"
>

Pour les thèmes avec des images de héros de bureau et mobiles vraiment différentes, utilisez soigneusement les liens de préchargement spécifiques aux médias. Testez les deux tailles de fenêtre et vérifiez l'onglet Réseau pour les téléchargements en double.

Étape 5 : Soyez prudent avec les curseurs

Les fils de discussion LCP de la communauté Shopify désignent souvent les diaporamas de héros comme le problème caché. Même avec une diapositive visible, un curseur peut attendre JavaScript, initialiser la mise en page, masquer les images jusqu'à ce qu'elles soient prêtes ou précharger plusieurs diapositives. Le préchargement d'une image ne peut pas réparer complètement un héros contrôlé par un lourd script de carrousel.

Pour la première fenêtre, un héros statique bat généralement un diaporama. Si vous conservez le curseur, préchargez uniquement la première diapositive visible, définissez-la avec une priorité rapide/élevée, chargez paresseusement les diapositives ultérieures et supprimez le JavaScript à lecture automatique sur mobile s'il crée de longues tâches.

C'est aussi là que minimisant le travail du thread principal compte. Un script carrousel peut retarder l'image même lorsque l'image est demandée tôt.

Correction manuelle vs Thunder Fix

Retestez sans vous tromper

Après avoir ajouté le préchargement, ouvrez DevTools Network avec le cache désactivé. Confirmez que l'image du héros démarre tôt, confirmez que l'image rendue n'est pas téléchargée deux fois et comparez les exécutions mobiles de Lighthouse. Regardez ensuite le LCP d'un utilisateur réel dans le tableau de bord des performances Web de Shopify ou dans Search Console Core Web Vitals.

Si la requête du héros démarre tôt mais que LCP est toujours lent, le goulot d'étranglement est probablement dû au poids de l'image, au CSS bloquant le rendu ou au JavaScript. Utilisez le guide complet d'optimisation de la vitesse Shopify, puis vérifiez si PageSpeed signale également Chaînes de requêtes critiques Shopify, énormes charges utiles réseau, ou Rembourrage Temps de blocage total. Comparez Fonctionnalités d'optimisation de Thunder, et vérifiez plans actuels si vous souhaitez le chemin automatisé.

Références et Validation

Pour la cible métrique, utilisez Le plus grand guide de peinture de contenu de web.dev: un bon LCP est de 2,5 secondes ou plus rapide au 75ème centile. Pour obtenir des conseils de priorité, consultez Conseils de récupération de priorité de web.dev; preload et fetchpriority résolvent différentes parties du problème de découverte et de priorisation.

Les fils de discussion LCP de la communauté Shopify affichent souvent le même mode d'échec : un commerçant précharge une image de héros et voit peu de mouvement car le thème est toujours en train de le charger paresseusement, le script carrousel retarde le rendu ou les ressources bloquant le rendu sont prioritaires. Validez la cascade réseau, l'URL de l'image rendue et l'élément LCP avant de déclarer le préchargement inefficace. Le correctif concerne une priorité précise des ressources, pas davantage de balises de préchargement.