Comment réussir les Core Web Vitals avec Next.js (2026)

Moins de la moitié du web mobile passe la barre de performance de Google. En 2025, seulement 48 % des origines mobiles ont satisfait aux trois Core Web Vitals, contre 36 % deux ans plus tôt (HTTP Archive Web Almanac, 2025). Cet écart est une opportunité. Si vos concurrents sont lents, un site Next.js rapide gagne à la fois en classement et en conversion. Le framework vous fournit la plupart des outils, mais une version par défaut échoue encore à de nombreux audits. Ce guide montre exactement comment nous comblons cet écart.

Points clés à retenir

• Une page est validée lorsque le LCP est de 2,5 s ou moins, l'INP de 200 ms ou moins, et le CLS de 0,1 ou moins, mesurés au 75e centile des utilisateurs réels (web.dev, 2025).
• Seulement 48 % des origines mobiles ont satisfait aux trois métriques en 2025, et le LCP est le maillon faible à 62 % (Web Almanac, 2025).
• La vitesse, c'est de l'argent : un site e-commerce qui se charge en 1 seconde convertit environ 2,5 fois mieux qu'un site qui se charge en 4 secondes (Portent, 2022).
• Next.js excelle sur les correctifs les plus importants : les composants Image et Font, les Server Components et le chargement paresseux dynamic().

Que sont les Core Web Vitals en 2026 ?

Les Core Web Vitals sont trois métriques que Google utilise pour évaluer l'expérience réelle des pages : le chargement, l'interactivité et la stabilité visuelle. Une URL n'est validée que lorsque les trois se situent dans la fourchette "bonne" au 75e centile des vues de page (web.dev, 2025). Une seule métrique lente fait échouer toute la page, vous ne pouvez donc pas échanger un excellent score de mise en page contre un chargement lent.

Le plus grand changement concerne l'interactivité. Interaction to Next Paint (INP) a remplacé First Input Delay le 12 mars 2024 (web.dev, 2024). FID ne mesurait que le délai avant l'enregistrement de votre premier toucher. INP mesure la latence complète de chaque interaction tout au long de la visite, puis rapporte la pire. C'est un test beaucoup plus difficile, et le JavaScript côté client lourd est ce qui le fait généralement échouer.

Voici les objectifs que vous visez. Tout ce qui se trouve dans la fourchette intermédiaire est un avertissement, et la fourchette "mauvaise" est un échec.

Les seuils de 2026

• LCP (chargement) : bon est 2,5 s ou moins, à améliorer est 2,5 à 4,0 s, mauvais est plus de 4,0 s.
• INP (interactivité) : bon est 200 ms ou moins, à améliorer est 200 à 500 ms, mauvais est plus de 500 ms.
• CLS (stabilité visuelle) : bon est 0,1 ou moins, à améliorer est 0,1 à 0,25, mauvais est plus de 0,25.

Pourquoi les Core Web Vitals sont-ils importants pour le SEO et les revenus ?

Ils sont importants car les pages lentes perdent de l'argent et des classements en même temps. Portent a mesuré 5,6 millions de sessions et a constaté une baisse de la conversion B2C de 3,05 % pour un chargement en 1 seconde à 0,67 % pour 4 secondes, soit une diminution d'environ 0,3 point par seconde ajoutée (Portent, 2022). Du côté du SEO, Google confirme que de bons Core Web Vitals "s'alignent sur ce que nos systèmes de classement principaux cherchent à récompenser" (Google Search Central, 2025).

L'effet sur les revenus est cumulatif. Dans l'étude de Google et Deloitte portant sur 37 marques et 30 millions de sessions, une seule amélioration de 0,1 seconde de la vitesse mobile a augmenté les conversions de vente au détail de 8,4 % et la valeur moyenne des commandes de 9,2 % (web.dev, 2020). Un dixième de seconde semble anodin jusqu'à ce que vous le multipliez sur un quart du trafic.

Pour un aperçu plus approfondi de la façon dont cela se lie à la recherche, notre guide sur le SEO technique pour les développeurs couvre l'indexation et le rendu. La vitesse est un pilier d'un système plus vaste.

Combien de sites réussissent réellement les Core Web Vitals ?

La plupart non, et c'est sur mobile qu'ils rencontrent des difficultés. Le Web Almanac 2025 a estimé le taux de réussite global à 48 % sur mobile et 56 % sur ordinateur, le LCP étant la métrique la plus difficile avec 62 % de bons résultats sur mobile contre 77 % pour l'INP et 81 % pour le CLS (Web Almanac, 2025). L'INP sur ordinateur est presque résolu à 97 %, mais les téléphones avec des CPU lents et des réseaux instables racontent une autre histoire.

La conclusion est stratégique. Si le LCP échoue le plus souvent, votre première heure d'optimisation devrait être consacrée à l'image principale et aux polices, et non au micro-réglage d'un gestionnaire de bouton. Résolvez d'abord le problème le plus flagrant.

Comment corriger le LCP dans Next.js ?

Le LCP échoue lorsque l'élément le plus grand, généralement une image principale ou un titre, met trop de temps à s'afficher. Étant donné que seulement 62 % des sites mobiles le réussissent, c'est là que se trouvent les plus grands gains (Web Almanac, 2025). Le composant Image de Next.js est le correctif le plus important : il sert des formats modernes, génère des tailles réactives et vous permet de signaler l'élément principal pour qu'il se charge en premier.

Définissez priority sur l'image située au-dessus de la ligne de flottaison. Cela indique à Next.js de la précharger au lieu de la charger paresseusement, ce qui, pour une image principale, fait la différence entre réussir et échouer.

import Image from 'next/image';

export function Hero() {
  return (
    <Image
      src="/hero.webp"
      alt="Product dashboard"
      width={1200}
      height={630}
      priority
      sizes="(max-width: 768px) 100vw, 1200px"
    />
  );
}

Les polices sont le deuxième piège du LCP. Une police web à chargement tardif bloque le rendu du texte et peut décaler le titre. next/font auto-héberge le fichier au moment de la construction, supprime la requête réseau vers Google et applique font-display: swap pour vous.

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'], display: 'swap' });

export default function RootLayout({ children }) {
  return <html className={inter.className}><body>{children}</body></html>;
}

Enfin, affichez le contenu au-dessus de la ligne de flottaison sur le serveur. Les Server Components envoient du HTML que le navigateur peut afficher immédiatement, sans attente d'hydratation. Conservez l'image principale, le titre et le texte principal comme sortie rendue par le serveur, et poussez l'interactivité vers les bords. Dans nos versions, le fait de déplacer une image principale hors d'un composant client et d'ajouter priority réduit systématiquement le LCP mobile à moins de 2,5 s à lui seul.

Comment corriger l'INP dans Next.js ?

L'INP échoue lorsque JavaScript bloque le thread principal pendant qu'un utilisateur tente d'interagir. La solution est simple à énoncer et plus difficile à mettre en œuvre : livrez moins de JavaScript. Chaque composant que vous conservez sur le serveur est du code que le navigateur n'a jamais à analyser, ce qui améliore directement la latence d'interaction (web.dev, 2024).

Chargez paresseusement tout ce qui est lourd et qui n'est pas nécessaire pour le premier rendu. Un widget de chat, un carrousel, une carte ou un éditeur riche devrait se charger à la demande avec dynamic(), et non dans le bundle initial.

import dynamic from 'next/dynamic';

const CommentEditor = dynamic(() => import('./CommentEditor'), {
  ssr: false,
  loading: () => <div className="editor-skeleton" />,
});

Pour les mises à jour d'état coûteuses, indiquez à React qu'elles ne sont pas urgentes. Enveloppez une mise à jour de filtre ou de recherche dans useTransition pour maintenir la réactivité de l'entrée pendant que la liste se re-rend en arrière-plan, ce qui est exactement ce que l'INP récompense.

'use client';
import { useState, useTransition } from 'react';

export function Filter({ items }) {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');

  return (
    <input
      onChange={(e) => {
        const value = e.target.value;
        startTransition(() => setQuery(value));
      }}
    />
  );
}

Chaque fonctionnalité interactive doit-elle être incluse dans le bundle au chargement ? Presque jamais. Auditez vos composants client, et vous constaterez généralement qu'un tiers d'entre eux peuvent être déplacés vers le serveur. Pour un examen architectural complet, notre service de développement Next.js existe précisément pour ce type de refactoring.

Comment corriger le CLS dans Next.js ?

Le CLS échoue lorsque les éléments se déplacent après leur rendu, et les coupables habituels sont les images sans dimensions, les polices tardives et les bannières injectées. La règle est de réserver de l'espace pour tout avant son arrivée. Lorsque vous passez width et height au composant Image de Next.js, il génère une boîte CSS avec un rapport d'aspect qui maintient la mise en page stable avant le chargement du fichier.

La même logique s'applique aux intégrations et aux publicités. Enveloppez tout iframe tiers dans un conteneur avec une min-height fixe afin que le contenu en dessous ne saute pas lorsque l'intégration s'hydrate.

<div style={{ minHeight: 400, position: 'relative' }}>
  <Image src="/chart.webp" alt="Quarterly results" fill sizes="100vw" />
</div>

Les polices provoquent les décalages subtils. next/font réduit cela en faisant correspondre une métrique de secours à votre police web, de sorte que le passage du texte système à la police chargée bouge à peine. Combiné avec des images dimensionnées, c'est ce qui maintient le CLS confortablement en dessous de l'objectif de 0,1. Le CLS est la métrique la plus facile à réussir une fois que vous prenez l'habitude de "réserver l'espace".

Comment mesurons-nous et surveillons-nous les résultats ?

Les outils de laboratoire mentent un peu, alors mesurez les utilisateurs réels. Lighthouse et PageSpeed Insights vous donnent une lecture rapide dans un environnement contrôlé, mais Google classe les sites en fonction des données de terrain du Chrome User Experience Report, collectées auprès de vrais visiteurs Chrome sur 28 jours. Le taux de réussite mobile a augmenté chaque année, passant de 36 % en 2023 à 48 % en 2025, et la barre continue de monter (Web Almanac, 2025).

Pour collecter vos propres données de terrain, le hook useReportWebVitals diffuse chaque métrique des sessions réelles vers votre point de terminaison d'analyse. Vercel Speed Insights l'encapsule pour vous, mais le hook brut fonctionne partout.

'use client';
import { useReportWebVitals } from 'next/web-vitals';

export function WebVitals() {
  useReportWebVitals((metric) => {
    navigator.sendBeacon('/api/vitals', JSON.stringify(metric));
  });
  return null;
}

Notre constat : les scores de laboratoire et de terrain divergent le plus sur l'INP, car Lighthouse s'exécute sur une machine rapide sans interactions réelles. Fiez-vous au chiffre CrUX pour l'INP, et considérez le score Lighthouse comme un simple test de fumée.

Prêt à réussir votre audit ?

Les Core Web Vitals récompensent les sites qui respectent le temps de l'utilisateur, et Next.js est conçu pour cela. Si votre stack actuelle vous pose problème, ou si vous souhaitez une version qui se livre rapidement par défaut, nous planifions, construisons et optimisons les sites Next.js de bout en bout. Consultez nos tarifs ou contactez-nous pour discuter de vos chiffres.

Foire aux questions

Quels sont les seuils des Core Web Vitals en 2026 ?

Une page est validée lorsque le LCP est de 2,5 secondes ou moins, l'INP de 200 millisecondes ou moins, et le CLS de 0,1 ou moins. Google mesure chaque métrique au 75e centile des vues de page des utilisateurs réels (web.dev, 2025), donc une poignée de chargements rapides ne sauvera pas une traîne lente.

Next.js réussit-il automatiquement les Core Web Vitals ?

Non. Next.js vous offre les composants Image et Font, les Server Components et le streaming, mais une version par défaut peut toujours échouer. Vous devez définir la priority de l'image, réserver de l'espace de mise en page et réduire le JavaScript côté client. Le framework supprime les parties difficiles, il ne supprime pas le travail.

Qu'est-ce qui a remplacé First Input Delay ?

Interaction to Next Paint a remplacé First Input Delay le 12 mars 2024 (web.dev, 2024). L'INP mesure la latence de chaque interaction pendant une visite, pas seulement la première, ce qui rend le JavaScript lourd beaucoup plus visible dans le score.

Les Core Web Vitals affectent-ils les classements Google ?

Oui, dans le cadre des signaux d'expérience de page. Google déclare que de bonnes métriques s'alignent sur ce que ses systèmes de classement principaux récompensent (Google Search Central, 2025). L'effet est le plus fort sur les requêtes mobiles compétitives où de nombreux résultats sont par ailleurs similaires.

Quel Core Web Vital est le plus difficile à réussir sur mobile ?

Largest Contentful Paint. Seulement 62 % des origines mobiles ont atteint un bon LCP en 2025, contre 77 % pour l'INP et 81 % pour le CLS (Web Almanac, 2025). Les images principales lentes et les polices bloquant le rendu sont la cause habituelle, c'est pourquoi le composant Image est le premier correctif.

Conclusion

Réussir les Core Web Vitals n'est pas une question de chance, c'est une liste de contrôle. Corrigez le LCP avec le composant Image, priority et next/font. Corrigez l'INP en livrant moins de JavaScript via les Server Components et dynamic(). Corrigez le CLS en réservant de l'espace pour chaque image et intégration. Ensuite, mesurez les utilisateurs réels avec CrUX et le hook useReportWebVitals, car les données de terrain sont ce que Google évalue réellement. La moitié du web mobile échoue encore à cette barre. Une version Next.js propre est la façon dont vous atterrissez dans la moitié la plus rapide. Lorsque vous êtes prêt à livrer, nos derniers guides et notre équipe sont là pour vous aider.