Studio · Guide technique
Core Web Vitals :
comment les améliorer vraiment.
Les Core Web Vitals sont les métriques que Google utilise pour évaluer l'expérience utilisateur de votre site. Un mauvais score pénalise le référencement. Voici ce qu'ils mesurent, ce qui les dégrade, et comment les corriger structurellement.
Les trois Core Web Vitals
LCP — Largest Contentful Paint
Temps d'affichage du plus grand élément visible. Mesure la vitesse de chargement perçue. Objectif : sous 2,5 secondes. Typiquement l'image hero ou le titre principal de la page.
INP — Interaction to Next Paint
Remplace le FID depuis mars 2024. Mesure la réactivité aux interactions (clics, touches). Objectif : sous 200ms. Dégradé par un JavaScript lourd ou bloquant.
CLS — Cumulative Layout Shift
Mesure la stabilité visuelle — les décalages de mise en page pendant le chargement. Objectif : sous 0,1. Causé par des images sans dimensions définies ou des polices qui remplacent une police système.
Améliorer le LCP
Précharger l'image LCP
Identifiez quel élément est le LCP avec PageSpeed Insights.
Si c'est une image, ajoutez <link rel="preload" as="image"> dans le <head>.
Le navigateur la télécharge en priorité avant même de parser le CSS.
Réduire le TTFB
Le Time to First Byte est le temps que met le serveur à envoyer le premier octet. Sur WordPress avec un hébergement mutualisé, il peut dépasser 800ms. Sur un site statique Astro, il est sous 100ms. C'est la base du LCP — si le TTFB est élevé, tout le reste l'est aussi.
Optimiser les images
Format WebP ou AVIF plutôt que JPEG/PNG.
Dimensions explicites sur chaque image.
Attribut loading="lazy" sur les images sous la fold,
et surtout pas sur l'image LCP — elle doit se charger immédiatement.
Éliminer les ressources bloquant le rendu
CSS et JavaScript chargés de manière bloquante retardent l'affichage.
Différez les scripts non critiques avec defer ou async.
Sur Astro : aucun JS ne bloque par défaut.
Améliorer l'INP
Réduire le JavaScript exécuté au chargement
L'INP est dégradé quand le thread principal du navigateur est occupé à exécuter du JavaScript. Sur WordPress avec un page builder, ce thread peut être bloqué pendant 2 à 5 secondes. La solution : moins de JavaScript. Pas de plugin supplémentaire.
Découper les tâches longues (Long Tasks)
Toute tâche JavaScript de plus de 50ms est une "Long Task". Elle bloque les interactions utilisateur. Utilisez Chrome DevTools, puis l'onglet Performance pour les identifier. La correction implique de refactorer ou supprimer le code en cause.
Améliorer le CLS
Toujours définir width et height sur les images
Sans dimensions explicites, le navigateur ne sait pas quelle place réserver.
L'image se charge et pousse le contenu — c'est un CLS.
<img width="800" height="600"> suffit pour que le navigateur calcule le ratio à l'avance.
Précharger les polices d'écriture
Le remplacement d'une police système par une police web génère un décalage (FOUT/FOIT).
Utilisez font-display: optional ou préchargez les fichiers de polices critiques
avec rel="preload".
Éviter d'injecter du contenu dynamiquement au-dessus du fold
Bannières cookies, notifications, embeds tiers chargés après le rendu — s'ils poussent le contenu existant, ils génèrent du CLS. Réservez l'espace à l'avance avec une hauteur fixe ou min-height.
Les outils pour mesurer
pagespeed.web.dev — mesure les CWV sur données réelles (CrUX) et en laboratoire. Point de départ obligatoire. Identifie l'élément LCP et les opportunités d'amélioration.
Données réelles agrégées sur vos visiteurs. Montre quelles URLs ont un score "Mauvais", "À améliorer" ou "Bon" sur chaque métrique.
Pour identifier les Long Tasks, les ressources bloquantes et les décalages layout. L'onglet Lighthouse donne un score et des recommandations détaillées.
Pourquoi un site Astro passe les CWV nativement
- HTML statique = TTFB bas = LCP rapide structurellement
- Zéro JS par défaut = thread principal libre = INP excellent
- CSS écrit à la main sans framework = pas de styles inutiles = rendu stable
- Images gérées avec les composants Astro Image = WebP automatique + dimensions explicites = CLS à zéro
Sur les sites que je livre, les scores Core Web Vitals sont verts dès le lancement, sans plugin de cache, sans configuration CDN complexe.
Votre site a de mauvais scores CWV ?
Je propose un audit de 350 € HT — rapport complet avec les causes identifiées et les corrections priorisées, livré en 5 jours. Ou on parle d'une refonte si les problèmes sont structurels.