Probleemoplossing

Trage site ondanks caching

Je site is gecacht maar voelt nog steeds traag? Dit kun je controleren.

1. Controleer of caching werkt

Bevestig eerst dat je content daadwerkelijk wordt gecacht. Controleer de response headers:

X-Cache: HIT ← Content geleverd vanuit cache
X-Cache: MISS ← Content opgehaald van origin

Als je alleen MISSes ziet, controleer dan of je origin Cache-Control: no-cache of private headers stuurt.

Hoe te controleren of de cache werkt →

2. Controleer op niet-gecachte bronnen

Zelfs als je HTML is gecacht, kunnen trage bronnen van derden de prestaties vertragen.

Veelvoorkomende oorzaken:

  • Google Fonts die synchroon worden geladen
  • Analysescripts (Google Analytics, Facebook Pixel)
  • Chatwidgets (Intercom, Drift, Crisp)
  • Externe advertentiescripts
  • Social media embeds

Tip: Laad scripts van derden met async of defer attributen om te voorkomen dat ze het renderen van de pagina blokkeren.

3. Grote afbeeldingen op de pagina

Zelfs met WebP-conversie vertragen te grote afbeeldingen de LCP.

Oplossingen:

  • Schaal afbeeldingen naar de werkelijke weergavegrootte (lever geen 4000px afbeeldingen voor 800px containers)
  • Gebruik responsieve afbeeldingen met srcset
  • Laad afbeeldingen onder de vouw pas later (lazy loading)
  • Overweeg een hero-afbeelding die is geoptimaliseerd voor het scherm

4. Trage origin-server

Bij cache MISSes (eerste verzoeken, dynamische pagina's) is de snelheid van je origin nog steeds belangrijk.

Controleer je origin:

  • Trage databasequery's (controleer slow query logs)
  • Ontbrekende database-indexen
  • Te veel plugins (WordPress/WooCommerce)
  • Onvoldoende serverbronnen
  • Geen opcode caching (PHP)

Doel: Origin TTFB moet onder 500ms zijn. Fast caching versterkt je origin-snelheid — een snelle origin betekent nog snellere gecachte responses.

5. Render-blokkerende bronnen

CSS en JS in de <head> blokkeren het renderen van de pagina.

Oplossingen:

  • Voeg kritische CSS inline toe in de <head>
  • Laad niet-kritische CSS met media="print" onload="this.media='all'"
  • Voeg defer toe aan JavaScript-bestanden
  • Verplaats scripts naar de onderkant van <body>

Prestatiechecklist

  • X-Cache toont HIT voor statische bronnen
  • Scripts van derden zijn async/deferred
  • Afbeeldingen hebben de juiste afmetingen
  • Origin TTFB is onder 500ms
  • Geen render-blokkerende bronnen in head