Enquêtes et recherches sur Shopify et le e-commerce
Le Largest Contentful Paint est le Core Web Vital que les boutiques Shopify échouent le plus visiblement, et notre propre audit montre pourquoi : sur 15 démos de thèmes officiels, le premier rendu arrivait en 2 à 5 secondes environ, puis les acheteurs attendaient jusqu'à 13.9 secondes de plus le visuel principal. Voici le mécanisme et la liste des correctifs, chiffres à l'appui.
Le Largest Contentful Paint mesure un seul instant : celui où le plus grand élément visible du premier écran achève son rendu. Sur une boutique Shopify, cet élément est presque toujours l’image principale, la première photo produit ou l’image d’accroche d’une vidéo en lecture automatique, et c’est exactement pour cela que les scores Shopify LCP sont mauvais. Les serveurs de la plateforme répondent vite et la structure du thème s’affiche tôt ; puis l’acheteur fixe un squelette pendant que des mégaoctets de visuel principal descendent péniblement sur une connexion mobile.
Nos propres données rendent le mécanisme visible. Le 14 juillet 2026, nous avons réalisé 45 audits Lighthouse sur 15 démos de thèmes officiels, et le chiffre intéressant n’est pas le LCP lui-même mais la distance entre le First Contentful Paint et le LCP. Le FCP, c’est l’arrivée de la structure ; l’écart FCP-LCP, c’est le visuel principal qui fait attendre tout le monde.
| Démo de thème | FCP | LCP | Écart (attente du visuel) |
|---|---|---|---|
| Ultra | 1.91s | 1.91s | 0.0s |
| Boutique | 2.20s | 3.67s | 1.5s |
| Symmetry | 1.53s | 6.33s | 4.8s |
| Impression | 5.22s | 12.19s | 7.0s |
| Horizon | 3.57s | 12.32s | 8.8s |
| Motion | 1.88s | 15.78s | 13.9s |
Relisez la ligne de Motion : premier rendu en 1.88 seconde, plus rapide que presque tout ce que nous avons testé, puis 13.9 secondes d’attente pour le visuel principal. Ce n’est pas le code du thème qui fait goulot d’étranglement, c’est la stratégie média. Horizon raconte la même histoire sous un autre angle : son temps de blocage total était de 29ms, parmi les meilleurs comportements JavaScript de l’audit, à côté d’un LCP de 12.32 secondes. Excellente ingénierie, vitrine lourde.
Et le contre-exemple prouve que le plafond est réel : sur la démo d’Ultra, le plus grand élément s’est affiché en même temps que le premier rendu, 1.91 seconde pour les deux, la seule démo sur 15 sous le seuil des 2.5 secondes de Google. Voilà à quoi ressemble, dans les données, un premier écran discipliné.
1. Pesez votre visuel principal. Ouvrez votre page d’accueil dans PageSpeed Insights, déployez le diagnostic LCP et regardez quel est réellement l’élément LCP. S’il s’agit d’une image de 2 à 4MB ou d’une vidéo, rien d’autre dans cette liste ne compte tant que cela n’a pas changé. Exportez le visuel à la taille d’affichage, servez du WebP ou de l’AVIF via les paramètres de largeur image_url de Shopify, et plafonnez le fichier autour de 200KB. Si le visuel principal est une vidéo en lecture automatique, donnez-lui une image d’accroche légère et laissez la vidéo se charger après le premier rendu, ou déplacez-la sous la ligne de flottaison.
2. Arrêtez le lazy-loading sur l’image LCP. Une mauvaise configuration courante sur Shopify : le thème ou une application applique loading="lazy" à tout, y compris à la première image principale, ce qui retarde le seul téléchargement qui définit votre score. L’image LCP doit se charger en mode eager avec une priorité de récupération élevée ; tout ce qui se trouve sous la ligne de flottaison doit rester en lazy.
3. Auditez la pile d’applications. Chaque application installée peut injecter des scripts qui s’exécutent avant que votre visuel principal ne commence à se télécharger. Désinstallez ce que vous n’utilisez pas activement, puis vérifiez dans le code du thème les balises de script orphelines laissées par les applications. La documentation de Shopify sur la performance désigne elle-même le poids des applications comme un facteur majeur de vitesse des thèmes.
4. Allégez le premier écran. Des diaporamas avec cinq diapositives de 2MB, des bandeaux d’annonce animés, des widgets de chat qui démarrent immédiatement : chacun d’eux entre en concurrence avec l’élément LCP. Le premier écran a besoin d’un message et d’une image.
5. Alors, et seulement alors, envisagez le thème. Le choix du thème fixe votre plafond. Nous avons mesuré un écart de 8x entre la démo la plus rapide et la plus lente dans la même boutique, dans des conditions identiques, et la différence tenait surtout à la discipline : ce que le premier écran par défaut du thème transporte. Si vous cherchez déjà un remplaçant, notre classement complet des 15 démos mesurées est le point de départ, et le fournisseur dont la démo est arrivée en tête, UTD, liste tous ses thèmes ici. Mais changer de thème alors que votre visuel principal pèse 3MB ne fait que déplacer le même problème dans une plus belle typographie.
Mesurez avant et après, de la même façon à chaque fois. Lighthouse dans Chrome DevTools ou PageSpeed Insights, profil mobile, trois exécutions, prenez la médiane, car les exécutions isolées fluctuent. Surveillez deux chiffres : le LCP lui-même, et l’écart FCP-LCP du graphique ci-dessus. Si vos correctifs fonctionnent, c’est l’écart qui s’effondre en premier, et c’est le signal que le visuel principal arrive enfin avec la page au lieu d’arriver après. Les données d’utilisateurs réels du rapport Core Web Vitals de Search Console suivront en quelques semaines, puisque Google évalue le LCP sur les données de terrain, pas sur les tests en laboratoire.
Presque toujours parce que le plus grand élément au-dessus de la ligne de flottaison est une image principale lourde ou une vidéo en lecture automatique dont le téléchargement démarre tard. Les données de notre audit montrent clairement ce schéma : des démos au premier rendu rapide affichaient tout de même des LCP de 8 à 14 secondes lorsque le visuel principal était lourd. Les applications qui injectent des scripts bloquant le rendu repoussent encore le début de ce téléchargement.
Les seuils de Google sont : moins de 2.5 secondes, c'est bon ; plus de 4 secondes, c'est mauvais, mesurés auprès des utilisateurs réels sur mobile. À titre de référence, une seule des 15 démos de thèmes officiels que nous avons auditées en throttling mobile simulé est passée sous la barre des 2.5 secondes.
C'est possible, et c'est la seule décision de performance que l'on prend une fois pour toutes. Nous avons mesuré un écart de 8x sur le LCP mobile médian entre la démo de thème la plus rapide (1.91s) et la plus lente (15.78s). Mais corrigez d'abord votre visuel principal et votre pile d'applications : un thème rapide avec un visuel de 4MB échouera quand même.
Oui. Chaque application qui injecte un script dans votre thème entre en concurrence avec l'image LCP pour la bande passante et le temps de thread principal avant le premier rendu. Auditez vos applications installées, supprimez celles que vous n'utilisez pas, et vérifiez si des balises de script résiduelles subsistent dans le code du thème après désinstallation.