1. Diagnostic initial — Mesurer avant d'agir

Avant toute optimisation, mesurez votre score actuel sur PageSpeed Insights (outils Google) et notez précisément les métriques Core Web Vitals :

  • LCP (Largest Contentful Paint) : chargement du plus grand élément visible. Cible : < 2,5 secondes.
  • FID / INP (Interaction to Next Paint) : réactivité aux interactions. Cible : < 200ms.
  • CLS (Cumulative Layout Shift) : stabilité visuelle. Cible : < 0.1.

Ces trois métriques sont désormais des facteurs de classement Google. Un score mobile 90+ est l'objectif réaliste pour un site WordPress bien configuré.

Astuce : Testez toujours en mode navigation privée et sur mobile. Google pondère le score mobile 2× plus que le score desktop dans ses algorithmes.

2. Optimiser les images — Le gain le plus rapide

Les images représentent en moyenne 60 à 80% du poids d'une page. C'est la première optimisation à faire.

Convertir en WebP / AVIF

Le format WebP offre une réduction de 25–35% du poids vs JPEG à qualité équivalente. L'AVIF va encore plus loin (-50%) mais son support navigateur est plus récent.

# Convertir un JPEG en WebP avec cwebp
cwebp -q 82 image.jpg -o image.webp

# Avec ImageMagick (conversion batch)
mogrify -format webp -quality 82 *.jpg

Lazy loading natif

Depuis WordPress 5.5, le lazy loading est activé automatiquement. Vérifiez que vos images ont bien l'attribut loading="lazy" — sauf l'image hero au-dessus de la ligne de flottaison qui doit avoir loading="eager" et un fetchpriority="high".

<!-- Image hero — chargement prioritaire -->
<img src="hero.webp" alt="..." loading="eager" fetchpriority="high" width="1200" height="630">

<!-- Images secondaires — lazy -->
<img src="section.webp" alt="..." loading="lazy" width="800" height="450">

Attributs width et height obligatoires

Spécifier les dimensions évite le Layout Shift (CLS). Sans ces attributs, le navigateur ne peut pas réserver l'espace avant le chargement.

3. Mise en cache — Servir vite le contenu répété

Il existe trois niveaux de cache à configurer sur WordPress :

  • Cache de page : génère des fichiers HTML statiques depuis vos pages dynamiques PHP.
  • Cache objet : mémorise les requêtes base de données avec Redis ou Memcached.
  • Cache navigateur : configure les en-têtes HTTP pour que le navigateur stocke les assets.
Attention : N'activez jamais le cache sur les pages panier WooCommerce, les pages compte client, ou les pages avec contenu personnalisé par utilisateur.

4. CSS et JavaScript — Éliminer le rendu bloquant

CSS critique inline

Le CSS nécessaire pour afficher la partie visible sans scroll (above-the-fold) doit être inline dans le <head> pour éviter un rendu bloquant.

<!-- CSS critique inline -->
<style>
  body { margin: 0; font-family: 'Inter', sans-serif; }
  .header { background: #070A12; }
</style>

<!-- CSS complet chargé en différé -->
<link rel="preload" href="/css/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/style.css"></noscript>

Defer et async pour JavaScript

<!-- Scripts non-critiques : defer -->
<script src="/js/main.js" defer></script>

<!-- Scripts indépendants : async -->
<script src="/js/analytics.js" async></script>

5. Optimisation serveur

Côté serveur, trois configurations font une grande différence :

  • GZIP / Brotli : compresse les fichiers texte (HTML, CSS, JS) à la volée. Gain moyen : 60–70% du poids transféré.
  • HTTP/2 ou HTTP/3 : permet le multiplexage des requêtes. Vérifiez que votre hébergeur le supporte (Infomaniak ✓).
  • CDN : distribue vos assets statiques depuis des serveurs proches géographiquement. Cloudflare Free suffit pour la plupart des projets.

6. Plugins WordPress recommandés

Ces plugins couvrent l'essentiel des optimisations sans configuration complexe :

  • WP Rocket (payant, ~50€/an) — Le plus complet : cache, minification, lazy load, preloading.
  • LiteSpeed Cache (gratuit si hébergeur LiteSpeed) — Performances excellentes, intégration serveur native.
  • Imagify ou ShortPixel — Compression et conversion WebP automatique des images.
  • Asset CleanUp — Désactive les CSS/JS inutiles page par page.
Règle d'or : N'installez jamais deux plugins de cache simultanément. Ils entrent en conflit et dégradent les performances au lieu de les améliorer.

7. Résultats attendus

Appliquées méthodiquement, ces optimisations permettent d'atteindre sur un WordPress standard :

  • Score PageSpeed mobile : 85–95 / 100
  • LCP : < 2 secondes
  • CLS : < 0.05
  • Time to First Byte (TTFB) : < 300ms

Ces améliorations ont un impact direct sur le SEO, le taux de rebond, et les conversions. Une page qui charge en 1 seconde convertit 3× mieux qu'une page qui met 5 secondes.