CATÉGORIE · Performance · B01
LCP
Largest Contentful Paint
Le LCP mesure le rendu du plus grand contenu visible après le début de la navigation. Sur Shopify, vérifier si l’élément mesuré est une image ou du texte, puis isoler ce qui retarde son affichage.
Ce que mesure le LCP
Le LCP indique quand le plus grand élément de contenu visible est rendu après le début de la navigation. Il peut s’agir d’une image ou d’un bloc de texte : identifier l’élément mesuré avant de choisir une correction.
Seuils de lecture
- ≤ 2,5 secondes→ Bon
- > 2,5 à 4 secondes→ À améliorer
- > 4 secondes→ Mauvais
Pour qualifier l’expérience terrain, lire le 75e percentile en distinguant mobile et ordinateur. Un test de laboratoire sert à reproduire un problème dans des conditions données ; il ne représente pas à lui seul toutes les visites.
Exemple illustratif sur une fiche Shopify
Une fiche produit affiche son titre, mais attend longtemps sa photo principale. Si cette photo est bien l’élément LCP, relever le moment où sa requête démarre, sa durée de téléchargement et le délai avant son affichage. Si le LCP est du texte, examiner plutôt les polices et le rendu.
Une correction à tester dans le thème
{{ section.settings.image | image_url: width: 1600 | image_tag: widths: '400, 800, 1200, 1600', sizes: '(min-width: 990px) 50vw, 100vw', loading: 'eager', fetchpriority: 'high' }}Ce code est un exemple, pas un remplacement universel. Adapter le champ image et sizes au layout réel ; conserver un texte alternatif pertinent. Charger sans lazy loading l’image LCP, signaler sa priorité et réserver son ratio. Les images plus bas peuvent rester différées.
Diagnostiquer avant de modifier
- Identifier le template et l’appareil affectés. Noter les conditions du test et l’élément LCP observé.
- Si la requête HTML est lente, examiner les redirections et le traitement serveur avant les images.
- Si l’image est découverte tard, contrôler son HTML initial, le lazy loading et les dépendances JavaScript.
- Si le téléchargement est long, comparer dimensions réellement servies, compression et taille affichée.
- Si la ressource est déjà chargée mais invisible, chercher animations, CSS ou tâches JavaScript qui retardent le rendu.
Contrôler le résultat
- Conserver une mesure avant modification et répéter le même parcours après, dans des conditions comparables.
- Tester plusieurs fiches, une collection et la home : un changement de section peut améliorer une page et dégrader une autre.
- Vérifier qualité de l’image, cadrage mobile, galerie, changement de variante et ajout au panier.
- Suivre les données terrain lorsqu’elles sont disponibles. Leur évolution n’est pas instantanée et peut différer d’un test de laboratoire.
Ce qu’un bon LCP ne prouve pas
« Bon sur ordinateur, donc bon partout. »
Les appareils, réseaux et contenus affichés diffèrent. Vérifier le mobile séparément et utiliser la répartition réelle de l’audience, sans lui attribuer un pourcentage supposé.
« Une meilleure mesure garantit plus de ventes. »
Une amélioration technique ne prouve pas un gain commercial. Suivre les contacts ou commandes avec une période et un périmètre comparables, en tenant compte des campagnes et de la saisonnalité.
Termes connexes
Pour aller plus loin
Sources et contexte éditorial
Teo Comyn · Mis à jour le
Références techniques consultées pour cette mise à jour. Les exemples illustratifs ne sont pas des résultats clients mesurés. Vérifie la documentation actuelle et ta boutique avant d’appliquer une modification.
Politique éditoriale