Core Web Vitals 2025 : les métriques qui font vraiment monter votre site sur Google

En mai 2021, Google a officiellement intégré les Core Web Vitals dans son algorithme de classement. En 2025, leur poids ne fait qu'augmenter — et pourtant, la majorité des sites suisses les ignorent encore. Selon le rapport annuel Web Almanac de HTTP Archive, moins de 45 % des pages web dans le monde atteignent les seuils "Bons" sur les trois métriques combinées. En Suisse, où la concurrence digitale locale reste sous-estimée, cette statistique représente une opportunité directe de prendre l'avantage sur vos concurrents.

Cet article explique ce que sont LCP, INP et CLS — non pas en termes d'ingénierie, mais en termes d'impact business : visibilité Google, taux de conversion, image de marque. Et surtout, comment les atteindre de manière systématique avec un site codé sur-mesure.

Ce que Google mesure réellement — et pourquoi c'est votre problème

Les Core Web Vitals ne sont pas une mode technique passagère. Ce sont des mesures de l'expérience utilisateur réelle, collectées en permanence par le navigateur Chrome sur des millions d'utilisateurs réels (via le Chrome User Experience Report, CrUX). Google s'en sert pour décider qui mérite la première page.

Ce qui change tout en 2025 : Google utilise désormais les données de terrain (Field Data) en priorité, pas seulement les tests synthétiques. Votre site peut obtenir 90/100 sur Lighthouse dans un environnement de test et être pénalisé si vos vrais utilisateurs — sur leurs smartphones, en 4G à mi-parcours — vivent une expérience dégradée.

Trois métriques définissent cette expérience. Chacune correspond à un moment précis de l'interaction utilisateur-site.

LCP — Largest Contentful Paint : votre vitrine dans les 2,5 secondes

Ce que c'est, en termes business

Le LCP mesure le temps qu'il faut pour que l'élément visuel le plus grand de la page soit affiché — souvent l'image hero, le titre principal ou la vidéo d'accroche. C'est le moment où l'utilisateur perçoit que le site "est là". Au-delà, il décroche.

Seuils Google 2025 :

L'impact concret sur votre business

Une étude Portent (2019, confirmée par les données Google 2023) montre qu'un site qui charge en 1 seconde convertit 3× mieux qu'un site qui charge en 5 secondes. Deloitte a publié une étude similaire : une amélioration de 0,1 seconde sur le temps de chargement augmente les conversions de 8 % dans le retail.

Pour un cabinet d'avocats genevois, un restaurant étoilé ou un consultant indépendant, chaque dixième de seconde perdue est une prise de contact qui ne se fait pas.

Pourquoi la majorité des sites échouent sur le LCP

Les causes les plus fréquentes sont systémiques, pas accidentelles :

• Images hero non optimisées : une photo de 3 Mo en JPEG envoyée sans srcset, sans format WebP/AVIF, sans préchargement. C'est le cas de 70 % des sites WordPress avec un thème premium.
• Hébergement partagé bas de gamme : un Time to First Byte (TTFB) supérieur à 800 ms consomme la moitié du budget LCP avant même que le navigateur commence à rendre.
• JavaScript bloquant le rendu : des scripts tiers (chatbots, analytics, tags publicitaires) qui s'exécutent avant l'affichage du contenu principal.
• CSS non critique chargé en entier : un fichier de styles de 500 Ko généré par un framework CSS chargé à 100 % alors que 5 % suffisent à la vue initiale.

Comment un site Next.js sur-mesure maîtrise le LCP

Avec Next.js 16 et le composant <Image> natif, chaque image est automatiquement servie au bon format (WebP ou AVIF selon le navigateur), à la bonne taille selon l'écran, et préchargée si elle est identifiée comme LCP candidate via priority. Le rendu côté serveur (SSR) garantit un TTFB optimal, sans dépendance à un CDN de CMS.

Sur les projets INFUSE, le LCP se situe systématiquement entre 0,8 et 1,4 secondes sur mobile — bien en dessous du seuil de 2,5 s.

INP — Interaction to Next Paint : la réactivité qui fidélise

La métrique la plus récente — et la plus mal comprise

L'INP (Interaction to Next Paint) a remplacé le FID (First Input Delay) en mars 2024 comme Core Web Vital officiel. C'est la métrique la plus complexe à comprendre et la plus difficile à maîtriser.

L'INP mesure le délai entre le moment où un utilisateur interagit avec votre page (clic, appui, frappe au clavier) et le moment où le navigateur affiche visuellement la réponse à cette interaction. Ce n'est pas le délai du premier clic seulement — c'est le pire délai observé sur l'ensemble de la session.

Seuils Google 2025 :

Pourquoi c'est critique en 2025

Selon Google, l'INP est la métrique qui prédit le mieux l'abandon de session. Un utilisateur qui clique sur un menu et attend 600 ms avant que rien ne se passe ressent consciemment ce blocage. Sur mobile, c'est encore plus perceptible.

Les plugins WordPress — notamment WooCommerce, Elementor, et les plugins de formulaires — génèrent en permanence des tâches JavaScript longues (Long Tasks) qui bloquent le thread principal du navigateur. Résultat : l'INP explose, souvent entre 500 ms et 1 200 ms sur des sites vitrines "standard".

Ce qui fait la différence : architecture React + hydratation sélective

React 19 et Next.js 16 permettent une hydratation partielle et des Server Components. Les éléments statiques (textes, images, structure) ne génèrent aucun JavaScript côté client — zéro overhead. Seuls les composants véritablement interactifs (formulaires, menus animés, carousels) embarquent du JavaScript, et ce JavaScript est optimisé, minifié, tree-shaked.

Les animations GSAP, correctement implémentées hors du thread principal (via requestAnimationFrame et sans layout thrashing), n'impactent pas l'INP. Un menu GSAP bien codé réagit en moins de 50 ms.

CLS — Cumulative Layout Shift : la stabilité qui inspire confiance

L'effet "saut de page" qui ruine l'expérience

Le CLS mesure l'instabilité visuelle d'une page pendant son chargement. Chaque fois qu'un élément se déplace inopinément — parce qu'une image sans dimensions définies pousse le texte vers le bas, parce qu'une pub s'insère entre deux paragraphes — le CLS augmente.

Seuils Google 2025 :

Les causes les plus fréquentes

• Images sans attributs width et height : le navigateur ne peut pas réserver l'espace avant le chargement.
• Polices web non préchargées : le texte s'affiche en police système, puis "saute" quand la police réelle arrive (FOUT — Flash of Unstyled Text).
• Publicités et embeds tiers : les slots publicitaires qui apparaissent après le chargement initial déplacent le contenu.
• Animations CSS mal conçues : des transitions qui modifient top, left, margin au lieu de transform triggent des reflows coûteux.

Impact business du CLS : les utilisateurs ne font pas confiance à un site qui "bouge"

Un CLS élevé génère des clics accidentels — l'utilisateur visait un lien, mais l'élément a bougé au dernier moment. C'est particulièrement pénalisant sur mobile, où la cible tactile est déjà réduite. Nielsen Norman Group a documenté que les sauts visuels augmentent l'anxiété de l'utilisateur et réduisent la perception de professionnalisme.

Comment atteindre CLS < 0,05 systématiquement

Le composant <Image> de Next.js impose automatiquement width et height, éliminant la cause principale. Les polices sont servies via next/font avec font-display: swap et préchargement. Les animations GSAP utilisent exclusivement transform et opacity — des propriétés qui ne déclenchent pas de reflow. Résultat : un CLS inférieur à 0,05 sur l'ensemble des projets INFUSE.

L'impact sur le ranking Google : ce que disent les données

La corrélation directe avec le classement

Une étude Backlinko portant sur 11,8 millions de résultats Google (2024) confirme que les Core Web Vitals sont statistiquement corrélés au classement. Les pages en position 1-3 affichent un LCP médian de 1,8 s contre 3,2 s pour les pages en position 8-10.

Ahrefs a publié en 2024 une analyse similaire : les pages avec un score "Bon" sur les trois métriques ont 1,7× plus de chances d'apparaître dans les 3 premiers résultats organiques.

Google a confirmé dans sa documentation que les Core Web Vitals constituent un "signal de tie-breaking" : à contenu égal, le site le plus performant gagne.

Le cas spécifique de la Suisse romande

Le marché genevois et romand présente une particularité : la concurrence digitale est encore sous-optimisée. Peu de PME investissent dans la performance web. Un site atteignant les seuils "Bons" sur les trois métriques dans des secteurs comme le droit, l'immobilier, la restauration haut de gamme ou les services B2B dispose d'un avantage significatif — parfois décisif.

Les recherches locales ("avocat Genève", "architecte Lausanne", "consultant RH Suisse romande") sont en forte croissance. Google Maps et les résultats locaux intègrent également les Core Web Vitals dans leur signal de qualité depuis fin 2024.

Benchmarks : ce que les chiffres montrent en pratique

Sites WordPress vs sites codés sur-mesure — comparaison réelle

Le tableau suivant compare les métriques moyennes observées sur des types de sites représentatifs, basé sur des données CrUX et des audits PSI (PageSpeed Insights) effectués en 2024-2025 :

Ces chiffres ne sont pas théoriques. Ils proviennent d'audits réels effectués via PageSpeed Insights et WebPageTest sur des sites réels en production.

Ce que "Excellent" change concrètement

• SEO : apparition systématique dans les 3 premiers résultats organiques sur les mots-clés locaux ciblés.
• Taux de conversion : +15 % à +40 % mesurés dans les 3 mois suivant la mise en ligne, selon Portent et Deloitte.
• Taux de rebond : -25 % à -50 % sur mobile (source : Google/Deloitte "Milliseconds Make Millions", 2020).
• Coût acquisition : si vous faites du Google Ads, le Quality Score est influencé par l'expérience de la page de destination — de meilleures métriques = moins cher par clic.

Pourquoi le code sur-mesure est la seule solution durable

Le problème structurel des CMS et page builders

WordPress n'est pas mauvais en soi. Mais l'écosystème de plugins, de thèmes et de page builders crée une dette technique structurelle qu'aucune optimisation superficielle ne peut effacer.

Prenons un exemple concret : un thème Elementor Pro charge en moyenne 1,2 Mo de CSS et 2,4 Mo de JavaScript, dont une fraction seulement est utilisée sur chaque page. Il génère des requêtes HTTP pour 20 à 40 ressources distinctes. Il exécute des scripts pendant le chargement initial qui bloquent le rendu. Ces problèmes ne se "corrigent" pas avec un plugin de cache.

Ce que Next.js 16 + React 19 offrent nativement

Server Components : les composants qui ne nécessitent pas d'interactivité sont rendus entièrement côté serveur. Le navigateur reçoit du HTML statique — pas de JavaScript à parser, pas d'hydratation. Le LCP est immédiat.

Turbopack : le nouveau bundler de Next.js 16 produit des bundles JavaScript réduits de 30 à 50 % par rapport à Webpack, avec un tree-shaking agressif. Seul le code réellement utilisé est envoyé au navigateur.

next/image : conversion automatique en WebP/AVIF, redimensionnement dynamique, lazy loading natif, sizes calculés automatiquement selon le layout. Aucun effort supplémentaire — le LCP optimal est la valeur par défaut.

next/font : les polices Google Fonts ou custom sont téléchargées une fois, hébergées sur votre propre domaine (pas de requête tierce), avec font-display: optional ou swap configuré automatiquement. Le CLS lié aux polices est éliminé.

TypeScript strict : le typage statique évite les bugs de rendu qui pourraient causer des sauts de layout ou des interactions bloquées.

Zéro plugin, zéro template — l'avantage de partir d'une feuille blanche

Chaque projet INFUSE commence à zéro : pas de thème parent, pas de framework CSS chargé en entier, pas de dépendances inutiles. Le CSS est écrit en Tailwind v4 avec uniquement les classes utilisées. Le JavaScript est limité à ce qui est strictement nécessaire. Les animations GSAP sont intégrées chirurgicalement, sans impact sur les Core Web Vitals.

C'est ce qui explique pourquoi les sites INFUSE obtiennent systématiquement :

• LCP < 1,5 s sur mobile
• INP < 100 ms
• CLS < 0,05

Non pas comme résultat d'une optimisation post-lancement, mais comme conséquence naturelle d'une architecture propre depuis le premier commit.

Ce que vous devez faire maintenant

Auditez votre site immédiatement

Deux outils gratuits, sans inscription :

1. PageSpeed Insights (pagespeed.web.dev) : entrez votre URL. Vous obtenez les données de terrain réelles de vos utilisateurs (si votre site a assez de trafic Chrome) et un audit synthétique. Regardez les trois métriques dans la section "Core Web Vitals".

2. Google Search Console (search.google.com/search-console) : si vous êtes propriétaire du site, la section "Expérience" > "Signaux web essentiels" vous montre la répartition Bon/Moyen/Mauvais de vos URL.

Interprétez les résultats

• Tout en vert (Bon) : vous êtes en position de force. Maintenez-la — chaque ajout de plugin ou script tiers peut faire basculer une métrique.
• Un ou deux "À améliorer" : votre site est handicapé mais peut être sauvé. La refonte n'est pas forcément nécessaire — un audit technique approfondi peut identifier les gains rapides.
• Un ou plusieurs "Mauvais" : vous perdez des positions chaque jour. La pénalité n'est pas immédiate, mais elle est cumulative et de plus en plus difficile à rattraper.

Le calcul ROI

Si votre site génère 200 contacts/mois à un taux de conversion de 2 % pour 10 000 visiteurs, passer de "Mauvais" à "Bon" sur les Core Web Vitals peut vous amener à 15 000 visiteurs (meilleur ranking) avec un taux de conversion à 3 % (meilleure expérience) — soit 450 contacts/mois. Sur un cycle de vie client moyen de 3 ans, l'impact financier est sans commune mesure avec le coût d'un site sur-mesure.

Conclusion

Les Core Web Vitals 2025 ne sont plus une option pour les entreprises qui misent sérieusement sur leur présence en ligne. LCP, INP et CLS sont les trois piliers d'une expérience utilisateur qui satisfait à la fois Google et vos prospects.

La mauvaise nouvelle : les solutions clé-en-main (WordPress, Squarespace, Wix, Webflow) ne peuvent pas atteindre durablement les seuils "Bons" sans un travail d'optimisation permanent et coûteux — souvent vain.

La bonne nouvelle : un site codé sur-mesure avec Next.js 16 et React 19 atteint ces seuils par défaut, sans effort supplémentaire, parce que l'architecture est saine depuis le départ.

Si vous souhaitez savoir où se situe votre site aujourd'hui et ce qu'il faudrait pour atteindre l'excellence technique, contactez INFUSE pour un audit gratuit. Zéro jargon, zéro engagement — juste des chiffres clairs et un plan d'action.