Les Core Web Vitals de Google sont devenus un signal de classement en 2021. Depuis, chaque agence a ajouté "optimisé CWV" à ses pitch decks. Presque aucune n'explique ce que les métriques mesurent vraiment ou ce qui les fait échouer.
Voici la version sans jargon.
Ce qu'il mesure : Combien de temps il faut pour que l'élément visible le plus large sur la page apparaisse.
Cet élément est généralement votre image hero, vidéo hero, ou un grand bloc de texte. Le moment où cet élément est entièrement visible, le chronomètre LCP s'arrête.
Pourquoi ça compte : LCP est le moment où les utilisateurs décident si la page se charge. Avant LCP, ils regardent une page partiellement rendue. Après LCP, la page semble utilisable.
La cible : Sous 2,5 secondes. Sous 1,5s est excellent. Au-dessus de 4s, les taux de rebond augmentent de manière mesurable.
Ce qui cause l'échec : Images grandes et non optimisées. Vidéos hero qui se chargent avant de jouer. Temps de réponse serveur. JavaScript bloquant le rendu.
Ce qu'il mesure : La rapidité avec laquelle la page répond quand vous cliquez, tapotez, ou tapez quelque chose.
INP a remplacé FID en 2024. Il mesure le délai d'interaction le pire sur toute la visite de page.
La cible : Sous 200 millisecondes. Sous 100ms est excellent. Au-dessus de 500ms semble lent même sur du matériel rapide.
Ce qui cause l'échec : JavaScript lourd s'exécutant sur le thread principal. Scripts tiers (widgets de chat, analytics, outils de tests A/B) qui bloquent l'interaction.
Ce qu'il mesure : De combien la page bouge pendant son chargement.
Si vous avez déjà essayé de cliquer sur un bouton et qu'il a bougé juste au moment du clic — parce qu'une bannière ou une image s'est chargée au-dessus — vous avez expérimenté du CLS.
La cible : Sous 0,1. Sous 0,05 est excellent. Au-dessus de 0,25 est un problème.
Ce qui cause l'échec : Images sans attributs width et height explicites. Polices qui se chargent après que le texte est peint et causent un reflow. Contenu injecté dynamiquement au-dessus du contenu existant.
Classement de recherche : Les CWV sont un facteur d'arbitrage, pas un facteur de classement principal. Deux pages avec un contenu identique classeront différemment selon les CWV. Une page avec de mauvais CWV et un excellent contenu surclassera une page avec des CWV parfaits et un contenu mince.
Taux de rebond : Une amélioration d'1 seconde de LCP corrèle avec une réduction de 10–20 % du taux de rebond.
Taux de conversion : Pour chaque seconde de délai de chargement au-dessus de 2 secondes, les taux de conversion baissent de manière mesurable.
PageSpeed Insights (pagespeed.web.dev) : collez votre URL, lancez le test.
Chrome DevTools : onglet Lighthouse, appareil mobile, réseau ralenti. Simule un téléphone mid-range sur une connexion 4G.
Search Console : si votre site a assez de trafic, Google montre votre statut CWV dans le rapport Core Web Vitals.
L'image hero est presque toujours l'élément LCP. La correction :
width et height pour éviter le CLSfetchpriority="high" à l'image hero<head> : <link rel="preload" as="image" href="/hero.webp">Chargez-les avec defer ou async. Mieux : chargez les scripts non-critiques après que la page est interactive. Pour la plupart des sites marketing, analytics qui se charge 2 secondes après la page c'est bien.
Chaque image sans width et height cause du CLS. Si vous ne pouvez pas (contenu dynamique), utilisez un conteneur avec un ratio d'aspect connu via CSS (aspect-ratio: 16/9).
font-display: swap pour les polices customSans font-display: swap, les navigateurs attendent la police avant de rendre le texte — causant un délai LCP. Avec swap, le navigateur rend avec une police de remplacement immédiatement.
Si votre Time to First Byte est au-dessus de 600ms, tout le reste est plus difficile à corriger. Un CDN (Cloudflare, Vercel, Fastly) distribue votre contenu globalement et réduit le TTFB pour la plupart des utilisateurs à moins de 200ms.
| Type de site | LCP | INP | CLS | Lighthouse |
|---|---|---|---|---|
| Site marketing excellent | < 1,2s | < 80ms | < 0,02 | 95–100 |
| Bon site marketing | 1,2–2,0s | 80–150ms | 0,02–0,06 | 85–95 |
| Acceptable | 2,0–2,5s | 150–200ms | 0,06–0,1 | 70–85 |
| Nécessite amélioration | > 2,5s | > 200ms | > 0,1 | < 70 |
La plupart des sites Webflow atterrissent dans "acceptable" par défaut. La plupart des sites Next.js et Astro soigneusement construits peuvent atteindre "excellent" avec une optimisation délibérée.
Vous voulez savoir comment votre site est noté et quoi corriger en premier ? Démarrez une conversation — nous ferons un audit CWV complet et prioriserons les changements par impact.
Nous prenons un nombre limité de projets chaque trimestre. Dites-nous ce que vous construisez.
Pièges du cache, décisions composant serveur vs client, Vercel vs auto-hébergement, et quand le Pages Router reste le bon choix. Leçons réelles de déploiements App Router en production.
React Native et Flutter sont tous les deux matures. Le choix ne dépend pas du meilleur framework — il dépend de votre équipe, votre délai et ce que vous construisez.