Optimisation du LCP sur Shopify : 7 correctifs pour passer sous 2.5 s (2026)

Qu'est-ce que le LCP et pourquoi il compte pour les boutiques Shopify

Le Largest Contentful Paint (LCP) est l'un des trois Core Web Vitals de Google — les métriques qui influencent directement votre classement dans les résultats de recherche et quantifient l'expérience utilisateur. Tandis que le CLS mesure la stabilité visuelle et que l'INP mesure l'interactivité, le LCP mesure la vitesse de chargement perçue — précisément, le temps nécessaire pour que le plus grand élément visible de la page soit entièrement rendu.

Sur une boutique Shopify, l'élément LCP est presque toujours une image :

• Page d'accueil : l'image hero de la bannière ou la première diapositive d'un diaporama
• Pages produit : l'image principale du produit (généralement le plus grand élément au-dessus de la ligne de flottaison)
• Pages de collection : la bannière de la collection ou la première image de carte produit
• Articles de blog : l'image mise en avant

Pourquoi le LCP compte pour votre boutique Shopify :

• Classement SEO : Google utilise le LCP comme signal de classement — les pages qui valident les trois Core Web Vitals obtiennent un avantage mesurable
• Conversions : Deloitte a constaté qu'une amélioration de 0.1 seconde du LCP entraînait une hausse de 8 % des conversions pour les sites de vente au détail
• Taux de rebond : les visiteurs voient une page vide ou partiellement chargée en attendant le LCP — chaque seconde augmente le taux de rebond d'environ 20 %
• Impact mobile : le LCP est généralement 2 à 3 fois pire sur mobile à cause de processeurs et de réseaux plus lents — et c'est le mobile que Google mesure pour le classement

Envie de savoir rapidement où vous en êtes ? Lancez un test de vitesse gratuit sur votre boutique pour connaître votre score LCP actuel.

La solution simple : l'optimisation automatique du LCP

Avant de plonger dans les modifications manuelles du thème — il existe un chemin bien plus rapide. Thunder Page Speed Optimizer s'attaque automatiquement aux principales causes d'un LCP élevé sur les boutiques Shopify, avec souvent une réduction du LCP de 0.5 à 2.0 secondes en quelques minutes.

Comment mesurer et déboguer le LCP de votre boutique Shopify

Avant de corriger le LCP, vous devez identifier votre score actuel, l'élément qui constitue le LCP et ce qui le retarde. Voici les outils qui comptent :

Les 4 causes profondes d'un LCP élevé sur Shopify

Tout problème de LCP remonte à l'un de ces quatre goulots d'étranglement. Identifiez le vôtre et passez directement au correctif correspondant :

Correctif n°1 : optimiser et précharger l'image hero / LCP

Le correctif le plus efficace pour la plupart des boutiques Shopify : accélérer le chargement de l'image LCP et dire au navigateur de commencer à la charger immédiatement. Trois étapes — compresser, précharger et prioriser.

Étape 1 : compresser et utiliser un dimensionnement responsive

Votre image hero devrait peser moins de 200 Ko (idéalement moins de 100 Ko pour le mobile). Utilisez le CDN de Shopify avec le filtre image_url pour servir des images WebP correctement dimensionnées :

<img
  src="{{ section.settings.hero_image | image_url: width: 1200 }}"
  srcset="
    {{ section.settings.hero_image | image_url: width: 600 }} 600w,
    {{ section.settings.hero_image | image_url: width: 900 }} 900w,
    {{ section.settings.hero_image | image_url: width: 1200 }} 1200w,
    {{ section.settings.hero_image | image_url: width: 1600 }} 1600w
  "
  sizes="100vw"
  width="1600"
  height="800"
  alt="Your descriptive alt text"
  loading="eager"
  fetchpriority="high"
>

Le CDN de Shopify convertit automatiquement les images en WebP pour les navigateurs compatibles lorsque vous utilisez image_url. L'attribut srcset garantit que les appareils mobiles téléchargent une image de 600 px au lieu de la version complète de 1600 px — soit des centaines de Ko économisés sur mobile. Pour un guide complet des stratégies de compression et de formats d'image, consultez notre guide d'optimisation des images Shopify.

Étape 2 : précharger l'image LCP

Ajoutez un <link rel="preload"> dans le <head> de votre thème pour que le navigateur commence à télécharger l'image hero immédiatement — avant même d'atteindre la balise <img> dans le corps de la page :

<!-- Add to <head> in theme.liquid -->
<link
  rel="preload" 
  as="image"
  imagesrcset="
    {{ section.settings.hero_image | image_url: width: 600 }} 600w,
    {{ section.settings.hero_image | image_url: width: 900 }} 900w,
    {{ section.settings.hero_image | image_url: width: 1200 }} 1200w
  "
  imagesizes="100vw"
  fetchpriority="high"
>

Étape 3 : utiliser fetchpriority="high"

L'attribut fetchpriority="high" indique au navigateur que cette image est plus importante que les autres ressources en concurrence pour la bande passante. Sans lui, Chrome attribue initialement aux images une priorité « Low » et ne relève la priorité des images au-dessus de la ligne de flottaison que plus tard — un temps précieux est alors déjà perdu. Cette simple indication peut faire gagner 100 à 500 ms sur le LCP.

Important : incluez toujours des attributs width et height explicites. Ils permettent au navigateur de réserver l'espace correct avant le chargement de l'image, ce qui évite le Cumulative Layout Shift (CLS) et permet de démarrer les calculs de mise en page plus tôt.

Correctif n°2 : éliminer le JavaScript bloquant le rendu

Sur la plupart des boutiques Shopify, les scripts bloquant le rendu sont la cause principale d'un LCP élevé — pas l'image elle-même. Voici l'enchaînement qui plombe votre score : le navigateur commence à charger la page → rencontre des scripts bloquants dans le <head> → arrête tout pour les télécharger et les exécuter → découvre et charge seulement ensuite l'image hero → l'affiche enfin. Ces scripts bloquants peuvent ajouter 1 à 3 secondes avant même que le navigateur ne commence à traiter votre élément LCP.

Ce que vous pouvez faire manuellement

• Ajoutez defer ou async aux balises <script> personnalisées que vous avez ajoutées à votre thème
• Déplacez les scripts inline du <head> vers l'emplacement juste avant </body> lorsqu'ils n'ont pas besoin de s'exécuter tôt
• Supprimez les applications inutilisées — chaque application installée ajoute généralement 1 à 3 balises de script à chaque chargement de page
• Auditez le theme.liquid de votre thème pour repérer les scripts qui pourraient être différés

<script src="custom-feature.js"></script>

<script src="custom-feature.js" defer></script>

La partie délicate : les scripts d'applications tierces ont souvent des interdépendances. Différer un script peut casser une autre application qui en dépend. C'est pourquoi le report manuel des scripts sur Shopify est risqué sans tests approfondis. Pour un guide complet, consultez notre guide pour corriger les ressources bloquant le rendu sur Shopify.

Correctif n°3 : intégrer le CSS critique pour un premier rendu instantané

Le CSS bloque le rendu par défaut — le navigateur n'affiche rien tant que tous les fichiers CSS du <head> ne sont pas téléchargés. Sur une boutique Shopify avec plusieurs fichiers CSS (CSS du thème, CSS des applications, CSS personnalisé), cela peut ajouter 500 ms à 1.5 s avant qu'un quelconque contenu n'apparaisse.

Le correctif : extraire le CSS nécessaire au contenu au-dessus de la ligne de flottaison et l'intégrer directement dans une balise <style> dans le <head>. Puis charger le CSS complet de façon asynchrone :

<head>
  <!-- Inline critical CSS -->
  <style>
    /* Only styles needed for above-the-fold content */
    .header { ... }
    .hero-section { ... }
    .hero-image { ... }
  </style>

  <!-- Load full CSS asynchronously -->
  <link rel="preload" href="theme.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="theme.css"></noscript>
</head>

Identifier et extraire manuellement le CSS critique est fastidieux et source d'erreurs — il faut déterminer exactement quelles règles CSS s'appliquent à la zone visible au chargement, et cela diffère pour chaque type de page (accueil, produit, collection). C'est un domaine où l'automatisation fait une vraie différence : Thunder extrait et intègre automatiquement le CSS critique par type de page, puis charge le reste de façon asynchrone.

Méfiez-vous aussi du @import CSS : si votre thème ou vos applications utilisent @import dans des fichiers CSS, cela crée une cascade de chargement — le navigateur télécharge le CSS, découvre l'import, puis télécharge encore du CSS. Remplacez @import par des balises <link> distinctes pour permettre des téléchargements en parallèle. Pour en savoir plus, consultez notre guide sur les ressources bloquant le rendu et les cascades CSS.

Correctif n°4 : arrêter le lazy loading de votre élément LCP

C'est l'une des erreurs LCP les plus courantes sur Shopify — et l'une des plus simples à corriger. Beaucoup de thèmes appliquent loading="lazy" à toutes les images, y compris la bannière hero. Le lazy loading demande au navigateur de retarder le chargement de l'image jusqu'à ce que l'utilisateur s'en approche en défilant. Pour votre image la plus importante au-dessus de la ligne de flottaison, c'est un désastre pour les performances.

Comment vérifier

Faites un clic droit sur votre image hero → Inspecter → regardez la balise <img>. Si elle contient loading="lazy", cela nuit à votre LCP. PageSpeed Insights le signale aussi spécifiquement : cherchez « Largest Contentful Paint image was lazily loaded » dans les diagnostics.

Le correctif

<img src="hero.jpg" loading="lazy" alt="...">

<img src="hero.jpg" loading="eager" fetchpriority="high" alt="...">

Correctif spécifique au thème Shopify (Dawn et similaires)

Dans le thème Dawn de Shopify (et les thèmes qui en dérivent), repérez le fichier de la section hero — généralement sections/image-banner.liquid ou sections/slideshow.liquid. Trouvez l'endroit où l'image est rendue et assurez-vous que la première image au-dessus de la ligne de flottaison utilise loading: 'eager' :

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

Règle simple : les 1 à 2 premières images visibles au chargement initial → loading="eager". Tout ce qui est sous la ligne de flottaison → loading="lazy". Pour approfondir, consultez notre guide du lazy loading sur Shopify et notre comparatif lazy loading vs eager loading.

Correctif n°5 : optimiser le chargement des polices pour un LCP plus rapide

Si votre élément LCP est du texte (un titre ou un paragraphe), le chargement des polices impacte directement le LCP. Le navigateur n'affiche pas le texte tant que sa police n'est pas prête — sauf si vous lui indiquez le contraire. Même lorsque l'élément LCP est une image, un chargement de polices lent peut retarder le rendu en bloquant les calculs de mise en page.

Checklist du chargement des polices

• Ajoutez font-display: swap à toutes les règles @font-face — le texte s'affiche immédiatement dans une police de secours pendant le chargement des polices personnalisées
• Préchargez votre police principale : <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
• Hébergez les polices vous-même plutôt que de les charger depuis Google Fonts — cela élimine une résolution DNS et une connexion supplémentaires
• Limitez les graisses de police : chaque graisse (Regular, Bold, etc.) est un fichier distinct. Tenez-vous-en à 2 graisses si possible
• Utilisez le format WOFF2 — 30 % plus léger que le WOFF, pris en charge par tous les navigateurs modernes

@font-face {
  font-family: 'YourBrandFont';
  src: url('/fonts/brand-regular.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: 'YourBrandFont';
  src: url('/fonts/brand-bold.woff2') format('woff2');
  font-display: swap;
  font-weight: 700;
}

Remarque : font-display: swap peut introduire un léger problème de CLS lorsque la police personnalisée remplace la police de secours avec des métriques différentes. Si cela vous préoccupe, utilisez font-display: optional — la police personnalisée n'est utilisée que si elle se charge en ~100 ms, sinon la police de secours est conservée. Zéro remplacement signifie zéro CLS, même si la police personnalisée peut ne pas s'afficher sur les connexions lentes.

Correctif n°6 : réduire le temps de réponse serveur (TTFB)

Le Time to First Byte (TTFB) est le délai entre la requête du navigateur et la réception du premier octet de HTML. Un TTFB élevé retarde tout ce qui suit — y compris le LCP — car rien ne peut être rendu tant que le HTML n'arrive pas. Sur Shopify, le TTFB se situe généralement entre 200 et 800 ms.

Vous ne pouvez pas changer le matériel serveur de Shopify, mais vous pouvez réduire la quantité de travail effectuée par le serveur à chaque requête :

• Simplifiez les templates Liquid : les boucles for profondément imbriquées, les chaînes if/elsif excessives et les calculs Liquid complexes augmentent le temps de rendu côté serveur
• Réduisez les recherches de metafields : chaque accès à un metafield est une requête en base de données. Limitez l'usage des metafields sur les pages à fort trafic (accueil, collections)
• Limitez le nombre de produits par page de collection : rendre 48 cartes produit demande plus de traitement serveur que 24. Utilisez la pagination
• Auditez le Liquid injecté par les applications : certaines applications injectent du code Liquid qui s'exécute côté serveur à chaque chargement de page, même sur les pages où l'application n'est pas utilisée. Vérifiez vos fichiers de thème à la recherche de snippets Liquid liés aux applications
• Utilisez les sections et groupes de sections : le rendu de sections plus récent de Shopify peut mettre en cache des sections individuelles, réduisant le temps de rendu global

Correctif n°7 : supprimer les transitions d'image sur l'élément LCP

Beaucoup de thèmes Shopify ajoutent une animation CSS de fondu ou de glissement aux images pendant leur chargement. C'est joli, mais cela nuit directement au LCP, car le navigateur ne comptabilise le LCP qu'après la fin de l'animation — pas au moment où l'image apparaît. L'équipe performance de Shopify a documenté un cas où la suppression des transitions sur l'image hero a amélioré le LCP de 6 secondes sur une boutique.

Vérifiez le CSS de votre thème à la recherche de transitions sur l'image hero ou son conteneur :

.hero-image {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero-image.loaded {
  opacity: 1;
}

.hero-image {
  opacity: 1; /* Visible immediately */
}

Si vous souhaitez conserver les fondus sur les autres images pour l'esthétique, aucun problème — retirez-les simplement de l'élément hero/LCP spécifiquement. Vous pouvez cibler cela avec une classe comme .hero-image--no-transition sur la première image uniquement.

Correctifs LCP manuels vs Thunder : comparaison côte à côte

Voici comment l'approche manuelle se compare à l'optimisation automatique du LCP par Thunder :

Les correctifs manuels offrent un contrôle total mais exigent une expertise Liquid/CSS et une maintenance continue. Thunder se charge automatiquement du gros du travail et s'adapte à mesure que votre boutique évolue. Beaucoup de marchands combinent les deux : installer Thunder pour le report des scripts et le CSS critique, puis appliquer des correctifs manuels pour les problèmes propres à leur boutique, comme le préchargement de l'image hero. Consultez les tarifs de Thunder ou comparez avec d'autres applications d'optimisation de vitesse.

Questions fréquentes sur le LCP Shopify