Qu'est-ce qu'un CDN : définition, raisons de l'utiliser et connexion à WordPress
Un CDN (Content Delivery Network) est un réseau de diffusion de contenu qui stocke les fichiers du serveur d'origine sur des serveurs edge répartis dans plusieurs régions et répond depuis le serveur le plus proche du visiteur. Pour voir si les serveurs edge répondent depuis le cache, nous avons vérifié les en-têtes de réponse d'un service public de diffusion de bibliothèques comme jsDelivr : le fichier jQuery était servi depuis une copie en cache. Nous avons comparé les deux façons de connecter WordPress, la réécriture des URL de fichiers et le proxy DNS, d'après la documentation officielle.
1️⃣ Définition du CDN : serveurs edge et serveur d'origine
Un POP (Point of Presence) désigne le centre de données qui héberge des serveurs edge, et la requête du visiteur est acheminée vers le POP le plus proche.
Le serveur edge qui reçoit une requête répond tout de suite s'il a le fichier en stock ; sinon, il récupère le fichier sur le serveur d'origine, répond et le stocke sur le serveur edge. CloudFront, le CDN d'AWS, commence à transmettre au visiteur dès que le premier octet arrive du serveur d'origine (d'après la documentation officielle d'AWS).

Les serveurs edge ne stockent que les fichiers demandés par les visiteurs : même pour un même fichier, la première requête sur chaque serveur edge remonte donc jusqu'au serveur d'origine.
Récupérer ainsi les fichiers à l'arrivée d'une requête s'appelle la méthode pull ; il existe aussi la méthode push, qui consiste à téléverser les fichiers sur le CDN à l'avance.
2️⃣ Pourquoi utiliser un CDN : distance et charge du serveur d'origine
Plus le visiteur et le serveur sont éloignés, plus le temps aller-retour (RTT) de chaque requête s'allonge. L'ouverture d'une page déclenche, en plus du HTML, des requêtes d'images, de CSS et de JavaScript : si un serveur edge proche répond, le temps aller-retour diminue pour chaque requête.
Les requêtes auxquelles répond un serveur edge n'atteignent pas le serveur d'origine, ce qui réduit aussi l'utilisation du processeur et le volume de transfert (bande passante) du serveur d'origine. Si vous connectez le DNS via le proxy Cloudflare, l'IP du serveur d'origine n'est pas exposée et les attaques DDoS sont d'abord bloquées par le CDN (d'après la documentation officielle de Cloudflare).
Pour un site dont les visiteurs se trouvent dans la même région que le serveur d'origine, le gain lié à la distance est faible. Sur ce type de site, le principal avantage du CDN est moins la réduction du temps de réponse que l'allègement de la charge du serveur d'origine et l'économie de transfert.
3️⃣ Fichiers mis en cache : fichiers statiques et HTML
Par défaut, Cloudflare ne met en cache que les fichiers statiques comme les images, le CSS et le JavaScript, identifiés par leur extension (d'après la documentation officielle de Cloudflare). Le HTML des pages et le JSON sont exclus du cache par défaut : c'est donc toujours le serveur d'origine qui y répond, même après la connexion à Cloudflare.
Pour mettre aussi le HTML en cache, vous devez créer une règle de cache distincte sur le CDN. Excluez alors de la règle les pages dont le contenu varie selon la personne, comme celles des utilisateurs connectés ou le panier, afin d'éviter que l'écran d'un autre visiteur s'affiche.
4️⃣ Connexion à WordPress : réécriture des URL de fichiers et proxy DNS
Pour connecter un CDN à WordPress, vous remplacez uniquement les URL des fichiers statiques par celles du CDN, ou vous configurez le DNS du domaine sur le proxy du CDN pour que toutes les requêtes passent par le CDN.
| (fonctionnement) | Point de connexion | Requêtes passant par le CDN | IP du serveur d'origine |
|---|---|---|---|
| Réécriture des URL de fichiers | Saisir l'adresse du CDN (CNAME) dans les réglages CDN de l'extension de cache | Fichiers statiques comme les images, le CSS et le JavaScript | Reste publique |
| Proxy DNS | Relier les enregistrements DNS du domaine au proxy du CDN | Toutes les requêtes HTTP et HTTPS du site | Masquée derrière le CDN |
Avec la réécriture des URL de fichiers, vous saisissez dans les réglages CDN d'une extension de cache comme WP Rocket l'adresse (CNAME) fournie par le fournisseur du CDN. Une fois saisie, les URL des images, du CSS et du JavaScript dans le HTML de la page sont remplacées par celles du CDN (d'après la documentation officielle de WP Rocket). Le HTML reste servi par le serveur d'origine.

Avec la méthode du proxy DNS, le DNS du domaine est géré par le fournisseur du CDN. Cloudflare propose aussi une connexion du proxy sans déplacer les serveurs de noms, en ajoutant seulement des enregistrements CNAME chez votre fournisseur DNS actuel. Cette méthode n'est disponible qu'à partir de l'offre Business (d'après la documentation officielle de Cloudflare).
5️⃣ Vérifier les succès de cache : les en-têtes cf-cache-status et age
Pour savoir si le CDN a servi un fichier depuis le cache, on regarde les en-têtes de réponse. Voici la commande avec laquelle nous avons vérifié les en-têtes de réponse du fichier jQuery distribué par jsDelivr, et son résultat.
curl -sI https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js | grep -iE "^(cache-control|cf-cache-status|age|server):"cache-control: public, max-age=31536000, s-maxage=31536000, immutable
age: 45920
cf-cache-status: HIT
server: cloudflare[server: cloudflare] indique que cette réponse a été envoyée par un serveur edge de Cloudflare, et [cf-cache-status: HIT], ajouté par Cloudflare, signifie qu'elle provient du cache. [age: 45920] indique que ce fichier est en cache depuis environ 12 heures et 45 minutes. [max-age=31536000] est l'instruction du serveur d'origine autorisant le stockage pendant 1 an.
Pour voir jusqu'où va la requête quand la valeur est [MISS], [DYNAMIC] ou [BYPASS] au lieu de [HIT], cliquez sur les boutons de valeur dans le diagramme ci-dessous.
cf-cache-status: HITcf-cache-status: MISScf-cache-status: DYNAMICcf-cache-status: BYPASSCache-Control: no-store ou private🔢 FAQ & contenus recommandés
Cache
Cache : définition et tous les domaines où la mise en cache est utilisée
Classe les domaines où le cache est utilisé, du navigateur jusqu'à l'intérieur du serveur, y compris le cache des serveurs edge d'un CDN.
Varnish
Installer et configurer Varnish Cache avec Apache et Nginx
Explique comment installer et configurer le cache de proxy inverse Varnish devant Apache et Nginx.
Cloudflare
Configurer le CDN Cloudflare : forfait Pro
Connecte Cloudflare à WordPress avec la méthode du proxy DNS, puis traite l'écart de vitesse et les réglages entre les offres Free et Pro.
ℹ️ Mention d'affiliation
Le contenu de ce site contient des liens d'affiliation. Lorsqu'un visiteur achète un produit ou un service via l'un de ces liens, le site perçoit une commission du vendeur. Le montant payé par l'acheteur(il baisse lors des promotions ↓), lui, n'augmente pas. Les prix, remises et stocks indiqués correspondent à la date de rédaction et peuvent différer ; vérifiez-les donc auprès du vendeur avant d'acheter. Les produits sont choisis et évalués selon nos propres critères, et les commissions n'influencent ni l'ordre de présentation ni le contenu des évaluations.