Wat is een CDN: betekenis, waarom je het gebruikt en hoe je WordPress koppelt
Een CDN (Content Delivery Network) is een netwerk voor het leveren van content dat de bestanden van de originele server opslaat op edge-servers in meerdere regio's en bezoekers antwoordt vanaf de dichtstbijzijnde server. Om te zien of edge-servers vanuit de cache antwoorden, hebben we de response-headers van een openbare dienst voor het verspreiden van bibliotheken zoals jsDelivr gecontroleerd: het jQuery-bestand werd geleverd vanuit een kopie in de cache. De twee manieren om WordPress te koppelen, bestands-URL's herschrijven en een DNS-proxy, hebben we vergeleken op basis van de officiële documentatie.
1️⃣ Betekenis van CDN: edge-servers en de originele server
Een POP (Point of Presence) is een datacenter met edge-servers, en het verzoek van een bezoeker gaat naar de dichtstbijzijnde POP.
Een edge-server die een verzoek krijgt, antwoordt meteen als het bestand is opgeslagen; zo niet, dan haalt hij het bestand op bij de originele server, antwoordt en slaat het op de edge-server op. CloudFront, het CDN van AWS, begint met leveren aan de bezoeker zodra de eerste byte van de originele server binnenkomt (volgens de officiële documentatie van AWS).

Edge-servers slaan alleen bestanden op die bezoekers hebben opgevraagd. Daardoor gaat zelfs bij hetzelfde bestand het eerste verzoek op elke edge-server door tot aan de originele server.
Bestanden zo pas ophalen als er een verzoek komt, heet de pull-methode; daarnaast bestaat de push-methode, waarbij je bestanden vooraf naar het CDN uploadt.
2️⃣ Waarom een CDN: afstand en belasting van de originele server
Hoe verder bezoeker en server van elkaar af zitten, hoe langer de retourtijd (RTT) van elk verzoek. Bij het openen van een pagina komen er naast de HTML ook verzoeken voor afbeeldingen, CSS en JavaScript, dus als een edge-server in de buurt antwoordt, wordt de retourtijd van elk verzoek korter.
Verzoeken die een edge-server beantwoordt, bereiken de originele server niet, waardoor ook het CPU-gebruik en het dataverkeer (bandbreedte) van de originele server dalen. Als je de DNS via de Cloudflare-proxy koppelt, blijft het IP-adres van de originele server verborgen en worden DDoS-aanvallen eerst door het CDN tegengehouden (volgens de officiële documentatie van Cloudflare).
Voor een site waarvan de bezoekers in dezelfde regio zitten als de originele server, levert de afstand weinig op. Bij zulke sites is het grotere voordeel van een CDN niet een kortere responstijd, maar een lagere belasting van de originele server en minder dataverkeer.
3️⃣ Bestanden die in de cache komen: statische bestanden en HTML
In de standaardinstelling cachet Cloudflare alleen statische bestanden zoals afbeeldingen, CSS en JavaScript, bepaald aan de hand van de bestandsextensie (volgens de officiële documentatie van Cloudflare). Pagina-HTML en JSON vallen buiten de standaardcache, dus ook na het koppelen van Cloudflare antwoordt de originele server daarop.
Wil je ook HTML cachen, dan moet je in het CDN een aparte cacheregel maken. Sluit daarbij pagina's waarvan de inhoud per persoon verschilt, zoals die voor ingelogde gebruikers of de winkelwagen, uit van de regel, zodat bezoekers nooit het scherm van iemand anders te zien krijgen.
4️⃣ WordPress koppelen: bestands-URL's herschrijven en DNS-proxy
Om een CDN aan WordPress te koppelen, verander je alleen de URL's van statische bestanden in CDN-URL's, of stel je de DNS van je domein in op de CDN-proxy zodat alle verzoeken via het CDN lopen.
| Methode | Waar je koppelt | Verzoeken via het CDN | IP-adres originele server |
|---|---|---|---|
| Bestands-URL's herschrijven | CDN-adres (CNAME) invullen in de CDN-instellingen van de cacheplugin | Statische bestanden zoals afbeeldingen, CSS en JavaScript | Blijft openbaar |
| DNS-proxy | DNS-records van het domein aan de CDN-proxy koppelen | Alle HTTP- en HTTPS-verzoeken van de site | Verborgen achter het CDN |
Bij het herschrijven van bestands-URL's vul je in de CDN-instellingen van een cacheplugin zoals WP Rocket het adres (CNAME) in dat je CDN-aanbieder geeft. Daarna worden de URL's van afbeeldingen, CSS en JavaScript in de pagina-HTML veranderd in CDN-URL's (volgens de officiële documentatie van WP Rocket). De HTML zelf komt nog steeds van de originele server.

Met de DNS-proxymethode wordt de DNS van je domein beheerd door de CDN-aanbieder. Cloudflare biedt ook een manier om de proxy te koppelen zonder de nameservers te verhuizen, door alleen CNAME-records toe te voegen bij je huidige DNS-aanbieder. Deze methode is alleen beschikbaar vanaf het Business-abonnement (volgens de officiële documentatie van Cloudflare).
5️⃣ Cachetreffers controleren: de headers cf-cache-status en age
Of een CDN een bestand vanuit de cache heeft geleverd, zie je aan de response-headers. Hieronder staan de opdracht waarmee we de response-headers van het door jsDelivr verspreide jQuery-bestand hebben gecontroleerd, en de uitvoer.
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] geeft aan dat een edge-server van Cloudflare dit antwoord heeft gestuurd, en [cf-cache-status: HIT], dat Cloudflare toevoegt, betekent dat er vanuit de cache is geantwoord. [age: 45920] geeft aan dat dit bestand al ongeveer 12 uur en 45 minuten in de cache staat. [max-age=31536000] is de instructie van de originele server dat het bestand 1 jaar mag worden bewaard.
Hoe ver een verzoek gaat als de waarde [MISS], [DYNAMIC] of [BYPASS] is in plaats van [HIT], zie je door in het diagram hieronder op de waardeknoppen te klikken.
cf-cache-status: HITcf-cache-status: MISScf-cache-status: DYNAMICcf-cache-status: BYPASSCache-Control: no-store of private🔢 FAQ & aanbevolen content
Cache
Cache: definitie en alle toepassingsgebieden van caching
Zet de gebieden op een rij waar caching wordt gebruikt, van de browser tot binnen in de server, inclusief de edge-servercache van een CDN.
Varnish
Varnish Cache installeren en instellen op Apache en Nginx
Laat zien hoe je de reverse-proxycache Varnish vóór Apache en Nginx installeert en instelt.
Cloudflare
Cloudflare-CDN instellen: Pro-abonnement
Koppelt Cloudflare met de DNS-proxymethode aan WordPress en behandelt daarna het snelheidsverschil en de instellingen tussen het Free- en het Pro-abonnement.
ℹ️ Affiliatemelding
De content van deze site bevat affiliatelinks. Koopt een bezoeker via een van deze links een product of dienst, dan ontvangt deze site een commissie van de verkoper. Het bedrag dat de koper betaalt (bij acties gaat het omlaag ↓) wordt daardoor niet hoger. De vermelde prijzen, kortingen en voorraad gelden op het moment van schrijven en kunnen afwijken; controleer ze daarom vóór je aankoop bij de verkoper. Producten worden gekozen en beoordeeld volgens onze eigen criteria, en commissies hebben geen invloed op de volgorde of de inhoud van de beoordelingen.