Comment configurer un CDN pour WordPress

Qu’est-ce qu’un CDN et pourquoi votre site en a besoin

Un CDN (Content Delivery Network) est un réseau de serveurs répartis dans le monde entier qui stockent des copies de vos fichiers statiques (images, CSS, JavaScript, polices). Quand un visiteur accède à votre site, les fichiers sont servis depuis le serveur le plus proche de lui, au lieu de traverser l’océan jusqu’à votre hébergeur en France ou aux États-Unis.

L’impact concret au Sénégal

Si votre site est hébergé chez OVH (France), chaque requête fait un aller-retour Dakar → Paris → Dakar. Latence typique : 150-300ms par requête. Avec un CDN qui a un point de présence en Afrique de l’Ouest (Cloudflare a des serveurs à Abidjan et Lagos), cette latence tombe à 20-50ms. Sur une page avec 30 fichiers à charger, ça fait une différence de plusieurs secondes.

Cloudflare : le CDN gratuit recommandé

Cloudflare est le CDN le plus utilisé au monde, et son plan gratuit est suffisant pour la majorité des sites WordPress. Il offre bien plus qu’un simple CDN : protection DDoS, SSL gratuit, pare-feu, et optimisation automatique.

Étape 1 : Créer votre compte Cloudflare

1. Inscrivez-vous sur cloudflare.com
2. Cliquez « Add a site »
3. Entrez votre nom de domaine (ex: monsite.com)
4. Choisissez le plan « Free »

Étape 2 : Scanner les DNS

Cloudflare scanne automatiquement vos enregistrements DNS actuels et les importe. Vérifiez que tous vos enregistrements sont présents :

• A record : Pointe vers l’IP de votre serveur
• CNAME www : Pointe vers votre domaine principal
• MX records : Pour vos emails (ne les passez PAS par Cloudflare)
• TXT records : SPF, DKIM pour les emails

Important : Les enregistrements avec le nuage orange passent par Cloudflare (CDN + protection). Les enregistrements avec le nuage gris sont en DNS uniquement. Mettez A et CNAME en orange, MX et les sous-domaines email en gris.

Étape 3 : Changer les nameservers

Cloudflare vous donne 2 nameservers (ex: elsa.ns.cloudflare.com et tom.ns.cloudflare.com). Changez-les chez votre registrar (l’endroit où vous avez acheté votre domaine) :

1. Connectez-vous chez votre registrar (OVH, GoDaddy, Namecheap, etc.)
2. Trouvez la section « Nameservers » ou « DNS »
3. Remplacez les nameservers actuels par ceux de Cloudflare
4. La propagation prend 15 min à 24h (généralement 1-2h)

Retournez sur Cloudflare et cliquez « Check nameservers ». Une fois validé, votre site passe par Cloudflare.

Étape 4 : Configuration optimale pour WordPress

SSL/TLS

1. Cloudflare → SSL/TLS → Overview
2. Mode : « Full (strict) » si votre hébergeur a un certificat SSL. Sinon, « Full »
3. Edge Certificates → « Always Use HTTPS » : ON
4. Edge Certificates → « Automatic HTTPS Rewrites » : ON

Vitesse

1. Speed → Optimization → Content Optimization :
   • Auto Minify : cochez HTML, CSS, JavaScript
   • Brotli : ON (compression meilleure que gzip)
2. Speed → Optimization → Image Optimization :
   • Polish : Lossy (plan Pro) — compresse les images à la volée
   • WebP : ON (plan Pro) — convertit automatiquement en WebP

Cache

1. Caching → Configuration :
   • Caching Level : Standard
   • Browser Cache TTL : 1 month
2. Caching → Tiered Cache → Enable (gratuit, améliore le hit rate)

Règles de page (Page Rules)

Créez ces 3 règles (3 gratuites disponibles) :

Règle 1 : Admin WordPress - pas de cache
URL : monsite.com/wp-admin/*
Paramètres : Cache Level = Bypass, Security Level = High

Règle 2 : Fichiers statiques - cache agressif
URL : monsite.com/wp-content/*
Paramètres : Cache Level = Cache Everything, Edge Cache TTL = 1 month, Browser Cache TTL = 1 year

Règle 3 : Page de connexion
URL : monsite.com/wp-login.php*
Paramètres : Cache Level = Bypass, Security Level = High

Étape 5 : Plugin WordPress Cloudflare

1. Extensions → Ajouter → « Cloudflare » → Installer et Activer
2. Réglages → Cloudflare → Connectez avec votre token API
3. Le plugin purge automatiquement le cache Cloudflare quand vous publiez ou modifiez un article
4. Activez « Automatic Platform Optimization » (APO) si disponible — ça cache les pages HTML entières sur le réseau Cloudflare (plan gratuit si activé via le plugin WordPress)

Alternative : BunnyCDN

BunnyCDN est un CDN premium abordable, excellent si vous voulez un CDN spécifique sans les fonctionnalités DNS/firewall de Cloudflare.

Pourquoi BunnyCDN

• Prix : À partir de 0.01$/Go. Pour un site avec 10 Go de trafic/mois, ça revient à 0.10$/mois
• Points de présence en Afrique : Johannesburg et bientôt d’autres villes africaines
• Perma-Cache : Les fichiers restent en cache indéfiniment (pas de purge automatique)
• Optimisation d’images : Bunny Optimizer convertit en WebP et resize à la volée

Configuration avec WordPress

1. Créez un compte sur bunny.net
2. Créez un « Pull Zone » avec votre domaine comme origine
3. Configurez un sous-domaine : cdn.monsite.com avec un CNAME vers votre Pull Zone
4. Installez le plugin BunnyCDN ou utilisez votre plugin de cache (LiteSpeed Cache, W3 Total Cache) pour configurer l’URL CDN

Configuration dans W3 Total Cache

Performance → CDN :
- CDN Type : Generic Mirror
- CDN URL : cdn.monsite.com
- Cochez : Host wp-content, Host wp-includes, Host theme files, Host custom files

Configuration dans LiteSpeed Cache

LiteSpeed Cache → CDN :
- QUIC.cloud CDN : ON (CDN gratuit intégré si serveur LiteSpeed)
- OU
- CDN URL : cdn.monsite.com
- Use CDN Mapping : ON

Vérifier que le CDN fonctionne

Test avec les DevTools Chrome

1. Ouvrez votre site dans Chrome
2. F12 → onglet Network
3. Rechargez la page
4. Cliquez sur un fichier CSS ou une image
5. Dans les headers de réponse, cherchez :
   • Cloudflare : cf-cache-status: HIT (le fichier est servi depuis le cache Cloudflare)
   • BunnyCDN : CDN-Cache: HIT
   • cf-ray avec le code de la ville (ex: DKR pour Dakar)

Si vous voyez HIT, le fichier est bien servi depuis le CDN. MISS signifie que c’est la première requête et que le cache se remplit.

Test de vitesse

Comparez avant/après avec :

• GTmetrix : Choisissez un serveur de test (malheureusement pas de serveur en Afrique, mais Londres est le plus proche)
• Google PageSpeed Insights : Score mobile et desktop
• WebPageTest : Choisissez un emplacement de test et comparez le TTFB

Ce que le CDN cache (et ne cache pas)

Fichiers cachés par le CDN

• Images (jpg, png, gif, webp, svg)
• CSS et JavaScript
• Polices (woff, woff2)
• Fichiers PDF, vidéo
• Favicons

Fichiers NON cachés (par défaut)

• Pages HTML dynamiques (chaque visiteur peut voir un contenu différent)
• Pages admin WordPress
• Requêtes AJAX
• Formulaires de connexion
• Pages panier/checkout WooCommerce

Cloudflare APO change cela en cachant aussi les pages HTML pour les visiteurs non connectés — c’est un gain de performance énorme.

Problèmes courants et solutions

Modifications non visibles après publication

Vos modifications n’apparaissent pas car le CDN sert l’ancienne version cachée.

Solution : Purgez le cache Cloudflare (Caching → Configuration → Purge Everything) ou purgez une URL spécifique. Le plugin Cloudflare le fait automatiquement à chaque publication.

Boucle de redirection HTTPS

Symptôme : « ERR_TOO_MANY_REDIRECTS ».

Cause : Cloudflare en mode SSL « Flexible » alors que votre site force HTTPS via .htaccess ou un plugin.

Solution : Passez Cloudflare en SSL « Full » ou « Full (strict) ».

Styles CSS cassés ou images manquantes

Cause : URL de contenu mixte (HTTP/HTTPS) ou mauvais URL CDN.

Solution : Activez « Automatic HTTPS Rewrites » dans Cloudflare. Vérifiez que les URLs dans la base de données sont en HTTPS avec wp search-replace 'http://monsite.com' 'https://monsite.com'.

Le CDN ne fonctionne pas dans certaines régions

Cause : Propagation DNS incomplète ou ISP local qui cache les anciens DNS.

Solution : Attendez 24-48h. Testez avec nslookup monsite.com ou dig monsite.com pour vérifier que les DNS pointent vers Cloudflare.

CDN + plugin de cache = combo optimal

Le CDN et le plugin de cache WordPress sont complémentaires :

• Plugin de cache (WP Super Cache, LiteSpeed Cache) : Génère les pages HTML statiques côté serveur. Réduit la charge PHP/MySQL
• CDN (Cloudflare) : Distribue ces fichiers depuis des serveurs proches du visiteur. Réduit la latence réseau

Utilisez les deux ensemble pour des performances optimales. La configuration recommandée :

1. Plugin de cache pour le page cache + browser cache + minification
2. Cloudflare pour le CDN + SSL + protection + optimisation réseau

Checklist CDN WordPress

• ☐ Cloudflare configuré avec nameservers changés
• ☐ SSL/TLS en mode « Full (strict) »
• ☐ Auto Minify activé (HTML, CSS, JS)
• ☐ Brotli activé
• ☐ Browser Cache TTL : 1 mois
• ☐ Page Rules configurées (bypass admin, cache static)
• ☐ Plugin Cloudflare installé pour la purge automatique
• ☐ Vérifié : cf-cache-status: HIT dans les DevTools
• ☐ TTFB vérifié avec PageSpeed Insights (objectif < 200ms)
• ☐ Pas de boucle de redirection HTTPS