Introduction : la vitesse, c'est un classement
Tu as un site web. Il peut être hyper beau, bien écrit, optimisé SEO... mais s'il charge en 5 secondes, Google va te pénaliser dans le classement. Point.
Depuis 2021, les Core Web Vitals sont un facteur de classement officiel. En 2026, c'est devenu central. Si tu ignores ça, tu perds des positions et du trafic.
7 %
C'est le pourcentage de conversions perdues par seconde de latence supplémentaire. Un site qui charge en 5s au lieu de 2s = 21% de conversions en moins.
Mais voilà : les Core Web Vitals sont un concept un peu flou pour les entrepreneurs non-techniques. "LCP", "INP", "CLS"... c'est quoi ? Comment mesure-t-on ? Comment on les optimise ?
Aujourd'hui, je t'explique tout ça simplement, et je te donne les solutions concrètes.
Les 3 Core Web Vitals expliqués simplement
LCP = Largest Contentful Paint (Peinture du plus grand contenu)
En français simple : à quelle vitesse le contenu principal de ta page charge-t-il ?
Quand tu ouvres un site, tu vois d'abord du blanc. Puis peu à peu, les images, le texte, les trucs apparaissent. Le LCP, c'est le moment où le "truc le plus gros" (généralement l'image de héros ou le titre principal) s'affiche.
Le target idéal : 2.5 secondes ou moins.
Exemple concret : ton article de blog charge en 1.2 secondes (bon), ou 4 secondes (mauvais).
Le LCP est généralement l'élément visuel le plus important au-dessus de la ligne de flottaison. Optimise d'abord cet élément : compresse son image, utilise WebP, lazy-load le reste. C'est l'impact maximal pour l'effort minimal.
INP = Interaction to Next Paint (Interactivité)
En français simple : à quelle vitesse ton site répond quand tu cliques, tapes, ou fais une action ?
Après avoir cliqué sur un bouton, il y a un délai avant que quelque chose se passe. INP mesure ce délai.
Le target idéal : 200 millisecondes ou moins.
Exemple concret : tu cliques sur "Ajouter au panier" et la page s'actualise en 150ms (bon) ou 800ms (mauvais).
CLS = Cumulative Layout Shift (Décalage de mise en page)
En français simple : est-ce que ta page "bouge" pendant qu'elle charge ?
Imagine : tu lis du texte, puis d'un coup une pub s'insère au-dessus, le texte descend, et tu perds ta place. Frustrant, non ? C'est le CLS.
Le target idéal : 0.1 ou moins.
Exemple concret : le contenu de ta page ne bouge pas (0.02 CLS, bon), ou tout se décale constamment (0.5 CLS, mauvais).
Ne pas déclarer les dimensions des images en HTML. Quand l'image charge, elle "pousse" le contenu vers le bas. Toujours ajouter width et height sur tes balises img. C'est la cause #1 de CLS élevé.
Pourquoi ça compte tant ?
Google classement
C'est un facteur officiel. Deux pages avec le même contenu : celle qui charge vite sera mieux classée.
Conversion
Un site lent = les gens s'en vont. Une étude montrait que chaque seconde de latence = 7% de conversion perdue.
Mobile
Sur mobile, la vitesse est encore plus critique. Google classe d'abord sur l'expérience mobile.
Comment mesurer tes Core Web Vitals
PageSpeed Insights (gratuit, officiel Google)
Va sur pagespeedinsights.web.dev, colle ton URL. En 10 secondes, tu vois :
- LCP, INP, CLS (les chiffres exacts)
- Si tu es dans le vert (bon), l'orange (moyen), ou le rouge (mauvais)
- Des suggestions d'optimisation
Google Search Console (gratuit, pour ton site entier)
Si tu as un compte Google Search Console, tu vois l'historique de tes Core Web Vitals sur des mois.
Web Vitals Chrome Extension (gratuit, en temps réel)
Installe l'extension dans Chrome et vois les Core Web Vitals en direct quand tu navigues.
Lighthouse (gratuit, intégré dans Chrome)
Ouvre DevTools (F12), clique sur "Lighthouse", lance un audit. Ça te donne un score global + détails.
Solutions pour optimiser LCP (le plus important)
Problème 1 : Trop grosse image de héros
Solution : compresse et optimise tes images. Une image de 5MB au lieu de 100KB, ça change tout.
- Utilise TinyPNG ou ImageOptim
- Utilise des formats modernes (WebP au lieu de JPG)
- Redimensionne tes images à la taille d'affichage (pas besoin d'une image 5000x3000 si tu l'affiches en 800x600)
Problème 2 : Trop de JavaScript qui ralentit
Solution : charge ton JS de façon "lazy" (c'est à dire, plus tard, pas au démarrage).
- Ajoute l'attribut
deferaux scripts non-critiques - Utilise
asyncpour les trucs qui peuvent attendre
Problème 3 : Le serveur répond lentement (TTFB - Time to First Byte)
Solution :
- Upgrade ton hébergement (un shared hosting, c'est lent)
- Utilise un CDN (CloudFlare, Fastly) pour servir tes contenus statiques depuis des serveurs proches des utilisateurs
- Cache tes pages (avec un plugin de cache si tu es sur WordPress)
Solutions pour optimiser INP (Interactivité)
Problème 1 : Du JavaScript bloquant long
Solution : divise ton JS en chunks plus petits. Un bloc de 500ms transformé en 5 blocs de 100ms, c'est beaucoup mieux.
Problème 2 : Trop de traitement au clic
Solution : simplifie tes interactions. Si cliquer sur un bouton déclenche 10 opérations, c'est trop. Fais juste ce qui est nécessaire immédiatement.
Problème 3 : Librairies JavaScript trop lourdes
Solution : utilise des librairies plus légères, ou réduis le nombre de librairies.
Solutions pour optimiser CLS (Décalage)
Problème 1 : Des images sans dimensions définies
Solution : toujours déclarer la hauteur et la largeur de tes images en HTML. Ça réserve l'espace avant le chargement.
<img src="photo.jpg" width="800" height="600" alt="...">
Problème 2 : Du contenu qui se charge après (ads, embeds)
Solution : réserve de l'espace pour ce contenu dynamique aussi.
Problème 3 : Des polices qui changent
Solution : utilise font-display: swap pour afficher du texte avec une police de secours pendant que ta police custom charge. Ça évite que le texte ne disparaisse ou ne saute.
Priorités : par où commencer ?
- Semaine 1 : Mesure tes Core Web Vitals avec PageSpeed Insights. Note les chiffres.
- Semaine 2 : Optimise LCP (c'est le plus impactant). Compresse tes images, charge ton JS en defer.
- Semaine 3 : Optimise CLS. Ajoute les dimensions à tes images, réserve de l'espace pour les contenus dynamiques.
- Semaine 4 : Optimise INP. Réduis la complexité de tes interactions.
- Semaine 5 : Re-mesure. As-tu amélioré ?
Les outils pour l'optimisation
Cloudflare (gratuit, très bon)
Utilise Cloudflare en tant que CDN et pour le caching. Ça va améliorer ton LCP et INP en 5 minutes.
WordPress : WP Rocket ou LiteSpeed Cache
Si tu es sur WordPress, ces plugins font automatiquement une bonne partie du travail.
Vercel ou Netlify (pour du statique/Next.js)
Si tu es sur du moderne, ces plateformes optimisent tes Core Web Vitals par défaut.
Liens vers tes services
Si tu veux vraiment optimiser ton site pour la performance, tu peux explorer notre service de performance et Web Vitals ou faire un audit complet Lighthouse. On va te donner le plan exact pour atteindre les scores de rêve.
Conclusion : tu peux le faire
Les Core Web Vitals ne sont pas une magie compliquée. LCP = charge vite. INP = répond vite. CLS = ne bouge pas. Trois choses simples.
Et les solutions sont aussi simples : compresse tes images, charge ton JS de façon intelligente, réserve de l'espace pour le contenu dynamique.
En 1 mois, tu peux passer d'un site "lent" à un site "rapide". Et ce sera directement visible dans tes rankings Google et ta conversion.
Commence dès aujourd'hui. Mesure sur PageSpeed Insights, optimise une chose à la fois, re-mesure. C'est ça qui compte.