Vitesse site web : optimiser en 30 minutes

Pourquoi la vitesse compte (vraiment)

La vitesse impacte tout :

• SEO : Google utilise les Core Web Vitals (vitesse, stabilité, interactivité) comme facteur de classement. Un site lent perd des positions.
• Taux de rebond : chaque seconde de chargement supplémentaire augmente le taux de rebond de 32% (données Google). Les gens n'attendent pas.
• Conversion : Amazon a calculé qu'une seconde de latence en plus leur coûtait 1,6 milliard de dollars par an. A ton échelle, l'effet est proportionnel.
• Expérience utilisateur : un site rapide donne une impression de qualité et de professionnalisme. Un site lent fait fuir.

Mesure avant d'optimiser

Avant de toucher quoi que ce soit, mesure la performance actuelle de ton site. Tu as besoin d'un point de référence.

Outils de mesure (tous gratuits) :

• Google PageSpeed Insights : le standard. Donne un score sur 100 pour mobile et desktop, plus des recommandations spécifiques.
• GTmetrix : plus détaillé sur le waterfall (l'ordre de chargement des ressources).
• Chrome DevTools : F12 → onglet "Performance" pour une analyse fine.

Les scores à viser :

• PageSpeed mobile : 85+ (90+ c'est excellent)
• LCP (Largest Contentful Paint) : moins de 2,5 secondes
• CLS (Cumulative Layout Shift) : moins de 0,1
• INP (Interaction to Next Paint) : moins de 200ms

Les quick wins (par ordre de priorité)

1. Les images (le plus gros gain, toujours)

Les images représentent 50 à 80% du poids d'une page web typique. C'est le premier levier à actionner.

• Format WebP : convertis toutes tes images en WebP (30% plus léger que JPEG à qualité égale). ShortPixel le fait automatiquement.
• Compression : compresse toutes les images. ShortPixel, Imagify ou Squoosh (outil en ligne gratuit de Google) font ça en un clic.
• Dimensions correctes : ne charge pas une image de 4000x3000 pixels pour l'afficher en 800x600. Redimensionne avant l'upload.
• Lazy loading : les images hors écran ne se chargent que quand le visiteur scrolle. WordPress le fait nativement depuis la version 5.5 (attribut loading="lazy").

2. Le cache

On en a parlé dans la section plugins. Un plugin de cache (LiteSpeed Cache, WP Rocket) crée des versions statiques de tes pages. Le gain est immédiat : les pages se chargent 2 à 5 fois plus vite pour les visiteurs récurrents.

3. Les polices

• Limite-toi à 2 polices maximum (une pour les titres, une pour le corps)
• Charge uniquement les graisses dont tu as besoin (Regular 400, Bold 700, pas les 12 variantes)
• Utilise font-display: swap pour éviter le flash de texte invisible
• Ajoute <link rel="preconnect"> vers Google Fonts dans ton header

4. Les plugins inutiles

Chaque plugin actif ajoute du code qui se charge sur chaque page. Désactive et supprime tout ce que tu n'utilises pas. Vérifie régulièrement.

5. Le code CSS/JS

Les plugins de cache comme WP Rocket peuvent minifier et combiner tes fichiers CSS et JavaScript. Active ces options (avec précaution : teste après chaque activation pour vérifier que rien ne casse).

Le rôle de l'hébergeur

Tu peux optimiser ton site autant que tu veux : si ton hébergeur est lent, ton site sera lent. Le TTFB (Time To First Byte) dépend de l'hébergeur, pas de toi. C'est le temps que met le serveur à répondre à la première requête.

TTFB cible : moins de 200ms. Si ton TTFB est au-dessus de 600ms, c'est probablement ton hébergeur qui est en cause. Dans ce cas, envisage de migrer (o2switch et Infomaniak ont d'excellents TTFB).

Checklist vitesse