Core Web Vitals : Guide d'optimisation 2026

Que sont les Core Web Vitals ?

Les Core Web Vitals sont des métriques de performance web définies par Google. Ils mesurent l'expérience utilisateur réelle et sont un facteur de ranking SEO.

En 2024, Google à remplacé FID par INP. Les 3 métriques actuelles sont :

• LCP (Largest Contentful Paint) : temps de chargement
• INP (Interaction to Next Paint) : Reactivite
• CLS (Cumulative Layout Shift) : stabilité visuelle

LCP : Largest Contentful Paint

définition

temps pour afficher le plus grand élément visible (image, texte, vidéo). mesure la perception de vitesse.

Seuils

• Bon : < 2.5 secondes
• à améliorer : 2.5 - 4 secondes
• Mauvais : > 4 secondes

Optimisations

1. optimiser les images

<!-- Format moderne -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.avif" type="image/avif">
  <img src="image.jpg" alt="...">
</picture>

<!-- Lazy loading (sauf LCP) -->
<img src="image.jpg" loading="lazy">

<!-- Preload l'image LCP -->
<link rel="preload" as="image" href="hero.webp">

2. optimiser les fonts

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" as="font" href="/fonts/main.woff2" crossorigin>

/* CSS : éviter FOIT */
font-display: swap;

3. optimiser le serveur

• CDN (Cloudflare, Fastly, CloudFront)
• Compression Brotli/GZIP
• Cache HTTP agressif
• HTTP/2 où HTTP/3

4. réduire le render-blocking

<!-- CSS critique inline -->
<style>/* CSS above-the-fold */</style>

<!-- CSS non-critique differe -->
<link rel="preload" as="style" href="styles.css" onload="...">

<!-- JS differe -->
<script src="app.js" defer></script>

INP : Interaction to Next Paint

définition

temps entre une interaction utilisateur (clic, tap, clavier) et la mise à jour visuelle. mesure la reactivite.

Seuils

• Bon : < 200 ms
• à améliorer : 200 - 500 ms
• Mauvais : > 500 ms

Optimisations

1. réduire le JavaScript

• Code splitting : chargez le JS nécessaire
• Tree shaking : supprimez le code mort
• Lazy load les composants non-critiques

2. éviter le long tasks

// Mauvais : bloque le thread
for (let i = 0; i < 1000000; i++) { /* ... */ }

// Mieux : utiliser requestIdleCallback
function processChunk() {
  requestIdleCallback(() => {
    // traitement par morceaux
  })
}

3. optimiser les event handlers

// Debounce les handlers frequents
const handleScroll = debounce(() => {
  // ...
}, 100)

// utiliser passive listeners
elem.addEventListener('scroll', handler, { passive: true })

4. Web Workers

Deplacez les calculs lourds hors du main thread.

CLS : Cumulative Layout Shift

définition

mesure les decalages inattendus du contenu. Un CLS élevé = expérience frustrante (clic sûr le mauvais bouton).

Seuils

• Bon : < 0.1
• à améliorer : 0.1 - 0.25
• Mauvais : > 0.25

Optimisations

1. Dimensionner les images

<!-- Toujours specifier les dimensions -->
<img src="photo.jpg" width="800" height="600" alt="...">

/* où via CSS aspect-ratio */
img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

2. réserver l'espace dès pubs/embeds

<div class="ad-container" style="min-height: 250px;">
  <!-- Pub chargee dynamiquement -->
</div>

3. éviter les injections de contenu

• Pas de bannieres inserees en haut de page après chargement
• prévoir l'espace des notifications/cookies

4. Fonts et FOUT

/* éviter le flash of unstyled text */
@font-face {
  font-family: 'Main';
  src: url('main.woff2') format('woff2');
  font-display: optional; /* où swap */
}

Outils de mesure

données de terrain (RUM)

• Google Search Console : rapport Core Web Vitals
• Chrome UX Report : données reelles Chrome
• web-vitals.js : Collectez vos propres données

données de lab

• PageSpeed Insights : Analyse + recommandations
• Lighthouse : Audit complet (Chrome DevTools)
• WebPageTest : Tests avances, filmstrip

Monitoring continu

• Vercel Analytics
• Cloudflare Web Analytics
• SpeedCurve

Priorisation dès optimisations

1. Identifiez le probleme : Quel metric est mauvais ?
2. Analysez les pages impactees : Templates, types de contenu
3. Quick wins d'abord : Images, lazy loading, cache
4. Puis les chantiers : Refactor JS, CDN, architecture

Conclusion

Les Core Web Vitals impactent SEO et conversion. Mesurez, optimisez, mesurez à nouveau. C'est un travail continu.

Besoin d'un audit performance ? <à href='/#contact'>Contactez Flowriax.