Definitie
Een CDN is een netwerk van servers verspreid over de wereld dat kopieën van je bestanden dicht bij de bezoeker aanbiedt. Dat verlaagt laadtijd en serverbelasting.
Wat is een CDN?
Een content delivery network staat tussen je bezoeker en je server. Het bewaart kopieën van statische bestanden, zoals afbeeldingen, CSS, JavaScript en fonts, op servers op veel locaties. Een bezoeker in Gent krijgt die bestanden dan van een server in de buurt in plaats van van je hostingmachine.
Moderne CDN's doen meer dan dat. Ze kunnen ook complete HTML-pagina's cachen, afbeeldingen on-the-fly omzetten naar WebP of AVIF, TLS afhandelen, HTTP/2 en HTTP/3 aanbieden en aanvallen of bots tegenhouden. Bekende aanbieders zijn Cloudflare, Fastly, Akamai en Amazon CloudFront.
Een CDN werkt met een cache per locatie. De eerste bezoeker in een regio haalt het bestand bij je server op, de volgende krijgt de kopie. Hoe lang die kopie geldig blijft, bepaal je met Cache-Control-headers. Voor afbeeldingen en CSS met een versienummer in de bestandsnaam kun je die lang maken; voor HTML kort of met een purge-mechanisme.
Waarom het ertoe doet voor webshops
Een webshop serveert veel afbeeldingen. Productfoto's, categorie-banners, thumbnails in het menu. Komen die allemaal van één server, dan bepaalt de afstand en de belasting van die server hoe snel je LCP is. Een CDN haalt dat werk weg bij je applicatieserver, zodat die zich kan bezighouden met de winkelwagen en checkout.
Voor een shop die alleen in Nederland en België verkoopt, is de afstandswinst kleiner dan voor een internationale shop. De winst zit dan vooral in caching, compressie en beeldoptimalisatie. Voor shops die naar Duitsland, Scandinavië of verder verkopen, telt de afstand wel mee.
Voor SEO heeft een CDN geen eigen effect. Het effect loopt via snelheid: TTFB en LCP. Let wel op dat je CDN Googlebot en andere crawlers niet als bot blokkeert of een challenge toont. Dat zie je terug als crawlfouten in Search Console.
Zo werkt het in Magento, Shopify en Laravel
Shopify levert een CDN mee. Afbeeldingen en thema-assets worden automatisch via het netwerk van Shopify geserveerd en met image_url krijg je het juiste formaat. Daar hoef je niets voor in te richten.
Bij Magento kies je zelf. Adobe Commerce Cloud draait standaard met Fastly. Bij Magento Open Source zet je vaak Cloudflare voor de site, of je stelt onder Stores > Configuration > General > Web een Base URL voor statische en mediabestanden in die naar een CDN wijst. Met Varnish op de server en een CDN ervoor heb je twee cachelagen; zorg dat purges bij een prijswijziging bij beide aankomen.
In Laravel serveer je assets via de ASSET_URL-instelling of een opslag-disk op een CDN. Voor HTML-caching aan de edge moet je goed regelen welke pagina's persoonlijk zijn en dus niet gecachet mogen worden.
Een CDN helpt ook bij piekverkeer. Bij een actie of een vermelding in de media vangt het netwerk de vraag naar statische bestanden op. Je server hoeft dan alleen nog de requests af te handelen die echt dynamisch zijn.
Veelgemaakte fouten
Een CDN dat ingelogde of winkelwagen-pagina's cachet, waardoor bezoekers elkaars gegevens zien. Botbescherming die Googlebot of Bingbot een challenge geeft. Afbeeldingen op een apart CDN-domein zonder correcte canonical of hreflang op HTML die via de CDN-host bereikbaar is. En een cache die na een prijswijziging uren de oude prijs blijft tonen, wat ook in je Merchant Center-feed tot afkeuringen kan leiden.
Test na het inrichten van een CDN altijd een paar zaken: krijgen ingelogde klanten hun eigen winkelwagen, verschijnt een prijswijziging binnen redelijke tijd, en ziet Googlebot de pagina normaal in de URL-inspectie van Search Console.
Verder lezen
Veelgestelde vragen
Verbetert een CDN mijn rankings?+
Niet direct. Een CDN verbetert laadtijd en TTFB, en die tellen via de Core Web Vitals en de gebruikservaring mee.
Heeft Shopify een CDN nodig?+
Nee. Shopify serveert assets en afbeeldingen al via een eigen CDN.
Kan een CDN Googlebot blokkeren?+
Ja, als botbescherming te streng staat. Controleer de crawlstatistieken in Search Console na het aanzetten van zulke regels.
Meer begrippen over techniek & snelheid
- Back/forward cache (bfcache)
- Client-side rendering (CSR)
- CLS (Cumulative Layout Shift)
- Core Web Vitals
- Critical CSS
- CrUX (Chrome UX Report)
- FCP (First Contentful Paint)
- FID (First Input Delay)
- Full page cache
- Headless commerce
- HTTPS
- Hydration
- INP (Interaction to Next Paint)
- JavaScript-SEO
- Lazy loading
- LCP (Largest Contentful Paint)
- Lighthouse
- Mobile-first indexing
- Preload en fetchpriority
- PWA (progressive web app)
- Server-side rendering (SSR)
- Third-party scripts
- TTFB (Time to First Byte)
- Varnish
- WebP en AVIF
