Un site peut sembler rapide sur l’ordinateur de son propriétaire et rester pénible à utiliser sur un téléphone connecté à un réseau mobile. Pour identifier les vrais ralentissements, il faut distinguer les mesures observées chez les visiteurs des tests effectués en laboratoire. Ce tutoriel explique comment conduire un audit Core Web Vitals, prioriser les corrections et vérifier les résultats sans promettre de score magique.
1. Comprendre les trois Core Web Vitals
LCP (Largest Contentful Paint) mesure le temps d’affichage du plus grand élément de contenu visible dans la fenêtre initiale. La référence « bon » est de 2,5 secondes ou moins. INP (Interaction to Next Paint) reflète la réactivité aux interactions : objectif de 200 millisecondes ou moins. CLS (Cumulative Layout Shift) mesure les déplacements inattendus de mise en page : objectif de 0,1 ou moins. Les seuils sont généralement évalués au 75e percentile des visites, séparément pour mobile et ordinateur. Une page ne passe pas l’évaluation si l’un des indicateurs applicables est insuffisant.
Ces métriques décrivent l’expérience utilisateur, mais ne constituent pas une garantie de classement SEO. La pertinence, le contenu et d’autres signaux comptent également. Référence : documentation officielle web.dev sur les Web Vitals.
2. Mesurer les données réelles avant de modifier le site
PageSpeed Insights et Search Console
Entrez l’URL dans PageSpeed Insights. Regardez d’abord la section « utilisateurs réels » lorsqu’elle est disponible : elle s’appuie sur les données Chrome UX Report, agrégées sur une période glissante. L’absence de données ne signifie pas que le site est rapide ou lent ; le trafic peut simplement être insuffisant. Comparez ensuite les résultats mobile et ordinateur.
Dans Google Search Console, ouvrez le rapport « Signaux Web essentiels » pour repérer les groupes d’URL présentant des problèmes similaires. Il aide à identifier les modèles de pages touchés : fiches produit, articles, catégories ou page d’accueil. Pour un nouveau site, ces rapports peuvent ne pas fournir assez d’informations.
Tests de laboratoire : reproduire un problème
Utilisez Lighthouse dans Chrome DevTools pour examiner les opportunités de diagnostic : images trop lourdes, JavaScript bloquant, ressources non utilisées ou chaînes de requêtes. Un score Lighthouse varie avec l’appareil, le réseau et les conditions de test ; il ne remplace pas les données réelles. Répétez les tests sur la même page et dans des conditions comparables avant d’interpréter une différence.
3. Corriger un LCP trop élevé
Commencez par identifier l’élément LCP : souvent une grande image, une bannière ou un bloc de texte. Si c’est une image, servez-la à la bonne dimension, avec un format adapté comme WebP ou AVIF lorsque le navigateur et la chaîne de production le permettent. Ajoutez des dimensions explicites et un attribut srcset pertinent. Ne chargez pas paresseusement l’image principale visible immédiatement : un loading="lazy" mal placé peut retarder son affichage.
Vérifiez aussi le délai de réponse serveur, les redirections, la mise en cache et les polices. Une optimisation de l’image ne compensera pas toujours un serveur lent ou un rendu bloqué par des scripts tiers. Sur WordPress, inspectez les constructeurs de pages, extensions et widgets avant de désactiver quoi que ce soit ; testez les changements en préproduction. Consultez notre méthode de sauvegarde et de préproduction WordPress.
4. Réduire l’INP : améliorer la réactivité
Un clic qui semble ne rien faire peut provenir d’une tâche JavaScript trop longue sur le thread principal. Dans l’onglet Performance des DevTools, enregistrez une interaction lente et identifiez les fonctions coûteuses. Découpez les tâches longues, évitez les calculs inutiles à chaque saisie et limitez les scripts de suivi ou widgets tiers non essentiels.
Sur une boutique, testez les interactions importantes : sélection de variante, ajout au panier, recherche, validation d’un formulaire. Vérifiez les résultats sur un téléphone réel, pas uniquement avec un ordinateur puissant. L’INP observé chez les visiteurs dépend aussi de leurs appareils.
5. Stabiliser la page et réduire le CLS
Déclarez width et height sur les images ou réservez l’espace avec aspect-ratio. Évitez d’insérer au-dessus du contenu déjà affiché des bannières, publicités ou formulaires sans espace réservé. Contrôlez les changements de police et les composants qui apparaissent après chargement. Une animation utilisant transform est généralement préférable à une modification répétée de propriétés de mise en page.
6. Procédure d’audit reproductible en sept étapes
- Choisir trois à cinq pages représentatives : accueil, service, article, catégorie et page produit si applicable.
- Relever LCP, INP et CLS dans les données réelles disponibles, sur mobile et ordinateur.
- Documenter les conditions et capturer les diagnostics Lighthouse.
- Identifier la cause dominante pour chaque type de page, plutôt que corriger dix avertissements sans priorité.
- Créer une sauvegarde et tester les changements en préproduction, notamment panier, paiement, formulaires et suivi analytique.
- Déployer progressivement, puis surveiller les erreurs et les conversions.
- Réévaluer les métriques terrain après un délai suffisant : les agrégats ne se mettent pas à jour immédiatement.
7. Tableau de priorisation : impact, effort et risque
| Symptôme | Action à tester | Point de vigilance |
|---|---|---|
| LCP élevé | Optimiser l’image principale et le temps serveur | Ne pas lazy-loader l’image LCP |
| INP élevé | Réduire les tâches JavaScript longues | Tester les fonctions métier |
| CLS élevé | Réserver l’espace images, embeds et bannières | Contrôler les vues mobiles |
| Résultats incohérents | Comparer données terrain et laboratoire | Ne pas confondre score et expérience réelle |
8. Erreurs fréquentes lors d’un audit de performance
Installer plusieurs extensions de cache sans comprendre leur interaction peut provoquer des erreurs. Supprimer du JavaScript sans tester le parcours d’achat peut casser le paiement. Optimiser uniquement la page d’accueil laisse parfois les pages de conversion lentes. Enfin, annoncer un « score 100 garanti » n’est pas sérieux : les conditions de mesure et les scripts externes évoluent.
Faire auditer et optimiser votre site par 3Vision Group
Vous souhaitez accélérer un site WordPress, une boutique en ligne ou une application métier ? Découvrez le service de référencement SEO de 3Vision Group et notre accompagnement en maintenance web. Pour un diagnostic adapté à votre activité, contactez 3Vision Group en précisant les URL concernées et les problèmes constatés.
Photo d’illustration : Daniil Komov / Pexels (licence Pexels, usage commercial autorisé).
