Website versnellen met caching, compressie en meer

Een trage website kost je bezoekers, conversies en posities in Google. Gelukkig kun je zelf veel doen: je website versnellen met caching, compressie en beeldoptimalisatie is voor een groot deel gewoon een kwestie van de juiste instellingen op je Plesk-hosting. In dit artikel leggen we eerst uit wat caching is en waarom het je site sneller maakt. Daarna volgt een praktisch stappenplan dat je direct kunt uitvoeren, plus tips om je snelheid te meten.

Wat is caching en waarom versnelt het je website?

Caching betekent dat je een kant-en-klare kopie bewaart van iets dat anders bij elk bezoek opnieuw berekend of opgehaald moet worden. In plaats van elke keer al het werk over te doen, geeft de server of de browser de bewaarde kopie terug. Dat scheelt rekentijd, dataverkeer en wachttijd, en dus laadt je pagina sneller.

Er zijn grofweg drie plekken waar caching plaatsvindt.

Browsercache (bij de bezoeker)

De browser van je bezoeker bewaart statische bestanden zoals afbeeldingen, stylesheets (CSS) en scripts (JavaScript) lokaal op de computer of telefoon. Komt iemand terug of klikt hij door naar een volgende pagina, dan haalt de browser die bestanden uit de eigen cache in plaats van ze opnieuw te downloaden. Jij bepaalt met een paar regels hoe lang de browser die bestanden mag bewaren.

Server-side cache (op de server)

Op de server zelf spelen drie lagen een rol. Het is handig om ze uit elkaar te houden.

• Paginacache: de server bewaart de volledig opgebouwde HTML van een pagina. De volgende bezoeker krijgt die kant-en-klare pagina, zonder dat PHP en de database opnieuw aan het werk moeten. Dit is wat WordPress-cacheplugins vooral doen.
• Opcodecache (OPcache): PHP bewaart de gecompileerde versie van je code in het geheugen, zodat de code niet bij elke aanvraag opnieuw vertaald hoeft te worden.
• Objectcache: resultaten van zware bewerkingen, zoals databasequery's, worden in het geheugen bewaard (bijvoorbeeld met Redis of Memcached). Dit helpt vooral bij dynamische pagina's die een paginacache niet als statische HTML kan bewaren.

CDN (content delivery network)

Een CDN is een netwerk van servers op verschillende locaties in de wereld. Die servers bewaren kopieën van je statische bestanden en leveren ze uit vanaf de locatie die het dichtst bij je bezoeker ligt. Zo hoeft de data minder ver te reizen, wat de laadtijd verlaagt en je eigen server ontlast. Een CDN is optioneel en vooral interessant als je veel bezoekers uit verschillende landen hebt.

Meet eerst je snelheid: PageSpeed Insights en GTmetrix

Begin altijd met meten. Zo weet je waar de winst zit en of een aanpassing echt helpt. Meet steeds voor en na een wijziging, zodat je het effect ziet.

• PageSpeed Insights (pagespeed.web.dev) van Google gebruikt de testtool Lighthouse en combineert die meting met echte gebruikersdata. De tool toetst je pagina aan de Core Web Vitals: LCP (laadtijd, goed is 2,5 seconden of sneller), INP (reactiesnelheid, goed is 200 milliseconden of sneller) en CLS (visuele stabiliteit, goed is 0,1 of lager). Google beoordeelt deze scores op het 75e percentiel: minstens driekwart van je bezoekers moet een goede ervaring krijgen. INP verving in maart 2024 de oudere maatstaf FID.
• GTmetrix (gtmetrix.com) werkt ook op basis van Lighthouse en geeft je een overzichtelijk rapportcijfer plus een watervalgrafiek. In die grafiek zie je precies welk bestand hoeveel tijd kost, zodat je de grootste boosdoeners herkent.

Beide tools kun je gratis gebruiken voor losse tests. Draai een test, noteer je scores en ga daarna aan de slag met de stappen hieronder.

Stap 1: Browsercaching instellen via .htaccess

Het bestand .htaccess is een instellingenbestand van de Apache-webserver dat per map werkt. Op je Plesk-hosting vind je het in de map httpdocs via Bestandsbeheer, of je bewerkt het via FTP. Met een klein blok code vertel je de browser hoe lang hij bestanden mag bewaren.

1. Maak eerst een back-up van je bestaande .htaccess.
2. Open Bestandsbeheer in Plesk en ga naar de map httpdocs.
3. Open het bestand .htaccess, of maak het aan als het nog niet bestaat.
4. Plak het onderstaande blok bovenaan het bestand en sla op.
5. Test je site en controleer met PageSpeed Insights of de caching wordt toegepast.

<IfModule mod_expires.c>
  ExpiresActive On

  # Afbeeldingen: een jaar bewaren
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/avif "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Lettertypen: een jaar bewaren
  ExpiresByType font/woff2 "access plus 1 year"

  # CSS en JavaScript: een maand bewaren
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # HTML: niet lang bewaren, inhoud verandert
  ExpiresByType text/html "access plus 0 seconds"
</IfModule>

De module mod_expires stuurt automatisch zowel een Expires- als een Cache-Control: max-age-header mee, dus je hoeft niet allebei apart in te stellen. Statische bestanden mag je gerust een jaar laten bewaren, omdat WordPress en de meeste systemen bij een wijziging een nieuw versienummer aan de bestandsnaam hangen (bijvoorbeeld style.css?ver=2.1). De browser ziet dan een nieuwe URL en haalt de nieuwe versie op. HTML houd je juist kort, zodat bezoekers je aanpassingen snel zien.

Stap 2: Compressie aanzetten met GZIP en Brotli

Compressie verkleint tekstbestanden zoals HTML, CSS en JavaScript voordat ze naar de browser worden verstuurd. Dat scheelt vaak 60 tot 80 procent aan dataverkeer. Er zijn twee methoden: het bekende GZIP en het nieuwere Brotli, dat teksten ongeveer 15 tot 20 procent kleiner maakt dan GZIP. Je kunt ze allebei aanzetten: de browser en server kiezen samen automatisch de beste variant die allebei ondersteunen.

# GZIP-compressie (mod_deflate)
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml
  AddOutputFilterByType DEFLATE application/javascript application/json application/xml
  AddOutputFilterByType DEFLATE image/svg+xml
</IfModule>

# Brotli-compressie (mod_brotli, indien beschikbaar)
<IfModule mod_brotli.c>
  AddOutputFilterByType BROTLI_COMPRESS text/html text/css text/plain text/xml
  AddOutputFilterByType BROTLI_COMPRESS application/javascript application/json application/xml
  AddOutputFilterByType BROTLI_COMPRESS image/svg+xml
</IfModule>

Comprimeer alleen tekstbestanden. Afbeeldingen (JPEG, PNG, WebP) en woff2-lettertypen zijn al gecomprimeerd, dus die sla je over. Werkt de compressie niet na het opslaan? Op Plesk staat deze instelling soms op serverniveau. Kijk dan bij de Apache- en nginx-instellingen van je domein, of vraag support om de juiste modules aan te zetten.

Stap 3: Afbeeldingen optimaliseren

Afbeeldingen zijn meestal het zwaarste onderdeel van een pagina, dus hier ligt vaak de grootste snelheidswinst. Let op deze punten.

• Juiste afmeting: laad geen afbeelding van 4000 pixels breed in een vak van 400 pixels. Schaal de afbeelding naar de grootte waarop hij echt getoond wordt.
• Moderne formaten: sla afbeeldingen op als WebP. Dat formaat wordt door vrijwel alle browsers ondersteund en is flink kleiner dan JPEG of PNG. Het nog nieuwere AVIF is soms nog kleiner, maar WebP is de veilige standaardkeuze.
• Comprimeren: een JPEG-kwaliteit van rond de 80 procent geeft een klein bestand zonder zichtbaar kwaliteitsverlies. Verwijder ook overbodige metadata.
• Lazy loading: met het kenmerk loading="lazy" laadt de browser afbeeldingen pas als de bezoeker er bijna bij is. Doe dit niet bij de grote afbeelding bovenaan de pagina, want die wil je juist meteen laden.

In WordPress voegt de nieuwste versie loading="lazy" zelf al toe, en veel beeldoptimalisatie-plugins kunnen je afbeeldingen automatisch verkleinen en naar WebP omzetten. Zo hoef je dit niet met de hand te doen.

Stap 4: WordPress versnellen met een cacheplugin

Gebruik je WordPress, dan neemt een cacheplugin veel werk uit handen. Zo'n plugin maakt een statische kopie van je pagina's en regelt vaak ook browsercaching en compressie voor je. Belangrijke regel: houd altijd maar één paginacacheplugin tegelijk actief, anders werken ze elkaar tegen.

• WP Super Cache is gemaakt door Automattic, het bedrijf achter WordPress.com. De plugin is eenvoudig in te stellen en maakt statische HTML-pagina's, zodat de meeste bezoekers je pagina's te zien krijgen zonder dat PHP en de database aan het werk moeten. Een prima keuze als je iets simpels wilt dat werkt.
• W3 Total Cache is uitgebreider en biedt paginacache, objectcache, databasecache, browsercaching en het samenvoegen van bestanden in één plugin. Die kracht vraagt wel om aandacht: de plugin heeft de afgelopen jaren meer dan één ernstig beveiligingslek gehad. Gebruik je hem, houd hem dan altijd bijgewerkt naar de nieuwste versie en zet automatische updates aan.

Na het installeren zet je paginacaching aan, test je je site grondig en meet je opnieuw. Combineer de plugin met OPcache op de server (de volgende stap) voor het beste resultaat.

Stap 5: PHP OPcache benutten

OPcache is een ingebouwd onderdeel van PHP dat de gecompileerde versie van je code in het geheugen bewaart. Zonder OPcache vertaalt PHP je code bij elke aanvraag opnieuw. Met OPcache gebeurt dat maar één keer. Voor een PHP-toepassing als WordPress is dat een van de goedkoopste en grootste snelheidswinsten die er zijn.

Het goede nieuws: OPcache zit standaard in moderne PHP-versies en staat daar meestal al aan. Omdat je op de webhosting van LJPc de nieuwste PHP-versies gebruikt, profiteer je hier automatisch van. Wil je het zeker weten, dan controleer je het in Plesk onder de PHP-instellingen van je domein. Kies daar meteen de nieuwste PHP-versie: die is op zichzelf ook weer sneller dan een oude versie.

Let op: OPcache is niet hetzelfde als een objectcache zoals Redis. OPcache versnelt de code, een objectcache bewaart gegevens. Ze vullen elkaar aan. OPcache stel je bovendien op serverniveau in, niet via .htaccess.

Nog steeds traag? Zo haal je meer snelheid

Heb je alle stappen doorlopen en meet je nog steeds trage laadtijden? Loop dan deze veelvoorkomende oorzaken na.

Een geldig SSL-certificaat helpt ook mee: browsers gebruiken het snellere HTTP/2-protocol alleen over een beveiligde HTTPS-verbinding, en dat laadt veel bestanden efficiënter in één keer. Groeit je website flink en loop je tegen de grenzen van gedeelde hosting aan, dan geeft meer capaciteit, bijvoorbeeld een dedicated server, opnieuw ruimte. Meet daarna weer, zodat je zeker weet dat het effect heeft gehad.

Met deze stappen haal je op je eigen hosting al veel snelheidswinst binnen. Werk van boven naar beneden, meet steeds het effect en pas aan waar nodig. Kom je er niet uit? Neem contact op met support, dan kijken we met je mee.