Core Web Vitals : Comprendre et Optimiser les Métriques Google
Les Core Web Vitals sont les métriques de performance utilisées par Google. Comprendre et optimiser ces indicateurs est essentiel pour votre SEO.
Les Core Web Vitals sont trois métriques qui évaluent l'expérience de chargement, l'interactivité et la stabilité visuelle de vos pages. Depuis leur intégration dans l'algorithme de Google, ils sont devenus incontournables pour le SEO.
Ce que vous allez apprendre
Comprendre les Core Web Vitals
Les Core Web Vitals ont été introduits par Google en 2020 et intégrés comme facteur de ranking en 2021. Ils mesurent trois aspects essentiels de l'expérience utilisateur.
| Métrique | Mesure | Question utilisateur |
|---|---|---|
| LCP | Vitesse de chargement | "Est-ce que ça charge ?" |
| INP | Réactivité aux interactions | "Est-ce que ça répond ?" |
| CLS | Stabilité visuelle | "Est-ce que ça bouge ?" |
Seuils de performance
| Métrique | Bon 🟢 | À améliorer 🟡 | Mauvais 🔴 |
|---|---|---|---|
| LCP | < 2,5 secondes | 2,5s - 4s | > 4 secondes |
| INP | < 200 ms | 200ms - 500ms | > 500 ms |
| CLS | < 0,1 | 0,1 - 0,25 | > 0,25 |
Google considère que 75% de vos pages doivent atteindre le seuil "Bon" pour être considérées comme performantes.
LCP : Largest Contentful Paint
Le LCP mesure le temps nécessaire pour afficher le plus grand élément visible dans le viewport. C'est généralement l'image hero, un titre principal, ou un bloc de texte important.
Quels éléments sont mesurés par le LCP
- Images <img>
- Images dans <image> (SVG)
- Affiches de <video>
- Images de fond chargées via CSS
- Blocs de texte (titres, paragraphes)
Causes d'un mauvais LCP
| Cause | Impact | Solution |
|---|---|---|
| Temps de réponse serveur lent | Retarde tout | CDN, cache, meilleur hébergement |
| JavaScript/CSS bloquant | Retarde le rendu | Defer/async, critical CSS |
| Image LCP non optimisée | Chargement lent | Compression, format WebP, preload |
| Chargement client-side | Attente JS | SSR/SSG, prerender |
Techniques d'optimisation LCP
<!-- Preload de l'image LCP pour chargement prioritaire -->
<head>
<link rel="preload" as="image" href="hero-image.webp" fetchpriority="high">
</head>
<!-- Image LCP avec priorité haute -->
<img
src="hero-image.webp"
alt="Image principale"
fetchpriority="high"
loading="eager"
decoding="async"
/>- Preload l'élément LCP (image, font critique)
- Utilisez fetchpriority="high" sur l'image LCP
- Optimisez le TTFB (< 200ms)
- Éliminez les ressources bloquantes
- Utilisez le server-side rendering si applicable
INP : Interaction to Next Paint
L'INP mesure la réactivité de la page aux interactions utilisateur (clics, touches, appuis de touches). Il a remplacé le FID (First Input Delay) en mars 2024.
Différence entre INP et FID
| Aspect | FID (ancien) | INP (actuel) |
|---|---|---|
| Interactions mesurées | Première seulement | Toutes les interactions |
| Représentativité | Partielle | Complète |
| Seuil "bon" | < 100ms | < 200ms |
| Complexité | Simple à optimiser | Plus exigeant |
Causes d'un mauvais INP
- Long tasks JavaScript (> 50ms)
- Thread principal bloqué pendant les interactions
- Event handlers lourds
- Trop de JavaScript synchrone
- Third-party scripts lents (analytics, ads, chat)
Techniques d'optimisation INP
// ❌ Mauvais : Tâche longue bloquante
button.addEventListener('click', () => {
// Traitement lourd de 500ms
heavyProcessing();
updateUI();
});
// ✅ Bon : Tâches divisées avec yield
button.addEventListener('click', async () => {
// Mise à jour UI immédiate
showLoadingState();
// Yield pour permettre au navigateur de respirer
await scheduler.yield();
// Traitement en arrière-plan
const result = await processInChunks(data);
updateUI(result);
});- Divisez les long tasks en chunks < 50ms
- Utilisez requestIdleCallback pour les tâches non urgentes
- Déléguez le travail lourd aux Web Workers
- Chargez les third-party scripts en async
- Utilisez le debouncing pour les événements fréquents
CLS : Cumulative Layout Shift
Le CLS mesure la stabilité visuelle de la page. Un score élevé signifie que des éléments bougent de manière inattendue, créant une expérience frustrante.
Comment le CLS est calculé
CLS = Impact Fraction × Distance Fraction. L'impact fraction est la zone affectée par le décalage, la distance fraction est la distance du déplacement, le tout relatif au viewport.
Causes courantes de CLS
| Cause | Exemple | Impact typique |
|---|---|---|
| Images sans dimensions | L'image charge et pousse le contenu | CLS 0.1 - 0.5 |
| Publicités dynamiques | Bannière injectée en haut de page | CLS 0.2 - 0.8 |
| Polices web (FOUT/FOIT) | Texte change de taille au chargement | CLS 0.05 - 0.2 |
| Contenu injecté dynamiquement | Message d'alerte, bannière cookie | CLS 0.1 - 0.3 |
| Iframes/embeds sans dimensions | Vidéo YouTube qui charge | CLS 0.1 - 0.4 |
Techniques d'optimisation CLS
<!-- ✅ Image avec dimensions réservées -->
<img src="photo.jpg" width="800" height="600" alt="Photo">
<!-- ✅ Conteneur avec aspect-ratio pour responsive -->
<style>
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
</style>
<div class="video-container">
<iframe src="https://youtube.com/..."></iframe>
</div>
<!-- ✅ Espace réservé pour les publicités -->
<style>
.ad-slot {
min-height: 250px;
background: #f0f0f0;
}
</style>
<div class="ad-slot" id="ad-banner"></div>- Toujours spécifier width et height sur les images
- Utiliser aspect-ratio CSS pour les conteneurs
- Réserver l'espace pour les publicités
- Précharger les polices avec font-display: swap
- Insérer le contenu dynamique en bas de page, pas en haut
Étude de cas n°1 : Site d'actualités - LCP catastrophique
Contexte
InfoMatin.fr avait un problème critique de LCP. L'image principale des articles mettait plus de 5 secondes à s'afficher sur mobile.
Diagnostic LCP
- Image hero de 2.5 Mo en JPEG
- Pas de preload sur l'image principale
- Image chargée via JavaScript (client-side)
- CDN non configuré
- CSS/JS bloquant le rendu
Plan d'optimisation
| Action | Gain LCP estimé |
|---|---|
| Compression image + WebP | -1.2s |
| Preload image LCP | -0.8s |
| Rendu serveur (SSR) de l'image | -1.0s |
| CDN avec cache image | -0.5s |
| Critical CSS inline | -0.4s |
Résultats
| Métrique | Avant | Après |
|---|---|---|
| LCP mobile | 5.8s | 1.9s |
| Pages LCP "bon" | 15% | 92% |
| Score PageSpeed mobile | 28 | 85 |
- Retour dans Google News (visibilité restaurée)
- Trafic organique : +45% en 2 mois
- Temps moyen sur page : +32%
Étude de cas n°2 : Application SaaS - INP problématique
Contexte
ProjectFlow.io avait un INP catastrophique. Chaque clic sur un bouton semblait ne rien faire pendant presque une seconde.
Diagnostic INP
- Chaque clic déclenchait un re-render complet de l'app
- Calculs lourds sur le thread principal
- Pas d'optimistic UI (attente de la réponse serveur)
- Third-party analytics bloquant
Optimisations implémentées
- 1. React.memo et useMemo pour éviter les re-renders inutiles
- 2. Calculs déplacés dans Web Workers
- 3. Optimistic UI : mise à jour immédiate avant réponse serveur
- 4. Scripts analytics en async
- 5. Code splitting par fonctionnalité
Résultats
| Métrique | Avant | Après |
|---|---|---|
| INP | 650ms | 145ms |
| Perception utilisateur | Lent | Réactif |
| Plaintes support | 15/semaine | 2/semaine |
- Taux de conversion trial : +28%
- Net Promoter Score : +15 points
- Taux de churn : -12%
Étude de cas n°3 : E-commerce - CLS des publicités
Contexte
MarketPlace.fr avait un problème de CLS causé par les publicités qui s'injectaient dynamiquement, poussant le contenu vers le bas.
Sources de CLS identifiées
| Source | Contribution au CLS |
|---|---|
| Bannière pub header | 0.18 |
| Publicité mid-article | 0.12 |
| Images produits sans dimensions | 0.08 |
| Police web FOUT | 0.04 |
Solutions appliquées
- 1. Espace réservé fixe pour les emplacements publicitaires
- 2. Dimensions obligatoires sur toutes les images
- 3. Préchargement des polices avec font-display: optional
- 4. Publicités chargées avec placeholder skeleton
Résultats
| Métrique | Avant | Après |
|---|---|---|
| CLS | 0.42 | 0.06 |
| Clics accidentels pubs | 8% | 1.2% |
| Taux de rebond | 58% | 42% |
- Revenus publicitaires : -15% (moins de clics accidentels)
- Mais taux de conversion produits : +22%
- Revenus globaux : +18%
Leçon importante
Outils de mesure des Core Web Vitals
| Outil | Type de données | Usage |
|---|---|---|
| PageSpeed Insights | Lab + Field | Diagnostic complet |
| Search Console | Field uniquement | Monitoring continu |
| Chrome DevTools | Lab | Debug en développement |
| Web Vitals Extension | Real-time | Test rapide |
| CrUX Dashboard | Field historique | Analyse tendances |
Exercices pratiques
Exercice 1 : Diagnostic Core Web Vitals
Testez 3 pages de votre site avec PageSpeed Insights et complétez :
| Page | LCP | INP | CLS | Priorité |
|---|---|---|---|---|
| Accueil | ... | ... | ... | ... |
| Produit/Article | ... | ... | ... | ... |
| Catégorie | ... | ... | ... | ... |
Exercice 2 : Identifier l'élément LCP
Pour votre page d'accueil, identifiez l'élément LCP :
- 1. Ouvrez PageSpeed Insights > Diagnostics
- 2. Cherchez "Largest Contentful Paint element"
- 3. Notez quel élément est identifié
- 4. Vérifiez s'il a un preload
- 5. Vérifiez son poids et format
Exercice 3 : Détecter les sources de CLS
Utilisez l'extension Web Vitals pour Chrome :
- 1. Installez l'extension "Web Vitals"
- 2. Activez le "Console logging"
- 3. Chargez votre page et scrollez
- 4. Ouvrez la Console DevTools
- 5. Identifiez les éléments qui causent le CLS
Exercice 4 : Simuler l'INP
Testez la réactivité de vos interactions :
- 1. DevTools > Performance > CPU throttling 4x
- 2. Cliquez sur différents boutons/liens
- 3. Observez le temps avant feedback visuel
- 4. Identifiez les interactions les plus lentes
- 5. Analysez les long tasks dans Performance
Quiz : Core Web Vitals
Quiz : Core Web Vitals
Que mesure le LCP ?
Ressources complémentaires
Pour approfondir les Core Web Vitals, consultez ces articles :
- Vitesse de Site : Optimiser le temps de chargement - Techniques complètes de performance
- Guide complet SEO Technique - Vue d'ensemble du SEO technique
- Optimisation des images pour le SEO - Impact sur le LCP
Continuez votre apprentissage
Découvrez maintenant comment fonctionne l'indexation Google pour que vos pages optimisées soient visibles.
Questions fréquentes
Thomas Dupont
Thomas travaille dans le SEO depuis 2012. Il a accompagné plus de 200 entreprises dans leur stratégie de référencement naturel et formé des milliers de professionnels du marketing digital. Spécialisé dans le SEO technique et les nouvelles approches GEO.
Articles connexes
Vitesse de Site : Optimiser le Temps de Chargement
La vitesse de chargement impacte le SEO et l'expérience utilisateur. Découvrez comment optimiser les performances de votre site.
Lire l'articleIndexation Google : Faire Indexer vos Pages Rapidement
L'indexation est le processus par lequel Google ajoute vos pages à son index. Sans indexation, pas de visibilité dans les résultats de recherche.
Lire l'articleSEO Technique : Guide Complet pour Optimiser les Fondations de votre Site
Le SEO technique assure que Google peut explorer et indexer votre site efficacement. Sans bases techniques solides, vos efforts SEO seront limités.
Lire l'articleContinuez votre apprentissage
Accédez à toutes les formations SEO et GEO.