Core Web Vitals : optimiser une boutique en ligne

Google a officialisé les Core Web Vitals comme signal de classement en 2021. Mais pour une boutique e-commerce, l'enjeu n'est pas le score Lighthouse : c'est le taux de conversion. Un site qui met plus de 3 secondes à afficher une fiche produit perd 53% de ses visiteurs (Google, 2023). Sur une boutique qui fait 100 000 €/mois, ça représente 53 000 € de CA perdu.

Les 3 métriques qui comptent vraiment pour un e-commerce

• LCP (Largest Contentful Paint) : le temps d'affichage de l'image principale ou du titre du produit. Sur une fiche produit, c'est l'image qui est l'élément le plus grand. Objectif : moins de 2.5 secondes. Si votre image produit met 4 secondes à s'afficher, le client est déjà parti.
• INP (Interaction to Next Paint) : le temps de réponse aux interactions (clic sur "ajouter au panier", ouverture de menu). Objectif : moins de 200 ms. Un bouton "ajouter au panier" qui met 500 ms à réagir, c'est une friction qui fait perdre des ventes.
• CLS (Cumulative Layout Shift) : la stabilité visuelle. Rien de plus frustrant qu'un bouton "ajouter au panier" qui bouge pendant le chargement des images. Objectif : moins de 0.1.

Les causes de mauvaise performance propres aux e-commerces

• Images produits non optimisées : les photos e-commerce sont souvent en haute résolution. WebP à 80% de qualité + lazy loading = taille divisée par 4 sans perte visible.
• JavaScript des modules et extensions : modules de paiement, de recommandation, de chat, de tracking. Chaque module ajoute son JS. Sur une boutique PrestaShop ou WooCommerce, le JS peut représenter 60% du poids de la page. Voir l'optimisation PrestaShop.
• CSS des thèmes : les thèmes e-commerce chargent souvent tout le CSS du site sur chaque page, même si la page n'affiche qu'un produit. Tailwind, CSS-in-JS, et les frameworks modernes réduisent ce problème.
• Polices web : Google Fonts, polices d'icônes, polices de thème. Chaque police ajoute un aller-retour serveur. Précharger la police principale et utiliser font-display: swap.

Comment j'optimise les Core Web Vitals d'une boutique

Ma méthode en 4 étapes :

1. Mesure : PageSpeed Insights, Lighthouse CI, CrUX (Chrome User Experience Report). Je mesure l'état réel des CWV sur mobile (75% du trafic e-commerce).
2. Diagnostic : quelles ressources bloquent le LCP ? Quel script retarde l'INP ? Quels éléments mobiles créent du CLS ?
3. Correction : priorité au LCP (chargez l'image produit en premier), puis à l'INP (différez le JS non critique), puis au CLS (dimensions explicites sur toutes les images).
4. Vérification : re-mesure, puis surveillance dans le temps avec Lighthouse CI ou un outil de monitoring. Les CWV peuvent se dégrader avec les mises à jour.

Plus de détails sur l'optimisation de la vitesse.

FAQ : Core Web Vitals e-commerce

Pour aller plus loin, découvrez ma page dédiée au SEO technique e-commerce.

Les Core Web Vitals sont-ils un facteur de classement important ?

Oui, mais pas le plus important. Google les utilise comme signal de page experience. Si votre contenu est excellent mais vos CWV mauvais, vous pouvez quand même ranker. Mais si deux sites ont un contenu équivalent, celui avec les meilleurs CWV passe devant.

Combien coûte une optimisation des Core Web Vitals ?

Entre 600 € et 3 000 € selon l'état de la boutique. Les corrections de base (images, JS différé, polices) sont rapides et peu coûteuses. Les corrections avancées (refonte du thème, migration d'hébergement) sont plus lourdes.

Vous voulez savoir où en est votre boutique sur les Core Web Vitals ? Je vous offre une analyse PageSpeed Insights commentée.