Core Web Vitals

#Définition Core Web Vitals

Core Web Vitals : ensemble de trois métriques d'expérience utilisateur définies par Google en 2020, intégrées comme facteur de classement en juin 2021. Mesurées sur données terrain réelles (field data) via CrUX (Chrome User Experience Report, percentile 75). Pour approfondir, consultez la page service Development Next.js Nehos.

D'un point de vue métier, (1) LCP — Largest Contentful Paint : temps jusqu'au rendu du plus grand élément de contenu visible dans le viewport. Seuils : good <2,5 s / needs improvement 2,5-4 s / poor >4 s. Principaux leviers d'optimisation : lazy loading images avec fetchpriority="high" sur l'image LCP, preconnect CDN, Server Components Next.js pour réduire le JavaScript bloquant, ISR (Incremental Static Regeneration). (2) INP — Interaction to Next Paint : temps entre une interaction utilisateur (clic, tap, frappe) et le prochain frame visuel peint. Remplace le FID depuis mars 2024. Seuils : good <200 ms / needs improvement 200-500 ms / poor >500 ms. Leviers : réduction des Long Tasks JS (>50 ms), code splitting, deferment des scripts tiers, React Concurrent features. (3) CLS — Cumulative Layout Shift : somme des scores de déplacement de mise en page inattendus pendant la durée de vie de la page. Seuils : good <0,1 / needs improvement 0,1-0,25 / poor >0,25. Leviers : réserver les dimensions d'images et iframes via attributs width/height, éviter l'injection dynamique de contenu au-dessus du contenu existant. Outils de mesure : Lighthouse (lab data), PageSpeed Insights (lab + field data), Chrome DevTools, GSC rapport Expérience de la page, CrUX Dashboard (Data Studio).

Maîtriser Core Web Vitals permet aux équipes techniques et métier de parler le même langage — et d'arbitrer plus vite.

#Core Web Vitals expliqué simplement

Imagine que tu arrives sur un site web. Est-ce qu'il charge vite ? Est-ce qu'il répond immédiatement quand tu cliques ? Est-ce que les boutons restent bien à leur place ou est-ce qu'ils sautent au moment où tu essaies de cliquer dessus ? Core Web Vitals, c'est la façon dont Google mesure ces trois choses en conditions réelles sur des millions d'utilisateurs Chrome. Ce n'est pas un test de labo artificiel — c'est basé sur ce que vivent vraiment les gens qui visitent ton site. Le LCP vérifie que le contenu principal s'affiche vite. L'INP vérifie que le site répond quand on interagit. Le CLS vérifie que la page ne bouge pas de façon imprévue. Si tu rates ces trois métriques, Google considère que ton site offre une mauvaise expérience — et ça peut coûter des positions dans les résultats de recherche, surtout sur mobile où les performances sont souvent moins bonnes que sur desktop.

Prenez un cas concret : une entreprise de 50 personnes qui accélère sa croissance. La différence entre théorie et terrain ? Les chiffres. Et les chiffres, on les a.

#Cas d'usage concrets

DNVB cosmétique — migration Shopify Liquid vers Shopify Hydrogen Next.js — LCP mesuré avant migration (Shopify Liquid) : 3,8 s. INP : 380 ms (seuil 'needs improvement'). CLS : 0,22. Post-migration Shopify Hydrogen + Next.js App Router + Vercel Edge : LCP 1,2 s, INP 95 ms, CLS 0,04. Gain conversion mobile : +34 %. CA mobile : +52 % en 12 mois. Budget migration : 1211 k€ HT. Le travail sur Core Web Vitals n'était pas une fin en soi — il était la conséquence directe d'une architecture frontend moderne. Retrouvez le détail dans cas DNVB cosmétique Shopify Hydrogen — résultats Core Web Vitals.

Site agence B2B — optimisation INP sur pages de service interactives — INP médian 520 ms sur pages de service avec formulaires et animations JavaScript lourdes. Diagnostic : 4 scripts tiers (chat, analytics, A/B testing, retargeting) injectés en main thread bloquant. Intervention : lazy loading scripts tiers post-interaction, code splitting React avec React.lazy(), réduction Long Tasks de 14 à 2. INP post-optimisation : 88 ms. Position Google sur mots-clés service B2B : +3,2 positions en moyenne sur 90 jours post-déploiement.

E-commerce B2B refonte Next.js 16 — CLS sur fiches produits dynamiques — CLS score 0,34 (seuil 'poor') sur fiches produits e-commerce B2B. Cause principale : chargement asynchrone des badges de disponibilité stock et des prix remisés clients, injectés au-dessus du bouton d'ajout panier. Correction via skeleton screens avec dimensions réservées + Server Components pour prix et stock. CLS descendu à 0,07. Taux d'ajout panier mobile +18 %.

#Core Web Vitals chez Nehos Groupe

Chez Nehos, on a mesuré les résultats sur le terrain. Sur les 3 derniers projets impliquant Core Web Vitals, on a documenté les résultats avec des KPIs précis. Notre service Development Next.js Nehos couvre ce périmètre de A à Z.

La méthode Nehos est documentée sur Méthode Performance Web Stack Nehos™. Chaque mission démarre par un cadrage structuré : objectifs chiffrés, périmètre technique, jalons à 30/60/90 jours. Les résultats mesurés sur nos clients : 34 % est un ordre de grandeur courant. On livre, on mesure, on itère. Pas de slides sans livrable. Voir aussi : refonte Magento vers architecture headless.

#Termes associés

Comprendre ce terme implique de maîtriser son écosystème.

• INP (Interaction to Next Paint)
• Hreflang
• Crawl Budget
• Schema Markup
• Next.js
• Server Components React
• Featured Snippet

Explorez chaque définition pour construire une vision complète du sujet.