5.1Optimisation des performances & vitesse
L'essentiel en 30 secondes
- La vitesse est un enjeu majeur : un site lent fait fuir et nuit au référencement.
- Levier n°1 : les images — les compresser et les dimensionner correctement.
- Compléter par : cache, hébergement de qualité, thème léger, options d'optimisation d'Elementor.
Mini-cas filé — Nadia accélère le site
Avant de livrer, Nadia teste la vitesse du site du menuisier : lent, surtout sur mobile. Les photos d'atelier font plusieurs Mo chacune. Elle les compresse, installe un plugin de cache, active les options de performance d'Elementor. Le site passe de « poussif » à « rapide » — et les visiteurs restent.
Début du niveau 5 — préparer un site prêt à livrer.
1. Les images, levier n°1
La performance (vitesse de chargement) est un enjeu majeur : un site lent fait fuir les visiteurs et pénalise le référencement. Les images sont souvent la première cause de lenteur : on les compresse, on les dimensionne à la taille d'affichage, et on utilise un format moderne (WebP) quand c'est possible.
Nadia réduit ses photos d'atelier de plusieurs Mo à quelques centaines de Ko : le gain est immédiat.
2. Cache, hébergement, Elementor
Autres leviers : un plugin de cache (mise en cache des pages, minification CSS/JS, chargement optimisé) ; un hébergement de qualité (ressources, PHP récent) ; un thème léger (Hello Elementor) ; et les options d'optimisation d'Elementor (conteneurs Flexbox plus légers que sections/colonnes, chargement optimisé des polices/icônes).
Repère : les Core Web Vitals (indicateurs de Google) mesurent la vitesse ressentie. Nadia teste avec un outil de mesure avant/après et vise le vert.
🔎 Exemple concret — Accélérer avant de livrer (cas Nadia)
Mesure initiale : lent (mobile).
1. Compresser les photos (Mo → centaines de Ko, WebP).
2. Installer un plugin de cache (minification, cache pages).
3. Thème léger (Hello Elementor) + conteneurs Flexbox.
4. Mesurer à nouveau : Core Web Vitals au vert.Résultat : un site nettement plus rapide.
Leçon : images d'abord, puis cache et options.
Vocabulaire de la section
- Performance (vitesse)
- La rapidité de chargement du site — enjeu majeur pour l'expérience et le SEO.
Exemple simple : un site rapide retient les visiteurs.
Ce que ce n'est pas : juger « assez rapide » sans mesurer.
Réflexe : mesurer la vitesse, surtout sur mobile.
- Optimiser les images (levier n°1)
- Compresser et dimensionner les images (WebP) : première cause de lenteur.
Exemple simple : photos réduites de Mo à centaines de Ko.
Ce que ce n'est pas : téléverser des photos brutes de plusieurs Mo.
Réflexe : toujours compresser avant d'insérer.
- Cache & optimisation
- Mise en cache des pages, minification CSS/JS, chargement optimisé (plugin de cache).
Exemple simple : un plugin de cache accélère le rendu.
Ce que ce n'est pas : aucune mise en cache sur un site public.
Réflexe : un plugin de cache sur un site en prod.
- Hébergement & thème léger
- Un hébergement de qualité (PHP récent) et un thème minimal (Hello Elementor).
Exemple simple : thème léger + bon hébergement = base saine.
Ce que ce n'est pas : thème multi-usage lourd + hébergement limité.
Réflexe : base légère dès le départ.
- Core Web Vitals
- Les indicateurs de vitesse ressentie (Google), à viser au vert.
Exemple simple : mesurer avant/après optimisation.
Ce que ce n'est pas : ignorer la mesure et livrer « au feeling ».
Réflexe : mesurer, optimiser, re-mesurer.
En pratique — Optimiser la vitesse d'un site
- Mesurez la vitesse (outil de Core Web Vitals), surtout sur mobile.
- Compressez et dimensionnez les images (format WebP si possible).
- Installez un plugin de cache (minification, mise en cache).
- Vérifiez le thème léger et les options Elementor, puis re-mesurez.
Script prêt à dire — valoriser la vitesse au client (20 s)
« J'ai optimisé la vitesse de votre site, surtout sur mobile où la plupart de vos clients vous consultent. En compressant les photos et en activant la mise en cache, les pages se chargent beaucoup plus vite — ce qui retient les visiteurs et aide votre référencement. »
Relier vitesse → rétention → référencement → business.
Modèle copier-coller — check performance
MESURE INITIALE (mobile) : _______________
IMAGES COMPRESSÉES / WEBP / DIMENSIONNÉES : oui / non
CACHE INSTALLÉ (minification) : oui / non
THÈME LÉGER + HÉBERGEMENT OK : oui / non
CORE WEB VITALS APRÈS (vert ?) : _______________Beaucoup d'images
Priorité absolue à la compression et au bon format (WebP).
Hébergement modeste
Cache + thème léger + PHP récent compensent en partie.
Mobile
Mesurer d'abord sur mobile : c'est là que la lenteur pénalise le plus.
Avant livraison
Toujours re-mesurer après optimisation, viser le vert.
✓ Bonnes pratiques
- Compresser les images en priorité.
- Installer un plugin de cache en production.
- Mesurer avant/après (Core Web Vitals).
✗ Pièges fréquents
- Téléverser des images lourdes non compressées.
- Oublier le cache sur un site public.
- Juger la vitesse « au feeling » sans mesurer.
Points clés à retenir
- La vitesse est un enjeu business et SEO.
- Images = levier n°1 (compresser, WebP).
- Cache + hébergement + thème léger + options Elementor.
- Mesurer les Core Web Vitals, viser le vert.
Défi 48h — appliquez demain
Mesurez la vitesse d'une page sur mobile, compressez ses images (WebP), activez un cache, puis re-mesurez. Notez le gain. 30 minutes.
- Je compresse et dimensionne mes images.
- J'active un cache en production.
- Je mesure les Core Web Vitals avant/après.
Questions fréquentes
Quelle est la première chose à optimiser ?
Les images : souvent la principale cause de lenteur. Compressez-les, dimensionnez-les à la taille d'affichage et utilisez le format WebP quand c'est possible.
Qu'est-ce que les Core Web Vitals ?
Des indicateurs de Google mesurant la vitesse et la stabilité ressenties d'une page. On vise le « vert » et on mesure avant/après optimisation.
Un plugin de cache suffit-il ?
Il aide beaucoup (mise en cache, minification), mais se combine avec des images optimisées, un hébergement correct et un thème léger pour un résultat durable.
Le site du menuisier est lent sur mobile, avec des photos de plusieurs Mo. Par quoi commencer ?