Core Web Vitals : quand la performance technique devient un argument commercial
Depuis le Page Experience Update de Google, les Core Web Vitals (CWV) sont des signaux de ranking officiels. Mais leur impact dépasse le SEO : un site qui charge en 1 seconde convertit 3 fois mieux qu'un site qui charge en 5 secondes. Performance technique et performance commerciale sont désormais indissociables.
En 2025, Google mesure trois indicateurs clés. Comprendre ce qu'ils mesurent est la première étape pour les optimiser.
LCP — Largest Contentful Paint : la vitesse perçue
Le LCP mesure le temps nécessaire pour afficher le plus grand élément visible dans la fenêtre initiale (généralement une image hero ou un bloc de texte principal). Seuils Google :
- Bon : ≤ 2,5 secondes
- À améliorer : 2,5 à 4 secondes
- Mauvais : > 4 secondes
Les causes les plus fréquentes d'un LCP dégradé :
- Images non optimisées : servez des images en format WebP ou AVIF, avec les attributs
widthetheightdéfinis pour éviter le layout shift - Absence de préchargement : ajoutez
<link rel="preload">pour l'image hero principale - Render-blocking resources : CSS et JS non critiques qui bloquent le rendu initial
- TTFB lent : un serveur qui répond lentement impacte mécaniquement le LCP — utilisez un CDN et l'ISR/SSG de Next.js
CLS — Cumulative Layout Shift : la stabilité visuelle
Le CLS mesure l'instabilité visuelle de votre page — ces décalages agaçants où le contenu "saute" pendant le chargement, vous faisant cliquer sur le mauvais bouton. Seuil : ≤ 0,1 (bon).
Sources principales de CLS :
- Images sans dimensions : définissez systématiquement
widthetheightsur toutes vos balises<img> - Publicités et embeds : réservez un espace fixe avant leur chargement
- Polices web : utilisez
font-display: optionalouswapavec des polices de substitution similaires - Contenu injecté dynamiquement : évitez d'insérer du contenu au-dessus du contenu existant
INP — Interaction to Next Paint : la réactivité
L'INP a remplacé le FID en mars 2024. Il mesure la réactivité globale de votre page à toutes les interactions utilisateur (clics, touches, scroll). Seuil : ≤ 200ms (bon).
Optimisations clés :
- Découpage du JavaScript : divisez les tâches JS longues en morceaux <50ms avec
scheduler.postTask()ousetTimeout() - Éviter le JavaScript inutile : auditez votre bundle avec Webpack Bundle Analyzer — les librairies non utilisées pèsent lourd
- Web Workers : déportez les calculs lourds hors du thread principal
Outils de mesure : ne pas optimiser à l'aveugle
Mesurez vos CWV avec ces outils complémentaires :
- PageSpeed Insights : données réelles (CrUX) + données lab (Lighthouse) — point de départ obligatoire
- Google Search Console → rapport "Expérience de la page" : vue globale de vos URLs problématiques
- WebPageTest : analyse filmstrip pour identifier précisément l'élément LCP et ses dépendances
- Chrome DevTools Performance : diagnostic INP en conditions réelles
Next.js et Core Web Vitals : les optimisations natives à exploiter
Si votre site est construit avec Next.js (comme YC Web Impact le recommande pour les projets B2B premium), vous disposez d'optimisations natives particulièrement puissantes :
next/image: compression automatique, format WebP/AVIF, lazy loading natif, prévention du CLS via réservation d'espacenext/font: self-hosting automatique des polices Google, élimination des requêtes externes et du CLS typographique- App Router + React Server Components : réduction drastique du JavaScript client-side, amélioration mécanique de l'INP
- Streaming et Suspense : affichage progressif du contenu sans attendre les données lentes
Un site Next.js correctement configuré atteint des scores CWV dans le vert sur mobile et desktop avec un effort d'optimisation significativement inférieur à d'autres stacks.