Als een bezoeker je website voor het eerst opent, downloadt de browser alle bestanden die nodig zijn om de pagina te tonen: HTML, stylesheets, scripts, afbeeldingen en lettertypen. Bij een volgend bezoek hoeft de browser al die bestanden niet opnieuw te downloaden als ze lokaal zijn opgeslagen. Browsercaching maakt dat mogelijk. Het is een van de eenvoudigste manieren om een website sneller te laten aanvoelen voor terugkerende bezoekers.
Browsercaching bewaart kopieën van websitebestanden op het apparaat van de bezoeker. Bij volgende paginabezoeken hoeft de browser bestanden die niet zijn veranderd dus niet opnieuw op te halen. De server vertelt de browser hoe lang elk bestand bewaard mag blijven en wanneer de browser moet controleren of er een nieuwere versie is. Als je weet hoe browsercaching werkt, snap je waarom een tweede bezoek vaak merkbaar sneller gaat dan het eerste.
Hoe werkt browsercaching?
Elk bestand dat je server verstuurt, bevat cache-instructies in de HTTP-responseheaders. Die headers vertellen de browser of het bestand moet worden opgeslagen, hoe lang het bewaard blijft en wanneer er een nieuwe kopie moet worden opgevraagd.
Bij het eerste bezoek downloadt de browser alle benodigde bestanden van je server en slaat hij de bestanden die gecachet mogen worden lokaal op. Bij volgende bezoeken laadt de browser de geldige bestanden uit de lokale opslag in plaats van ze opnieuw te downloaden.
Welke bestanden profiteren het meest van browsercaching?
Niet elk bestand moet even lang gecachet worden. Statische bestanden die zelden veranderen, zijn ideaal. Dynamische inhoud die vaak wijzigt, heeft een kortere cacheduur nodig, of helemaal geen cache.
Lange cacheduur
- Stylesheets en JavaScript-bestanden die alleen veranderen als je het ontwerp van de site aanpast
- Logo's, iconen en favicons
- Lettertypebestanden
- Achtergrondafbeeldingen en decoratieve graphics
Korte cacheduur of geen cache
- HTML-pagina's met inhoud die vaak wordt bijgewerkt
- Pagina's met gepersonaliseerde of dynamische inhoud
- API-antwoorden en endpoints die formulieren verwerken
Het principe is simpel: cache ruim wat zelden verandert en voorzichtig wat vaak verandert. Het artikel over wat caching is en waarom het belangrijk is behandelt het bredere plaatje, inclusief servercaching en CDN-caching.
Waarom is browsercaching belangrijk voor snelheid?
Browsercaching verkleint direct de hoeveelheid data die een bezoeker moet downloaden en het aantal serververzoeken bij terugkerende bezoeken. Beide zorgen voor snellere paginaweergave.
Snellere gevoelde laadtijd
Een stylesheet uit de lokale opslag laden kost milliseconden. Hetzelfde bestand via het netwerk downloaden kost honderden milliseconden of meer, afhankelijk van de verbinding. Bij terugkerende bezoeken verschijnen gecachete bestanden bijna direct, waardoor de pagina veel sneller aanvoelt nog voordat nieuwe inhoud is geladen.
Minder belasting voor de server
Elk bestand dat uit de browsercache komt, is een verzoek minder voor je server. Heb je veel terugkerende bezoekers, dan verbetert dat de reactietijd voor alle bezoekers.
Betere prestaties op mobiel
Mobiele verbindingen zijn meestal trager dan vaste verbindingen. Browsercaching levert op mobiel dus nog meer snelheidswinst op, omdat netwerkverzoeken die op een zwakke verbinding traag zijn, wegvallen. Het artikel over waarom mobiele paginasnelheid ertoe doet legt uit waarom deze laag voor mobiele bezoekers extra belangrijk is.
Hoe WEMASY browsercaching regelt
WEMASY stelt automatisch de juiste cacheheaders in voor alle bestandstypen. Statische bestanden zoals stylesheets, scripts en afbeeldingen krijgen een lange cacheduur. HTML-pagina's krijgen een kortere duur, zodat wijzigingen na het publiceren snel zichtbaar zijn. Als je iets aanpast in de editor, werkt WEMASY de cacheversies bij. Terugkerende bezoekers zien dan verse inhoud zonder dat ze zelf hun cache hoeven te wissen.
Bekijk wat erbij zit op de WEMASY Websitebouwer of vergelijk de abonnementen op de prijzenpagina.
Veelgestelde vragen
Wat is browsercaching?
Browsercaching bewaart kopieën van websitebestanden op het apparaat van een bezoeker, zodat herhaalbezoeken sneller laden. De server stuurt bij elk bestand cache-instructies mee. Die vertellen de browser hoe lang hij het bestand mag bewaren voordat hij op updates controleert. Met de Websitebouwer van WEMASY regel je dit direct op je eigen website.
Wat is het verschil tussen browsercaching en servercaching?
Browsercaching bewaart bestanden op het apparaat van de bezoeker, zodat een herhaalbezoek sneller laadt. Servercaching bewaart kant-en-klare pagina's op de hostingserver, zodat die niet bij elk verzoek opnieuw worden opgebouwd. Beide verkorten de laadtijd, maar ze werken op een ander punt in de keten.
Waarom is mijn website snel bij het tweede bezoek en traag bij het eerste?
Bij het eerste bezoek moeten alle bestanden van de server worden gedownload. Bij het tweede bezoek komen veel van die bestanden uit de browsercache, en dat gaat veel sneller. Dit is normaal en laat zien dat browsercaching werkt. Wil je het eerste bezoek versnellen, richt je dan op afbeeldingscompressie, de reactietijd van de server en minder renderblokkerende bestanden.
Kunnen bezoekers oude inhoud zien door browsercaching?
Ja, als de cacheduur te lang is en de server de cacheversies niet bijwerkt na een wijziging. Een goed beheerd platform doet dat automatisch door de cache-identifiers aan te passen zodra je publiceert. Bezoekers krijgen dan bij hun volgende bezoek verse bestanden, zonder dat ze zelf hun browsercache hoeven te wissen.
Moet ik mijn browsercache wissen om mijn website te testen?
Je browsercache wissen is handig om te testen of recente wijzigingen goed te zien zijn. Zo simuleer je een nieuwe bezoeker. Voor dagelijks gebruik van je eigen site is het niet nodig. Gebruik een privévenster of incognitovenster om te testen zonder je gewone gecachete bestanden aan te raken.
Moet ik browsercaching zelf instellen?
Op een beheerd websiteplatform worden de cacheheaders automatisch ingesteld per bestandstype. Bij zelfbeheerde hosting heb je serverinstellingen of cache-extensies nodig. WEMASY regelt alle browsercaching voor je, zonder dat je iets technisch hoeft in te stellen.