Performance

Core Web Vitals : le guide complet pour optimiser votre site

13 janvier 2026 11 minutes de lecture

Les Core Web Vitals sont devenus un facteur de classement officiel de Google. Comprendre et optimiser ces métriques est essentiel pour votre SEO et l'expérience utilisateur.

Que sont les Core Web Vitals ?

Les Core Web Vitals sont trois métriques spécifiques mesurant l'expérience utilisateur réelle de vos pages :

LCP - Largest Contentful Paint

Mesure : Le temps de chargement du plus grand élément visible (image, vidéo, bloc de texte).

Bon : ≤ 2.5s À améliorer : 2.5s - 4s Médiocre : > 4s
FID FID - First Input Delay

Mesure : Le délai entre la première interaction utilisateur (clic, tap) et la réponse du navigateur.

Bon : ≤ 100ms À améliorer : 100ms - 300ms Médiocre : > 300ms

Note : FID est remplacé par INP (Interaction to Next Paint) depuis mars 2024.

CLS CLS - Cumulative Layout Shift

Mesure : La stabilité visuelle - les décalages inattendus des éléments pendant le chargement.

Bon : ≤ 0.1 À améliorer : 0.1 - 0.25 Médiocre : > 0.25

Comment mesurer les Core Web Vitals

Outils recommandés :

Astuce : Important : Les données de terrain (CrUX) sont celles utilisées par Google pour le classement. Les données de laboratoire (Lighthouse) sont utiles pour diagnostiquer mais ne reflètent pas toujours l'expérience réelle.

Optimiser le LCP

Causes communes de LCP lent :

Solutions :

1. Optimisez les images :

<img 
  src="image.webp" 
  srcset="image-400.webp 400w, image-800.webp 800w"
  sizes="(max-width: 600px) 400px, 800px"
  loading="eager"  <!-- Pour l'image LCP -->
  fetchpriority="high"
  alt="Description"
>

2. Préchargez les ressources critiques :

<link rel="preload" href="hero.webp" as="image">
<link rel="preconnect" href="https://fonts.googleapis.com">

3. Utilisez un CDN pour réduire la latence serveur.

Optimiser le FID/INP

Causes communes :

Solutions :

1. Différez le JavaScript non critique :

<script src="analytics.js" defer></script>
<script src="chat-widget.js" async></script>

2. Divisez les tâches longues :

// Au lieu d'une boucle bloquante
function processInChunks(items) {
  const chunk = items.splice(0, 100);
  // Traiter le chunk
  if (items.length > 0) {
    setTimeout(() => processInChunks(items), 0);
  }
}

Optimiser le CLS

Causes communes :

Solutions :

1. Définissez toujours les dimensions :

<img src="photo.jpg" width="800" height="600" alt="...">

/* Ou avec CSS aspect-ratio */
img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}

2. Réservez l'espace pour les pubs :

.ad-container {
  min-height: 250px; /* Hauteur minimale de la pub */
}

3. Optimisez le chargement des fonts :

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* ou optional */
}

Checklist d'optimisation rapide

[OK] Actions prioritaires :

Testez votre performance

Notre audit inclut l'analyse des Core Web Vitals

Analyser mon site →

Articles connexes