Caching in browser en server
Implementeer effectieve cachingstrategieën met HTTP-headers, service workers en cachingmechanismen aan de serverzijde.
Caching in browser en server is een gratis Webprestatieoptimalisatie en Lighthouse-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Webprestatieoptimalisatie en Lighthouse. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Webprestatieoptimalisatie en Lighthouse bevat in totaal 4 lessen.
Caching: het web sneller maken
Stel je voor dat je een website bezoekt. Elke keer moet je browser alle afbeeldingen, stylesheets en scripts opnieuw downloaden. Dat zou traag zijn!
Caching lost dit op door kopieën van deze bronnen dichter bij jou op te slaan, in je browser of op een tussenliggende server. Hierdoor wordt er minder data overgedragen en laden volgende bezoeken sneller.
Waarom caching belangrijk is
Efficiënte caching is cruciaal voor webprestaties. Het biedt verschillende belangrijke voordelen:
- Sneller laden van pagina's: Gebruikers krijgen inhoud sneller te zien, wat hun ervaring verbetert.
- Minder serverbelasting: Je server hoeft niet steeds dezelfde gegevens te verzenden.
- Lagere bandbreedtekosten: Minder overgedragen gegevens betekent lagere kosten voor zowel gebruikers als providers.
- Offlinefunctionaliteit: Geavanceerde caching kan gebruikers zelfs in staat stellen om offline door inhoud te bladeren.
Twee soorten caching
Caching kan op verschillende plaatsen plaatsvinden. We richten ons op twee hoofdtypen:
- Browsercaching (aan de clientzijde): Bronnen worden rechtstreeks op het apparaat van de gebruiker opgeslagen. Dit is de snelste vorm van caching voor terugkerende bezoekers.
- Caching aan de serverzijde: Bronnen worden op de webserver of een proxyserver opgeslagen voordat ze de gebruiker bereiken. Hierdoor hoeft de server minder werk te verrichten.
Browsercaching met HTTP-headers
Hoe weet een browser wat er moet worden gecachet en voor hoelang? De browser vertrouwt op HTTP-antwoordheaders die door de webserver worden verzonden. Deze headers fungeren als instructies voor de browser.
Belangrijke headers zijn Cache-Control, Expires, ETag en Last-Modified. Ze bepalen hoelang een bron als actueel wordt beschouwd en wanneer deze opnieuw moet worden gecontroleerd.
De Cache-Control-header
De header Cache-Control is het krachtigste en flexibelste mechanisme voor caching. Deze vertelt browsers en tussenliggende caches hoe ze met een bron moeten omgaan.
Veelgebruikte richtlijnen zijn:
max-age=SECONDS: Cache de bron gedurende dit aantal seconden.no-cache: De browser moet de bron bij de server opnieuw valideren voordat de gecachete kopie wordt gebruikt.no-store: Cache deze bron nooit.public/private: Kan respectievelijk door elke cache of alleen door de browser van de gebruiker worden gecachet.
Voorbeeld van Cache-Control
Hier is een voorbeeld van HTTP-antwoordheaders voor een afbeelding die één jaar lang openbaar kan worden gecachet (31.536.000 seconden). Hiermee laat je de browser weten dat hij lange tijd veilig de lokale kopie kan gebruiken zonder de server te controleren.
HTTP/1.1 200 OK
Content-Type: image/jpeg
Cache-Control: public, max-age=31536000
Expires: Tue, 25 Nov 2025 10:00:00 GMT
ETag: "image-v123"Opnieuw valideren met ETag en Last-Modified
Zelfs wanneer een bron is gecachet, moet deze soms opnieuw worden gevalideerd. De headers ETag (entiteitstag) en Last-Modified helpen hierbij.
Last-Modified: De datum en tijd waarop de bron voor het laatst is gewijzigd.ETag: Een unieke identificatie (zoals een hash) voor een specifieke versie van een bron.
De browser stuurt deze terug naar de server. Als de bron niet is gewijzigd, antwoordt de server met 304 Not Modified, waardoor bandbreedte wordt bespaard.
Service Workers: geavanceerde caching
Naast HTTP-headers bieden Service Workers krachtige, programmatische controle over caching. Een Service Worker is een JavaScript-bestand dat als proxy tussen je browser en het netwerk fungeert.
Ze kunnen netwerkaanvragen onderscheppen, antwoorden cachen met de Cache API en inhoud aanbieden, zelfs wanneer je offline bent. Hiermee worden echt robuuste offline-ervaringen en aangepaste cachingstrategieën mogelijk.
Een Service Worker registreren
Om een Service Worker te gebruiken, moet je deze eerst registreren in je belangrijkste JavaScript-bestand. Deze code controleert of Service Workers worden ondersteund en registreert je sw.js-bestand.
Na registratie kan de Service Worker zijn eigen cachinglogica definiëren, zoals het cachen van specifieke middelen of volledige pagina's.
// This code would be in your main.js file
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('SW registered with scope:', registration.scope);
})
.catch(error => {
console.log('SW registration failed:', error);
});
});
}Overzicht van caching aan de serverzijde
Cacheopslag is niet alleen voor browsers. Servers gebruiken ook cacheopslag om de belasting van databases te verminderen en responstijden te versnellen. Daarbij kan het gaan om het opslaan van:
- Resultaten van databasequery's: Voorkom dat complexe query's opnieuw worden uitgevoerd.
- Gegenereerde HTML-fragmenten: Lever delen van een pagina die niet vaak veranderen.
- API-responsen: Sla gegevens in de cache op die van andere services zijn opgehaald.
Cacheopslag aan de serverkant wordt beheerd door je webserver of applicatieframework, vaak met hulpprogramma's zoals Redis of Memcached.
Controle van de cachestrategie
Je hebt verschillende mechanismen voor cacheopslag geleerd. Laten we testen of je de HTTP-headers voor cacheopslag begrijpt.
Samenvatting: cacheopslag voor betere prestaties
We hebben besproken hoe cacheopslag webprestaties aanzienlijk verbetert. Je hebt geleerd over:
- Cacheopslag in browsers: Het gebruik van HTTP-headers zoals
Cache-Control,ETagenLast-Modified. - Service Workers: Krachtige, programmatische controle over cacheopslag aan de clientkant, waarmee je offlinefunctionaliteit mogelijk maakt.
- Cacheopslag aan de serverkant: De serverbelasting verminderen en de levering van dynamische inhoud versnellen.
Effectieve strategieën voor cacheopslag implementeren is een fundamentele stap bij het bouwen van snelle en robuuste webapplicaties.
Leer Webprestatieoptimalisatie en Lighthouse met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “Caching in browser en server” gratis?
Ja — de volledige tekst van “Caching in browser en server” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Webprestatieoptimalisatie en Lighthouse wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Webprestatieoptimalisatie en Lighthouse bevat in totaal 4 lessen.
Wat leer ik in “Caching in browser en server”?
Implementeer effectieve cachingstrategieën met HTTP-headers, service workers en cachingmechanismen aan de serverzijde. Je oefent met Webprestatieoptimalisatie en Lighthouse door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Webprestatieoptimalisatie en Lighthouse te beginnen?
Ervaring vooraf is niet nodig. Webprestatieoptimalisatie en Lighthouse op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Caching in browser en server”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Webprestatieoptimalisatie en Lighthouse?
Ja. Elke les over Webprestatieoptimalisatie en Lighthouse bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- De basisprincipes van HTTP/2 en HTTP/3
- Caching in browser en server
- Content Delivery Networks (CDN's)
- Compressie en transfer-encoding