Gabin Delplanque
← Tous les outils
📡 CrUX Checker

Données terrain réelles
de vos utilisateurs Chrome

Consultez les Core Web Vitals mesurés sur de vrais utilisateurs — pas des données de lab simulées.

Comprendre les Core Web Vitals
⚡
Largest Contentful Paint (LCP)
Chargement du plus grand élément visible
▼
≤ 2.5s — Bon> 4s — Mauvais

Qu'est-ce que le LCP ?

Mesure le temps nécessaire pour afficher le plus grand élément visible (image hero, bloc de texte). C'est le signal de "la page est chargée" pour l'utilisateur.

Comment l'améliorer

  • Optimiser les images — formats WebP/AVIF, compression, dimensions explicites
  • Précharger les ressources critiques — <link rel="preload"> sur l'image LCP
  • Réduire le TTFB — CDN, cache serveur, hébergement performant
  • Éliminer le CSS bloquant — inline le CSS critique, différer le reste
🖱️
Interaction to Next Paint (INP)
Réactivité aux interactions utilisateur
▼
≤ 200ms — Bon> 500ms — Mauvais

Qu'est-ce que l'INP ?

Mesure la latence de toutes les interactions (clics, saisies, appuis) pendant toute la visite. Remplace le FID depuis 2024 comme Core Web Vital officiel.

Comment l'améliorer

  • Fragmenter les longues tâches JS — découper les tâches > 50ms avec setTimeout / scheduler.yield()
  • Différer le JS non critique — attributs defer et async
  • Optimiser les gestionnaires d'événements — debounce, throttle, délégation
  • Réduire la taille du DOM — un DOM plus léger = rendu plus rapide
📐
Cumulative Layout Shift (CLS)
Stabilité visuelle de la page
▼
≤ 0.1 — Bon> 0.25 — Mauvais

Qu'est-ce que le CLS ?

Quantifie les décalages inattendus de mise en page (images sans dimensions, publicités, polices qui remplacent). Un CLS élevé frustre les utilisateurs qui cliquent au mauvais endroit.

Comment l'améliorer

  • Toujours définir width/height sur les images — le navigateur réserve l'espace avant le chargement
  • Réserver de l'espace pour les publicités — placer holder fixe
  • Précharger les polices — font-display: optional ou preload
  • Préférer transform aux positionnements — transform plutôt que top/left
Métriques indirectes — influencent les CWV sans en faire partie
🎨
First Contentful Paint (FCP) Indirect
Premier affichage de contenu
▼
≤ 1.8s — Bon> 3s — Mauvais

Qu'est-ce que le FCP ?

Premier élément de contenu rendu (texte, image, canvas). Un FCP lent retarde mécaniquement le LCP — améliorer le FCP améliore souvent le LCP.

Comment l'améliorer

  • Réduire le TTFB — le serveur est le premier goulot
  • Supprimer les ressources bloquantes — CSS/JS dans le <head>
  • Inliner le CSS critique — ce qui est nécessaire au premier rendu
  • Préconnecter aux origines tierces — <link rel="preconnect">
🖥️
Time to First Byte (TTFB) Indirect
Temps de réponse du serveur
▼
≤ 800ms — Bon> 1.8s — Mauvais

Qu'est-ce que le TTFB ?

Temps entre la requête HTTP et le premier octet de réponse. C'est la fondation de toutes les autres métriques — si le serveur est lent, tout le reste sera lent.

Comment l'améliorer

  • Utiliser un CDN — servez depuis des serveurs proches de l'utilisateur
  • Mettre en cache les pages — cache serveur (Redis, Varnish), cache applicatif
  • Optimiser les requêtes BDD — index, requêtes N+1, pagination
  • Éviter les redirections — chaque redirection = un aller-retour réseau supplémentaire