Essai gratuit Core Web Vitals sur Shopify : ce que mesurent LCP, INP et CLS, et comment les réussir
Les Core Web Vitals (Signaux Web essentiels) sont les trois mesures de Google qui décrivent ce que vivent vos vrais clients : LCP (la vitesse d'affichage du contenu principal, bon à 2,5 secondes ou moins), INP (la réactivité de la page à un clic, bon à 200 millisecondes ou moins) et CLS (les sauts de mise en page, bon à 0,1 ou moins). Google les évalue au 75e percentile des visites réelles des 28 derniers jours. Sur Shopify, les causes habituelles d'un échec sont les scripts des applications, une image d'accueil trop lourde, les polices web et le code du thème.
- Essai gratuit de 7 jours
- Sans code
- Sans engagement
Les trois Core Web Vitals et les seuils à atteindre
Google évalue chaque mesure au 75e percentile des visites réelles : trois visites sur quatre doivent être dans la zone verte. Mobile et ordinateur sont évalués séparément, et une page réussit quand les trois mesures sont bonnes.
| Mesure | Ce qu'elle mesure | Bon | À améliorer | Médiocre |
|---|---|---|---|---|
| LCP | Chargement : le temps avant l'affichage du plus grand élément à l'écran | 2,5 s ou moins | de 2,5 à 4 s | plus de 4 s |
| INP | Réactivité : le temps entre un clic et sa réponse à l'écran | 200 ms ou moins | de 200 à 500 ms | plus de 500 ms |
| CLS | Stabilité : à quel point la page bouge pendant le chargement | 0,1 ou moins | de 0,1 à 0,25 | plus de 0,25 |
LCP
Largest Contentful Paint (plus grand élément visible)
Sur une boutique Shopify, l'élément LCP est presque toujours l'image d'accueil ou la première photo d'une page produit. Tout ce qui se charge avant elle (scripts d'applications, polices, JavaScript du thème, autres images d'un diaporama) retarde le LCP.
INP
Interaction to Next Paint (réactivité)
INP a remplacé First Input Delay en mars 2024. Il mesure les interactions les plus lentes d'une visite : choisir une variante, ouvrir le menu, cliquer sur Ajouter au panier. Quand les scripts des applications et du thème occupent le navigateur, le clic attend son tour et la page semble figée.
CLS
Cumulative Layout Shift (stabilité visuelle)
Le CLS est un score, pas une durée. Sur Shopify, il vient souvent d'éléments qui arrivent tard et poussent la page vers le bas : barre d'annonce, étoiles d'avis, message de paiement fractionné, bandeau cookies, bloc d'application ou images sans largeur ni hauteur définies.
Pourquoi les boutiques Shopify échouent aux Core Web Vitals
Les serveurs et le CDN d'images de Shopify sont rapides. Ce qui ralentit une boutique, c'est surtout ce qu'on ajoute par-dessus le thème, et l'ordre dans lequel tout se charge.
Les scripts des applications
Chaque application visible sur la boutique (avis, chat, popups, ventes additionnelles, outils de suivi) ajoute son propre JavaScript. Le navigateur le télécharge et l'exécute, souvent avant la photo du produit : le LCP ralentit, et le navigateur reste occupé quand le client clique, ce qui dégrade l'INP.
Une image d'accueil ou un diaporama trop lourd
L'image d'accueil est généralement l'élément LCP. Un fichier trop lourd, un diaporama qui charge plusieurs images d'un coup, une vidéo en arrière‑plan ou une image d'accueil en chargement différé retardent tous l'affichage du contenu principal.
Les polices web
Chaque graisse d'une police personnalisée est un fichier de plus. Le texte peut rester invisible en attendant, et quand la police arrive, les lignes peuvent se réorganiser et alourdir le CLS.
Le JavaScript du thème
Méga-menus, aperçus rapides, carrousels, animations au défilement et anciens thèmes construits sur de grosses bibliothèques exécutent tous du code sur le fil principal. Plus il y en a en même temps, plus la page réagit lentement.
Les balises tierces
Outils d'analyse, pixels publicitaires, cartes de chaleur et gestionnaires de balises collés dans les fichiers du thème se chargent sur chaque page. Les doublons sont fréquents, par exemple la même balise d'analyse ajoutée par une application et à la main.
Le code laissé par d'anciennes applications
Certaines applications ajoutent au thème des extraits de code qui restent après leur désinstallation. L'application a disparu, mais son script peut encore se charger sur chaque page.
Comment vérifier les Core Web Vitals de votre boutique
-
PageSpeed Insights : lisez d'abord le haut de la page
La partie haute affiche les données de terrain : les visites réelles de votre boutique dans Chrome sur les 28 derniers jours, et si la page réussit ou non. C'est ce que Google utilise. Le score de performance de 0 à 100 en dessous est un test en laboratoire sur un seul téléphone simulé. Il aide à trouver les problèmes, mais ce n'est pas votre résultat Core Web Vitals.
-
Search Console : toutes vos pages d'un coup d'œil
Le rapport Core Web Vitals classe vos URL en Bonnes, À améliorer et Médiocres, séparément sur mobile et sur ordinateur, et indique la mesure en cause. Après un correctif, cliquez sur Valider la correction et Google revérifie les pages sur les 28 jours suivants.
-
Le rapport de performance web de Shopify
L'interface administrateur Shopify propose son propre rapport de performance web, avec LCP, INP et CLS tirés des visites de votre boutique. Pratique quand votre trafic est trop faible pour que Google affiche des données de terrain.
-
L'audit de vitesse gratuit de Whoosh
Saisissez l'adresse de votre boutique : l'audit montre quelles applications se chargent sur vos pages et ce qui les ralentit, sans installation ni code.
Améliorer les Core Web Vitals sur Shopify, par ordre d'impact
Commencez par le haut. Chaque étape est à la portée d'un marchand sans développeur, et les premières aident les trois mesures.
-
Supprimez les applications inutilisées
Cherchez ensuite le nom de l'ancienne application dans le code du thème : des extraits oubliés peuvent continuer à se charger. Moins de scripts, c'est mieux pour les trois mesures.
-
Chargez d'abord les applications visibles, faites patienter les autres
Le chat, les outils de suivi, les avis en bas de page et les popups n'ont pas besoin de se charger avant la photo du produit. Les retarder libère le navigateur pour la photo (LCP) et pour les clics du client (INP).
-
Allégez l'image d'accueil
Sur mobile, préférez une seule image à un diaporama, importez-la dans une taille raisonnable et vérifiez que la première image de la page n'est pas en chargement différé. Les thèmes Shopify récents servent ensuite la bonne taille pour chaque écran.
-
Réservez la place des éléments qui arrivent tard
Donnez une largeur et une hauteur aux images, et un espace fixe aux blocs d'applications, aux étoiles d'avis et aux bandeaux : ils remplissent un emplacement au lieu de pousser la page. C'est le principal correctif du CLS.
-
Limitez les polices et les graisses
Une ou deux graisses d'une seule police, ou une police système, suffisent souvent. Les polices de la bibliothèque Shopify sont servies par Shopify, et moins de fichiers, c'est un texte affiché plus tôt et qui bouge moins.
-
Faites le tri dans les balises tierces
Supprimez les doublons d'outils d'analyse et de pixels, et quand c'est possible, sortez le suivi des fichiers du thème pour le placer dans les événements clients de Shopify ou les applications de canal officielles.
-
Gardez le thème à jour et limitez les effets
Les mises à jour du thème contiennent souvent des correctifs de vitesse. Vidéo en lecture automatique, effet parallaxe et animations au défilement coûtent du temps à chaque visite.
-
Mesurez à nouveau après 28 jours
Les données de terrain couvrent les 28 derniers jours : un correctif apparaît progressivement. Comparez ce qui est comparable : les mêmes pages, sur mobile, dans les données de terrain.
Le rôle de Whoosh
Whoosh est une application Shopify qui règle automatiquement la part de la liste due aux scripts d'applications. Elle ne remplace pas les autres correctifs.
Ce qu'elle fait
- Smart App Loading charge d'abord les applications que vos clients voient et fait patienter le chat, les outils de suivi, les avis et les popups : la photo du produit s'affiche plus tôt et la page reste disponible pour réagir aux clics.
- AI Page Preloading charge la page suivante avant que le client ne clique : elle s'ouvre sans attente.
- Sans code et sans modifier le thème. Installez-le depuis le Shopify App Store et il fonctionne aussitôt.
Ce qu'elle ne fait pas
- Il ne réécrit pas votre thème, ne compresse pas vos images et ne change pas vos polices. Ces correctifs restent à faire de votre côté.
- Il ne rend pas vos applications plus rapides en elles‑mêmes. Il change l'ordre dans lequel elles arrivent.
- Il ne touche pas aux pages du paiement et du compte client. Le paiement est géré par Shopify.
Vous voyez le résultat dans votre tableau de bord, grâce à un test 50/50 pendant vos premières semaines : clients avec Whoosh face à ceux sans.
Voir ce qui ralentit votre boutique : audit gratuit Comparatif des applications de vitesse Shopify (en anglais)
Smart App Loading : 99 $ US par mois
Commencez par un essai gratuit de 7 jours, facturé via Shopify, et résiliez quand vous voulez dans Shopify. Vous voulez aussi AI Page Preloading ? Whoosh Max réunit les deux pour 149 $ US par mois.
Questions sur les Core Web Vitals Shopify
Quels sont les bons scores Core Web Vitals pour une boutique Shopify ?
Les mêmes que pour n'importe quel site : un LCP de 2,5 secondes ou moins, un INP de 200 millisecondes ou moins et un CLS de 0,1 ou moins. Google mesure chacun au 75e percentile des visites réelles des 28 derniers jours, séparément sur mobile et sur ordinateur, et une page réussit quand les trois sont bons.
Pourquoi ma boutique Shopify échoue‑t‑elle aux Core Web Vitals ?
Les causes habituelles sont les scripts d'applications qui se chargent avant la photo du produit, une image d'accueil ou un diaporama trop lourd, plusieurs polices web, le JavaScript du thème, des balises tierces collées dans le thème et du code laissé par des applications désinstallées. Le rapport Core Web Vitals de Search Console indique quelle mesure échoue, ce qui réduit les pistes.
Le score PageSpeed Insights est‑il la même chose que les Core Web Vitals ?
Non. Le score de performance de 0 à 100 est un test en laboratoire sur un seul téléphone simulé. Votre résultat Core Web Vitals, ce sont les données de terrain en haut du rapport, tirées des visites réelles des 28 derniers jours, et c'est ce que Google utilise. Une boutique peut avoir un score de laboratoire bas et réussir quand même, ou l'inverse.
Les Core Web Vitals influencent‑ils le classement Google ?
Oui, parmi les signaux d'expérience de page utilisés par les systèmes de classement de Google. Un contenu utile et pertinent compte davantage, donc réussir ne fera pas monter une page à lui seul, mais une boutique lente perd aussi des clients avant l'achat, quel que soit son classement.
Combien de temps avant qu'un correctif apparaisse dans les Core Web Vitals ?
Jusqu'à environ quatre semaines. Les données de terrain de PageSpeed Insights et de Search Console couvrent les 28 derniers jours : elles évoluent progressivement à mesure que les nouvelles visites remplacent les anciennes. Le rapport de performance web de Shopify et les tests en laboratoire montrent un changement plus tôt.
Une application Shopify peut‑elle corriger les Core Web Vitals ?
Une application peut en corriger une partie. Smart App Loading de Whoosh règle la part due aux scripts d'applications en chargeant d'abord celles que vos clients voient et en faisant patienter les autres. Aucune application ne peut alléger une image importée trop lourde ni réécrire votre thème à votre place. Méfiez‑vous de ce qui améliore le score de laboratoire sans changer ce que vivent vos vrais clients : Google utilise les visites réelles.
Whoosh modifie‑t‑il mon thème ou le paiement ?
Non. Whoosh ne modifie pas votre thème. Il change le moment où les applications se chargent, pas la façon dont le thème est construit, et ne touche pas aux pages du paiement et du compte client. Le paiement est géré par Shopify.
D'autres questions ?
Notre centre d'aide (en anglais) a la réponse.
