Een trage pagina alleen voor nieuwe bezoekers

Een browser bewaart bestanden die hij eerder heeft opgehaald, zoals afbeeldingen, stijlbladen en scripts, zodat een tweede bezoek minder hoeft te downloaden. Een nieuwe bezoeker heeft die bestanden nog niet. Voor jou, die je site dagelijks opent, is de cache vrijwel altijd gevuld.

Het verschil tussen beide situaties noemen we koud (lege cache, eerste bezoek) en warm (bestanden al aanwezig). Wanneer een pagina koud veel trager laadt dan warm, zegt dat iets over het gewicht en de volgorde van wat de browser moet ophalen. MDN beschrijft in zijn overzicht over webprestaties dat prestaties zowel objectieve metingen als de ervaren laadtijd omvatten, en dat de kritieke renderpad bepaalt hoe snel de eerste weergave verschijnt. Voor een nieuwe bezoeker telt precies dat eerste ophaalwerk.

Let op de grens: deze vergelijking toont het effect van caching in je testomgeving. Ze vervangt geen meting bij echte bezoekers op echte toestellen en verbindingen.

Een vergelijking is alleen zinvol als alleen de cache verschilt. Leg dus voor je begint vast wat constant blijft.

• Dezelfde browser en versie, bij voorkeur zonder extensies die verkeer wijzigen.
• Dezelfde pagina-URL, inclusief eventuele parameters.
• Dezelfde netwerkcondities: gebruik dezelfde verbinding of een vaste vertraging in de ontwikkelaarstools, en noteer welke.
• Hetzelfde toestel, zonder andere zware taken op de achtergrond.
• Dezelfde inlogstatus, want ingelogde en anonieme bezoekers krijgen soms verschillende inhoud.

Noteer deze condities op je blad. De exacte benamingen en schermen van de ontwikkelaarstools verschillen per browser en kunnen wijzigen, dus zoek ze op in de documentatie van jouw browser in plaats van ze uit het hoofd te volgen. Een venster zonder opgeslagen gegevens kan een snelle manier zijn om een koude start na te bootsen, maar controleer of extensies of instellingen daar het resultaat beïnvloeden.

Voer de test meerdere keren uit, want één meting is te toevallig. Een eigen werkwijze in zes stappen:

1. Wis de gecachete bestanden van de pagina of start een schone sessie, zodat de eerste laadbeurt echt koud is. Let op: het wissen van alle sitegegevens kan ook cookies en een inlogsessie verwijderen, waardoor je andere inhoud krijgt. Controleer dus of de inlogstatus gelijk blijft.
2. Laad de pagina en noteer wat je kiest als maat, bijvoorbeeld de tijd tot de hoofdinhoud zichtbaar is, en het totaal aan opgehaalde bestanden.
3. Laad de pagina meteen opnieuw zonder iets te wissen: dit is de warme meting.
4. Herhaal de koude en warme reeks minstens drie keer en noteer elke uitkomst afzonderlijk.
5. Kijk per laadbeurt in de netwerklijst welke bestanden zwaar zijn en welke uit de cache komen.
6. Vergelijk koud en warm op dezelfde maat, niet op verschillende maten door elkaar.

De uitkomst is een verschil tussen twee reeksen, geen absolute snelheid. Vermijd het om uit deze test een precieze laadtijd voor je bezoekers af te leiden. Gebruik ze om te zien welke bestanden het koude bezoek vertragen.

Lees je resultaten met deze beslismatrix. De regels zijn onze eigen vuistregels voor onderzoek, geen vaste normen.

Web.dev beschrijft in zijn cursus over prestaties thema's zoals HTML-caching, parser- en renderblokkering, afbeeldingen, video, lettertypes en het opdelen van JavaScript. Dat geeft je een lijst om per richting dieper in te duiken, zonder dat je alles tegelijk hoeft aan te passen.

Een fictief voorbeeld, uitsluitend ter illustratie. Invoer: een dienstenpagina met een grote bannerafbeelding, twee scripts van derden en een lettertype. Je eigen toestel toont haar vlot, maar een collega met een gloednieuw profiel meldt een trage eerste weergave.

Verwachte controles: je legt de condities vast, voert drie koude en drie warme laadbeurten uit en kijkt in de netwerklijst naar de zwaarste bestanden. Stel dat de bannerafbeelding en de scripts van derden het koude bezoek domineren; dan formuleer je dat als hypothese, niet als zekerheid. Je past één ding tegelijk aan, bijvoorbeeld de afbeelding, en herhaalt daarna exact dezelfde meetreeks.

Controle na wijziging: gelijke browser, gelijke netwerkconditie, zelfde meetmaat, opnieuw koud en warm. Vergelijk de nieuwe koude reeks met de oude koude reeks, niet met de warme. Als het verschil klein blijft, ga naar de volgende verdachte uit je beslismatrix. Beloof jezelf geen vaste verbetering vooraf: de uitkomst hangt af van je pagina.

Wil je daarna ook de zichtbare signalen van je site breder bekijken, dan kun je de publieke signalen van je eigen website bekijken via Marketing Scan. Die scan meet zichtbare signalen en voert niet alle bovenstaande controles uit.