Google het en je krijgt lijstjes. "Tien tips om je website sneller te maken!" Installeer een caching-plugin. Comprimeer je afbeeldingen. Gebruik een CDN. Niet verkeerd, maar het zijn pleisters. De echte snelheidswinst zit in het fundament: hoe je server is geconfigureerd, hoe je code is geschreven, en hoe je assets worden geladen. Laten we het daar eens over hebben.
De server: waar alles begint
Kies de juiste hosting
Alles wat hieronder staat is irrelevant als je server zelf de bottleneck is. Een €5/maand hostingpakket bij een bulkprovider trekt elke optimalisatie onderuit. Begin bij het fundament: een server met gereserveerde resources en een fatsoenlijke configuratie.
NGINX boven Apache
Apache is de standaard bij veel hostingproviders. NGINX is sneller voor het serveren van statische bestanden en beter in het afhandelen van veel gelijktijdige verbindingen. Het verschil is meetbaar: NGINX serveert dezelfde pagina in een fractie van de tijd.
Server-side caching
Een pagina die bij elk bezoek opnieuw wordt opgebouwd door PHP en de database, is altijd langzamer dan een pagina die klaarstaat als statisch HTML-bestand. NGINX FastCGI Cache, Redis of Varnish — server-side caching is de grootste enkelstap die je kunt zetten.
PHP-versie
Elke nieuwe PHP-versie is sneller dan de vorige. PHP 8.x is tot twee keer zo snel als PHP 7.0. Check je versie. Upgrade als het kan. Het kost je vijf minuten en levert meetbare snelheid op.
De frontend: wat de browser moet laden
Afbeeldingen optimaliseren
Afbeeldingen zijn verantwoordelijk voor 50-70% van de paginagrootte. Drie stappen:
- Comprimeer: Tools als ShortPixel, Imagify of Squoosh.
- Juist formaat: WebP of AVIF in plaats van PNG/JPEG. Kleiner bestand, zelfde kwaliteit.
- Lazy loading: Afbeeldingen buiten het scherm laden pas als ze in beeld komen. Standaard in moderne browsers met
loading="lazy".
CSS en JavaScript minimaliseren
Elke kilobyte telt. Minify je CSS en JS (verwijder whitespace, comments, ongebruikte code). Bundel waar mogelijk. Laad niet-kritische scripts met defer of async. Verwijder wat je niet gebruikt — die jQuery-library die je drie jaar geleden hebt toegevoegd maar nergens meer aanroept? Weg ermee.
Render-blocking resources
Als de browser moet wachten op een CSS- of JS-bestand voordat het iets kan tekenen, noem je dat render-blocking. Zet kritieke CSS inline in de <head>. Laad de rest asynchroon. Verplaats scripts naar het einde van de <body> of gebruik defer.
Webfonts
Fonts laden kost tijd, vooral als ze van Google Fonts komen (extra DNS-lookup, extra HTTP-request). Self-host je fonts, gebruik font-display: swap om tekst direct zichtbaar te maken, en beperk het aantal varianten.
Content Delivery Network (CDN)
Een CDN serveert je bestanden vanaf een server dicht bij je bezoeker. Je bezoeker in Amsterdam krijgt je afbeeldingen van een server in Amsterdam, niet van een server in Frankfurt of New York. Cloudflare is gratis en effectief. BunnyCDN is betaalbaar en snel. Voor de meeste websites is een CDN een quick win.
Meten en monitoren
Google PageSpeed Insights
De standaard. Meet LCP (Largest Contentful Paint), FID/INP (Interaction to Next Paint) en CLS (Cumulative Layout Shift). Score onder de 90? Er is werk te doen.
GTmetrix
Gedetailleerder dan PageSpeed. Laat exact zien welke bestanden het langst laden, welke scripts blokkeren, en waar de watervalgrafiek stokt.
WebPageTest
Voor de serieuze optimaliseerder. Test vanuit verschillende locaties en verbindingen. Vergelijk voor en na. De filmstrip-weergave is goud waard.
Real User Monitoring
Synthetische tests (PageSpeed, GTmetrix) zijn nuttig, maar echte gebruikersdata is beter. Google Search Console toont Core Web Vitals van echte bezoekers. Dat is de waarheid.
De volgorde van aanpak
Als je niet weet waar je moet beginnen:
- Server: Upgrade hosting, activeer caching
- Afbeeldingen: Comprimeer en converteer naar WebP
- Scripts: Verwijder ongebruikte JS/CSS, defer de rest
- Fonts: Self-host, beperk varianten
- CDN: Activeer Cloudflare of alternatief
- Meet opnieuw: Vergelijk de resultaten
In die volgorde pak je de grootste winst het eerst.