Un site lent, c'est des visiteurs perdus et un référencement Google dégradé. Depuis que Google a intégré les Core Web Vitals dans son algorithme, la performance est devenue un critère SEO majeur. Voici comment l'améliorer concrètement.
Les Core Web Vitals : comprendre les métriques clés
Google mesure 3 métriques principales pour évaluer l'expérience utilisateur de ton site :
Largest Contentful Paint
Temps d'affichage du plus grand élément visible. Objectif : < 2,5s
First Input Delay
Réactivité au premier clic. Objectif : < 100ms
Cumulative Layout Shift
Stabilité visuelle. Objectif : < 0,1
Optimisation des images : le gain le plus rapide
Les images représentent en général 60 à 80% du poids d'une page. C'est là que tu as le plus à gagner.
- Format WebP ou AVIF : jusqu'à 30-50% plus légers que JPEG/PNG à qualité égale
- Lazy loading natif : les images en dehors du viewport ne chargent pas immédiatement
- Dimensions explicites : toujours définir width et height pour éviter le CLS
- CDN d'images : Cloudinary ou Imgix redimensionnent et optimisent à la volée
JavaScript : charger moins, charger mieux
Un JS mal chargé bloque le rendu de la page. Quelques règles simples :
- defer et async : ne jamais charger les scripts sans ces attributs sauf si essentiel
- Code splitting : ne charger que le JS nécessaire à la page en cours
- Tree shaking : supprimer le code mort grâce à des bundlers comme Vite ou Webpack
- Minimiser les dépendances : chaque librairie a un coût. Tu as vraiment besoin de Lodash pour juste un debounce ?
Compression et cache : les fondamentaux
Deux réglages à faire absolument côté serveur :
- Gzip ou Brotli : compresse les fichiers avant de les envoyer. Brotli est 15-20% plus efficace que Gzip sur du texte.
- Cache-Control : indique au navigateur combien de temps garder les ressources en cache. Les assets statiques (CSS, JS, images) peuvent être mis en cache pour 1 an.
Polices web : attention aux chargements bloquants
Les Google Fonts ajoutent souvent une requête réseau supplémentaire. Alternatives :
- Auto-héberger les polices sur ton serveur
- Utiliser
font-display: swappour ne pas bloquer le rendu - Précharger la police principale avec
<link rel="preload"> - Limiter les variantes : chaque poids (300, 400, 700…) est un fichier supplémentaire
Les outils pour mesurer
- PageSpeed Insights (Google) — analyse réelle + labo, gratuit
- WebPageTest — analyse détaillée avec waterfall
- Lighthouse — dans les DevTools Chrome, analyse locale
- GTmetrix — vue synthétique avec historique
Tu veux un site rapide dès le départ ?
Project Delta intègre les bonnes pratiques de performance dès la conception de ton site. Score Lighthouse 90+ garanti.
Obtenir un devis gratuit