Optimiser la vitesse de son site : améliorer les Core Web Vitals

Aussi beau soit-il, un site lent fait fuir. Selon Google, 53 % des utilisateurs quittent un site qui met plus de 3 secondes à charger, et la vitesse est un facteur de classement direct. Ce guide explique clairement les Core Web Vitals et les techniques qui donnent de vrais résultats.

Que sont les Core Web Vitals ?

Trois indicateurs clés de l’expérience utilisateur introduits par Google en 2020 et intégrés au classement depuis 2021. Ils proviennent de données réelles d’utilisateurs, pas de tests en laboratoire.

1. LCP — Largest Contentful Paint

Temps d’affichage du plus grand élément visible (souvent une image d’en-tête ou un grand titre).

• Bon : 2,5 secondes ou moins
• À améliorer : 2,5–4 secondes
• Mauvais : plus de 4 secondes

Principaux facteurs : images lourdes, serveur lent et JavaScript/CSS bloquants.

2. INP — Interaction to Next Paint

Rapidité de réaction de la page aux interactions (clic, toucher, clavier). Remplace FID depuis 2024.

• Bon : 200 ms ou moins
• À améliorer : 200–500 ms
• Mauvais : plus de 500 ms

Longues tâches JavaScript, scripts tiers lourds et gestionnaires d’événements inefficaces le dégradent.

3. CLS — Cumulative Layout Shift

Mesure les « sauts » d’éléments pendant le chargement.

• Bon : 0,1 ou moins
• À améliorer : 0,1–0,25
• Mauvais : plus de 0,25

Images sans dimensions, contenus injectés et publicités tardives en sont les causes principales.

Où mesurer ?

Google PageSpeed Insights — données de laboratoire et réelles (CrUX), gratuit.

Google Search Console → rapport Core Web Vitals — expérience réelle par groupes d’URL.

WebPageTest — cascades, vidéos comparatives, tests multi-étapes.

Chrome DevTools → Lighthouse — mesures instantanées en local.

Améliorer le LCP

Formats d’image modernes

Passer de JPEG/PNG à WebP ou AVIF réduit souvent la taille de 30 à 50 %.

``html <picture> <source srcset="hero.avif" type="image/avif" /> <source srcset="hero.webp" type="image/webp" /> <img src="hero.jpg" alt="..." width="1280" height="720" /> </picture> ``

Avec Next.js, le composant <Image> le fait automatiquement.

Précharger l’image principale

``html <link rel="preload" as="image" href="/hero.webp" fetchpriority="high" /> ``

Réduire le temps de réponse serveur (TTFB)

• Génération statique (SSG) ou ISR plutôt qu’un rendu à chaque requête
• CDN pour servir le contenu au plus près
• VPS ou cloud si les ressources manquent

CSS critique en ligne

Intégrer les styles du haut de page dans le HTML raccourcit le rendu ; Critical ou Critters l’automatisent.

Améliorer l’INP : alléger le JavaScript

Découper les tâches longues

Au-delà de 50 ms, une tâche bloque l’interaction. Découpez avec setTimeout(..., 0) ou scheduler.yield() :

``javascript async function processLargeList(items) { for (let i = 0; i < items.length; i++) { process(items[i]); // Laisser respirer le thread principal tous les 50 éléments if (i % 50 === 0) await new Promise(r => setTimeout(r, 0)); } } ``

Supprimer les scripts tiers inutiles

Chats, régies publicitaires, analytics et boutons sociaux pèsent sur l’INP. Auditez régulièrement Google Tag Manager.

Découpage du code en React/Next.js

``javascript const HeavyComponent = dynamic(() => import('./HeavyComponent'), { ssr: false, loading: () => <div>Chargement…</div>, }); ``

Ramener le CLS à zéro

Dimensions sur toutes les images

``html <img src="product.jpg" alt="Image produit" width="800" height="600" /> ``

``css .hero-image { aspect-ratio: 16 / 9; width: 100%; } ``

Éviter FOUT/FOIT avec les polices

Utilisez font-display: optional ou swap et préchargez les polices :

``html <link rel="preload" href="/fonts/Brand.woff2" as="font" type="font/woff2" crossorigin /> ``

Des espaces réservés pour le contenu dynamique

``css .content-area { min-height: 120px; / réserve la place jusqu’au chargement / } ``

Optimisations automatiques avec Next.js

Avec un site Next.js, ces fonctions sont prêtes à l’emploi :

| Fonction | Apport | |---|---| | Composant <Image> | WebP/AVIF automatique, lazy loading, dimensions | | <Script strategy="lazyOnload"> | Diffère les scripts non critiques | | Génération statique (SSG) | Minimise le TTFB | | Optimisation des polices | Auto-hébergement, stratégie swap | | Découpage automatique | Chaque page charge seulement son JS |

Nous évoquons aussi ces gains dans notre article sur le prix d’un site d’entreprise.

Par où commencer ?

1. Optimiser les images — souvent 30 à 40 % de LCP en moins à elles seules.

2. Supprimer le JavaScript inutilisé — outil Coverage des Chrome DevTools.

3. Réduire les ressources bloquantes — async/defer ou CSS critique en ligne.

4. Revoir le serveur — hébergement mutualisé et TTFB au-delà de 800 ms : envisagez un changement.

5. Auditer les scripts tiers — section « Code tiers » de PageSpeed Insights.

Conclusion : la vitesse est une nécessité

Les Core Web Vitals sont désormais une base obligatoire pour le classement, la satisfaction et la conversion. Abordez-les comme un cycle continu de mesure et d’amélioration.

Envie de connaître l’état de vos Core Web Vitals ou d’une optimisation professionnelle ? Contactez-nous — nous proposons une pré-analyse gratuite.