Core Web Vitals 2026 : ce qui compte pour le ranking

Les Core Web Vitals, ce sont les trois métriques avec lesquelles Google mesure l’expérience réelle de vos visiteurs : vitesse d’affichage (LCP), réactivité (INP) et stabilité visuelle (CLS). Depuis mars 2024, INP a remplacé FID comme signal d’interactivité, et il est nettement plus exigeant. Place aux seuils officiels, aux pièges de mesure et à la façon dont on optimise une stack Next.js.

Les seuils officiels à connaître#

Le changement le plus impactant des dernières années : INP (Interaction to Next Paint) est le seul signal d’interactivité pris en compte depuis mars 2024. FID est officiellement retiré de l’équation.

Les seuils officiels publiés par Google (web.dev) :

Pour être classé « bon », il faut que 75% de vos visites réelles passent le seuil. Viser juste la limite, c’est donc déjà être en danger : nous, on dimensionne pour passer largement en dessous.

Pourquoi INP change tout#

FID mesurait le délai avant la première interaction. INP mesure le délai de toutes les interactions sur la durée de la session et retient la pire. C’est beaucoup plus sévère sur les applications React lourdes.

Les principales causes d’un mauvais INP :

• Hydration JS trop lourde
• Event handlers bloquants
• Re-renders inutiles au clic
• Scripts tiers (analytics, chat, ads)

Comment on adapte notre stack Next.js#

1. RSC first pour réduire l’hydration#

Avec Next.js 15+, on pousse les composants en React Server Components autant que possible. Moins de JS hydraté = moins d’INP potentiel.

// RSC : aucun JavaScript envoyé au client
export default function ProductCard({ product }: { product: Product }) {
  return (
    <article className='card'>
      <h2>{product.name}</h2>
      <p>{product.price}</p>
    </article>
  )
}

2. useTransition pour les interactions non-critiques#

'use client'
import { useTransition } from 'react'
 
function FilterButton({ label, onFilter }: Props) {
  const [isPending, startTransition] = useTransition()
  return (
    <button
      onClick={() => startTransition(() => onFilter(label))}
      className={isPending ? 'opacity-70' : ''}
    >
      {label}
    </button>
  )
}

3. Audit des scripts tiers#

Chaque script tiers peut dégrader l’INP. On charge tout ce qui n’est pas critique en différé :

<Script src='https://analytics.example.com/script.js' strategy='lazyOnload' />

LCP : les vraies optimisations#

Le LCP vient généralement de trois sources, dans cet ordre de fréquence :

1. Image principale : priority + sizes corrects sur next/image
2. Fonts : display: swap + préchargement de la police critique
3. TTFB : SSG ou ISR plutôt que SSR pour les pages statiques

<Image src='/hero.webp' alt='Hero' priority sizes='(max-width: 768px) 100vw, 50vw' quality={85} />

Sur un site dont l’image est le produit, un portfolio d’architecte ou de photographe, l’arbitrage se fait image par image plutôt qu’en compressant tout au même niveau : le raisonnement est détaillé dans le site internet d’un architecte.

L’écart de résultats selon l’approche de rendu est net :

Notre approche sur les projets#

Sur nos projets Next.js, on vise systématiquement des marges confortables sous les seuils : un LCP nettement sous les 2.5s et un INP sous les 100ms en conditions mobiles, mesurés en conditions réelles et pas seulement en laboratoire. Cette exigence se construit dès l’architecture, en lien direct avec le maillage interne et la structure des pages.

Les Core Web Vitals au vert, ce n’est pas un bonus qu’on ajoute à la fin. C’est une contrainte qu’on pose dès l’architecture, avant la première ligne de code.

La vitesse n’est qu’un des signaux d’un site performant : on regarde aussi le parcours, la visibilité et le message dans notre méthode d’audit de site web. Core Web Vitals au vert reste notre baseline sur chaque projet livré. La performance n’est qu’un levier du référencement : l’ensemble est couvert dans notre guide complet du référencement naturel. Si les vôtres sont dans le rouge, c’est précisément ce qu’on diagnostique dans notre audit SEO technique.