Découvrez comment auditer votre boutique Shopify pour améliorer ses Core Web Vitals : LCP, CLS, vitesse mobile et indexation. Guide pratique et checklist.
L'audit technique Shopify et les Core Web Vitals consistent à analyser et optimiser les performances de votre boutique en ligne pour respecter les critères de Google (LCP, CLS, FID/INP) et garantir une expérience rapide et fluide, surtout sur mobile.
Pour réussir votre audit technique Shopify, concentrez-vous sur trois métriques : LCP (affichage du plus grand élément), CLS (stabilité visuelle) et FID/INP (interactivité). Réduisez le poids des images, activez le lazy loading, et supprimez les applications tierces lentes. Utilisez des thèmes légers comme Dawn ou un thème personnalisé avec des assets optimisés. Enfin, vérifiez l'indexation via Google Search Console et le fichier robots.txt.
Cas fréquent observé : une boutique Shopify avec un thème chargé en JavaScript et des images non optimisées voit son LCP exploser au-delà de 4 secondes sur mobile, ce qui fait chuter son trafic organique de 30 % en un mois. Dans les faits, la majorité des commerçants négligent l'impact des applications tierces (avis, pop-ups, live chat) qui ajoutent des scripts bloquants. En accompagnement, il est courant de constater que le CLS est dû à des polices web non préchargées ou à des bannières publicitaires sans dimensions fixes.
Les Core Web Vitals sont un ensemble de métriques définies par Google pour mesurer l'expérience utilisateur réelle d'une page web. Pour une boutique Shopify, ces métriques influencent directement le classement dans les résultats de recherche, surtout depuis la mise à jour de l'algorithme en 2021. Les trois métriques clés sont :
Sur Shopify, les défis sont nombreux : thèmes lourds, applications tierces non optimisées, images non compressées. Un mauvais score peut entraîner une baisse de trafic organique et une augmentation du taux de rebond. L'audit technique doit donc être régulier, idéalement tous les trimestres.
Avant de plonger dans les optimisations, il est essentiel de collecter les données de performance de votre boutique. Voici les outils recommandés :
Pour un audit complet, exportez les données de Search Console sur les 28 derniers jours. Notez les pages les plus visitées (home, collections, fiches produits) et vérifiez si elles sont dans la catégorie 'mauvais'. Un score LCP supérieur à 4 secondes nécessite une action immédiate.
Le LCP est souvent causé par une image de héros (bannière) ou un bloc de texte. Sur Shopify, les bonnes pratiques incluent :
loading='lazy' aux balises <img> non critiques.<link rel='preload' as='image' href='url-image'> dans le <head> du thème.Testez chaque modification avec PageSpeed Insights. Un gain de 0,5 seconde sur le LCP est significatif.
Le CLS mesure les décalages inattendus de la mise en page. Sur Shopify, les causes fréquentes sont :
font-display: swap dans votre CSS pour éviter le flash de texte invisible (FOIT). Préchargez les polices critiques.width et height explicites sur toutes les images et conteneurs publicitaires.width et height dans le code du thème, ou utilisez du CSS pour définir un ratio d'aspect (aspect-ratio).Utilisez l'onglet 'Performance' de Chrome DevTools pour simuler des connexions lentes et repérer les décalages. Un CLS supérieur à 0,25 est considéré comme mauvais.
Une bonne indexation est essentielle pour le SEO. Sur Shopify, vérifiez :
/sitemap.xml. Soumettez-le dans Google Search Console. Vérifiez qu'il inclut toutes vos pages importantes (produits, collections, articles de blog).rel='canonical' pointant vers l'URL principale. Shopify le fait par défaut, mais vérifiez en cas d'URLs avec paramètres (ex: ?variant=...).Un audit d'indexation avec Screaming Frog (version gratuite jusqu'à 500 URLs) permet de détecter les pages orphelines ou les erreurs 404.
La vitesse mobile est cruciale car Google indexe désormais en priorité la version mobile. Voici les actions clés :
defer ou async aux scripts qui ne sont pas nécessaires au rendu initial (analytics, chat, pop-ups).Testez la vitesse mobile avec PageSpeed Insights après chaque modification. L'objectif est d'atteindre un score d'au moins 70 sur mobile.
Les applications sont souvent le maillon faible des performances Shopify. Pour les auditer :
Un tableau comparatif des applications courantes et de leur impact estimé peut être utile (voir section tableaux).
L'optimisation n'est pas un one-shot. Mettez en place une surveillance continue :
Si vous constatez une baisse soudaine, vérifiez les mises à jour de thème ou l'ajout d'une nouvelle application. Un journal de bord des modifications techniques aide à identifier la cause.
Prenons l'exemple d'une page produit Shopify avec un LCP de 4,8 secondes sur mobile. Voici la démarche d'audit :
preload), et définir des dimensions explicites (800x800 px).Cet exemple montre qu'une seule action peut avoir un impact significatif. Appliquez la même méthode à toutes les pages à fort trafic.
| Outil | Type de mesure | Points forts |
|---|---|---|
| Google PageSpeed Insights | Réel + laboratoire | Données Chrome UX, recommandations précises |
| Google Search Console | Réel (28 jours) | Rapport par URL, suivi dans le temps |
| Lighthouse (Chrome DevTools) | Laboratoire | Détail technique, suggestions de code |
| WebPageTest | Laboratoire | Waterfall des requêtes, tests multi-localisations |
| SpeedCurve | Réel + laboratoire | Alertes, historique, budget performance |
| Application | Type | Impact potentiel |
|---|---|---|
| Oberlo (obsolète) | Dropshipping | Élevé (scripts lourds, appels API) |
| Yotpo (avis) | Avis clients | Moyen à élevé (widgets JS) |
| Loox (avis) | Avis clients | Faible à moyen (optimisé) |
| Tidio (live chat) | Chat | Élevé (script bloquant) |
| Judge.me (avis) | Avis clients | Faible (lazy loading possible) |
| Critère | À privilégier | À éviter |
|---|---|---|
| Poids du thème | Moins de 500 Ko (CSS+JS) | Plus de 1 Mo |
| Images responsives | Formats WebP, srcset | JPEG lourds sans dimensions |
| JavaScript | Minifié, différé | Scripts bloquants inline |
| Support lazy loading | Intégré nativement | Nécessite une application |
| Mises à jour | Régulières (tous les mois) | Ancien (plus d'un an) |
Diagnostic e-commerce
Partagez votre boutique : on repère les leviers SEO, UX et conversion à fort impact, et on vous donne l'ordre dans lequel les activer.
Les trois métriques principales sont le LCP (temps d'affichage du plus grand élément, objectif < 2,5 s), le CLS (stabilité visuelle, score < 0,1) et le FID ou INP (réactivité aux interactions, objectif < 100 ms pour FID, < 200 ms pour INP). Google les utilise pour évaluer l'expérience utilisateur et influencer le classement SEO.
Pour améliorer le LCP, commencez par optimiser l'image de héros : compressez-la en WebP, redimensionnez-la à une taille raisonnable (moins de 200 Ko), et préchargez-la avec une balise <link rel='preload'>. Réduisez également le temps de réponse du serveur en limitant les applications lourdes et en utilisant un thème léger comme Dawn.
Un CLS élevé est souvent dû à des images sans dimensions explicites, des polices web qui se chargent tardivement, ou des injections de contenu (pop-ups, bannières) sans espace réservé. Pour le corriger, ajoutez des attributs width et height à toutes les images, utilisez font-display : swap, et réservez des espaces fixes pour les widgets publicitaires.
Les outils recommandés sont Google PageSpeed Insights (données réelles et laboratoire), Google Search Console (rapport Core Web Vitals), Lighthouse dans Chrome DevTools (audit détaillé), et WebPageTest (waterfall des requêtes). Pour un suivi continu, des solutions comme SpeedCurve ou GTmetrix sont utiles.
Oui, certaines applications ajoutent des scripts JavaScript lourds et des appels API qui augmentent le temps de chargement. Il est conseillé d'auditer régulièrement les applications installées, de désactiver celles qui ne sont pas essentielles, et de privilégier des applications optimisées (ex : Loox pour les avis plutôt que Yotpo).
Utilisez Google Search Console pour soumettre votre sitemap.xml (généré automatiquement par Shopify) et vérifier les erreurs d'indexation. Assurez-vous que le fichier robots.txt ne bloque pas les pages importantes, et que les balises canoniques sont correctes. Un outil comme Screaming Frog peut scanner les URLs et détecter les pages orphelines.
Il est recommandé de réaliser un audit technique complet tous les trimestres, ou après chaque mise à jour majeure du thème ou ajout d'une application lourde. Surveillez les Core Web Vitals chaque semaine via Google Search Console pour détecter rapidement les dégradations.
Sources : Google Search Central · Google — Core Web Vitals · Shopify — performance.