En 2024, INP a remplacé FID. En 2026, Google est devenu encore plus strict. Voici les leviers concrets qui fonctionnent, hiérarchisés par ROI.

LCP (Largest Contentful Paint) — cible < 2,5 s

Le LCP mesure le temps d'apparition du plus gros élément visible. 80 % des sites échouent à cause de deux choses : image hero non optimisée et CSS bloquant.

Actions rapides

  • Image hero en <img> direct, jamais en background-image CSS (le navigateur la découvre plus tard).
  • fetchpriority="high" sur l'image hero.
  • Formats modernes : AVIF ou WebP, jamais de PNG pour des photos.
  • rel="preload" de l'image hero dans le <head>.
  • CSS critique inliné, reste en rel="preload" asynchrone.

INP (Interaction to Next Paint) — cible < 200 ms

La métrique qui pénalise le plus les sites sur-JavaScriptés en 2026. Mesure le délai entre une interaction et la réponse visuelle.

Actions rapides

  • Réduire le JS côté client (RSC est votre ami).
  • Yielder les tâches longues : scheduler.postTask ou setTimeout(0).
  • Déléguer aux Web Workers les calculs lourds.
  • Supprimer les scripts third-party non essentiels (tag managers, chats, analytics redondantes).
  • Debounce/throttle sur les handlers fréquents (scroll, input).

CLS (Cumulative Layout Shift) — cible < 0,1

Le plus facile à fixer si on sait où regarder.

Actions rapides

  • Toujours width et height sur les images et iframes.
  • Réserver l'espace des pubs, bannières, widgets chargés dynamiquement.
  • Utiliser min-height sur les sections qui chargent du contenu async.
  • Attention aux fonts qui arrivent tard : font-display: optional ou font-display: swap avec sizeadjust pour matcher la police fallback.

Outils que j'utilise

Mesurer en production avec vrais utilisateurs

Les "lab data" ne suffisent pas. Google regarde les field data (vrais utilisateurs). Implémentez web-vitals.js pour envoyer les métriques réelles à votre analytics.

import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

Le levier oublié : l'hébergement

Un site Next.js parfaitement optimisé sur un VPS mutualisé en Thaïlande échoue au LCP à Paris. L'hébergement proche de vos utilisateurs ou un CDN est gratuit en terme d'effort, massif en résultat.

Le résultat sur SunderDev

Avant optim : LCP 3,8 s, INP 280 ms, CLS 0,15. Après : LCP 1,6 s, INP 120 ms, CLS 0,02. Trafic organique +40 % dans les 3 mois qui ont suivi.

Audit performances et Core Web Vitals ?

Tags #javascript #performance #seo #cwv