STATUS IS UPWIKI WEBSITE-OPTIMALISATIE
20Versnellen
Prestaties en levering / Versnellen

Praktische gids voor browsercaching voor website-eigenaren

Stel duidelijke HTTP-cacheregels in zodat terugkerende bezoekers onnodige downloads vermijden zonder ze vast te zetten op verouderde pagina's of onveilige gepersonaliseerde inhoud.

Praktische gids voor browsercaching voor website-eigenaren — VISUELE GIDS
LEZEN
7 minuten
BRONNEN
6
HERVALIDEREN
2027-03-27
beoordeeld
Reviewer webperformance en release engineering
HET KORTE ANTWOORD

Begin met de beslissing.

Gebruik voor elk soort URL een andere cachingregel. Geef bestanden waarvan de inhoud op dat URL nooit verandert — zoals hash-genaamde JavaScript, CSS, lettertypen en afbeeldingen — een lange freshnesstijd. Geef HTML en andere niet-geversioneerde responses een beleid dat de browser laat valideren voordat hergebruik plaatsvindt wanneer freshnes belangrijk is. Publiceer een nieuw asset-URL telkens wanneer een asset verandert; een lange cachelevensduur kan niet betrouwbaar worden teruggedraaid voor kopieën die nog steeds fresh zijn.

Begin met expliciete Cache-Control-headers en verifieer daarna de headers en het browsergedrag in een stagingomgeving. Combineer validatievriendelijke responses met ETag en, waar beschikbaar, Last-Modified. Behandel gepersonaliseerde, account-, checkout- en gevoelige responses apart van publieke pagina's. SIU gebruikt dit werk als proactieve uptime-optimalisatie: het vermindert onnodig origin-werk en voorkomt cachegerelateerde releasefouten voordat ze een bruikbare website verstoren.

VISUELE GIDS

Zie het werk als een systeem.

Gebruik deze kaart om de beslissingen uit het artikel te verbinden voordat je individuele tactieken toepast.

SIUVersnellen
01Koppel beleid aan het resource, niet aan de server
02Gebruik Cache-Control-termen precies
03Versioneer immutabele assets vóór toekenning van lange levensduur
04Houd HTML actueel via validatie, niet via lange caching
01

Koppel beleid aan het resource, niet aan de server

Maak een inventaris van representatieve URL's voordat je headers wijzigt: een startpagina, contentpagina, application shell, CSS, JavaScript, afbeeldingen, lettertypen, API's, inloggen, account, checkout en downloads. Noteer voor elk of de response publiek of gepersonaliseerd is, of de URL verandert als de bytes veranderen, en hoe snel een correctie bezoekers moet bereiken.

Maak vanuit die inventaris een beleidsmatrix. Een publiek content-geadresseerd asset heeft een ander regel nodig dan HTML op een stabiel adres. Responses zonder Cache-Control kunnen nog steeds heuristisch worden gecached, dus expliciete regels zijn makkelijker te testen.

Freshness lifetime

De periode waarin een opgeslagen response hergebruikt mag worden; max-age geeft dit in seconden.

02

Gebruik Cache-Control-termen precies

Cache-Control vertelt browsers en gedeelde caches hoe een response opgeslagen en hergebruikt moet worden. max-age=N staat hergebruik toe zolang het antwoord fresh is. s-maxage=N stelt shared-cache freshnes in en overschrijft daar max-age, maar browsers negeren s-maxage. public staat caching toe in elke cache; private staat browsercaching toe maar verhindert gedeelde-cacheopslag.

no-cache staat opslag toe maar vereist origin-validatie vóór hergebruik. no-store betekent dat caches de response niet mogen opslaan, maar is geen volledige privacycontrole. Gebruik must-revalidate wanneer het onacceptabel is om na verval verouderde inhoud te serveren; een onbeschikbare origin kan dan een 504 retourneren in plaats van een stale fallback.

Vermijd allesomvattende no-store

Het verbiedt opslag in plaats van alleen een controle te vereisen; reserveer het voor responses die daadwerkelijk niet opgeslagen mogen worden.

03

Versioneer immutabele assets vóór toekenning van lange levensduur

Een geversioneerd asset-URL bevat een content-fingerprint of releaseversie, zoals app.4f2c.js. Wanneer de assetbytes veranderen, publiceer je een ander URL en werk je de HTML-verwijzing bij. De cache ziet een nieuw resource, dus bezoekers halen het nieuwe asset op zonder dat een invalidatie elke browser hoeft te bereiken.

Voor een representatie die tijdens haar freshness lifetime niet verandert, is Cache-Control: max-age=31536000, immutable een praktisch patroon. immutable vertelt ondersteunde clients niet conditioneel te valideren zolang het fresh is. Pas dit of een jaarlange max-age niet toe op een mutabel bestand met hetzelfde URL. Bewaar eerdere fingerprinted assets zolang gecachte HTML ze mogelijk nog kan refereren.

HTML is het manifest

HTML kiest asset-URL's, dus release-sequencing moet de gerefereerde generatie behouden.

04

Houd HTML actueel via validatie, niet via lange caching

HTML heeft meestal een stabiel, menselijk toegankelijk URL en verandert met content, assetverwijzingen, feature flags of beveiligingsmeldingen. Een conservatief publiek HTML-patroon is Cache-Control: no-cache met ETag en Last-Modified wanneer je platform die correct kan produceren. De browser slaat de body op maar gebruikt een conditioneel verzoek vóór hergebruik; een ongewijzigde response kan 304 Not Modified zonder body teruggeven.

ETag identificeert een resourceversie. Bij een stale response kan de browser deze meesturen in If-None-Match; als het overeenkomt, antwoordt de server met 304, anders stuurt hij de nieuwe representatie. RFC-richtlijnen geven de voorkeur aan zowel ETag als Last-Modified op een 200-respons wanneer mogelijk. no-cache belooft geen validatie bij Back- of Forward-navigatie omdat een browser een session-history snapshot kan herstellen.

Kwaliteit van de validator

Een ETag moet veranderen wanneer de representatie verandert; test dit over origins en deployments.

05

Scheid publieke levering van gepersonaliseerde en gevoelige responses

Een gedeelde cache, zoals een CDN, kan één response hergebruiken voor meerdere gebruikers. Laat deze niet account-specifieke HTML of API-gegevens over meerdere gebruikers hergebruiken. Voor gepersonaliseerde content die in een browser kan leven is private, no-cache een redelijk uitgangspunt: het voorkomt gedeelde opslag en vereist validatie. Een Set-Cookie-header alleen stopt caching niet.

Voor responses die niet opgeslagen mogen worden, gebruik no-store en controleer applicatiecode, CDN-regels, service workers, browseropslag, logs en foutpagina's. Alleen headers zijn geen privacy-, compliance- of betaalveiligheidsprogramma. Laat gekwalificeerde beveiligings-, privacy- en betalingsreviewers gevoelige flows en toepasselijke eisen beoordelen.

Veranderingen in autorisatie

Test inloggen, uitloggen, accountwissel en permissiewijzigingen met warme browser- en CDN-caches.

06

Rol cachewijzigingen uit als een omkeerbare release

Neem baseline-headers en body-gedrag vast voor ongecachede en herhaalde verzoeken. Deploy in staging eerst geversioneerde assets, daarna de HTML die ernaar verwijst, en test oudere gecachte HTML tegen de nieuwe origin. Controleer directe-origin en CDN-paden als beide bestaan. DevTools Network-headers moeten het bedoelde beleid en het herhaalgedrag tonen.

Houd een releasemanifest bij van asset-URL's, headeregels en configuratieversie. Als een release incompatibele clientbestanden combineert, herstel dan compatibele HTML en applicatiegedrag, maar overschrijf geen gepubliceerde fingerprinted file. Verwijs HTML terug naar de bekende-goede generatie en behoud beide generaties zolang gecachte HTML ze mogelijk kan opvragen. Een shared-cache purge kan browsers niet dwingen een fresh response te verwijderen.

Proactieve remedie

Zet header-testfouten, asset 404's en versiemismatches om in wijzigingen voor de checklist van de volgende release.

ACTIE / VERIFIËREN

Je praktische takenlijst.

  1. 01

    Inventariseer responseklassen

    Classificeer voorbeeld-URL's als publiek of gepersonaliseerd, mutabel of geversioneerd.

    VERIFIËREN: Bevat HTML, assets, API's, authenticatie, account, checkout en fouten.
  2. 02

    Leg huidige headers vast

    Noteer Cache-Control, ETag, Last-Modified, Age, Vary en status bij origin en CDN.

    VERIFIËREN: Er bestaat een pre-change snapshot voor elk voorbeeld.
  3. 03

    Fingerprint mutabele assets

    Laat de build een nieuw asset-URL publiceren wanneer de bytes veranderen.

    VERIFIËREN: Een veranderd asset levert een veranderd URL en een bijgewerkte HTML-verwijzing op.
  4. 04

    Stel expliciete beleidsregels in

    Gebruik alleen langlevende regels voor immutabele geversioneerde URL's; gebruik validatie-eerstregels voor stabiele URL's.

    VERIFIËREN: Headertests komen overeen met het beoogde beleid.
  5. 05

    Test validatie

    Controleer dat een ongewijzigd document 304 retourneert na een conditioneel verzoek en dat een gewijzigd document 200 met een nieuwe ETag retourneert.

    VERIFIËREN: Staging-traces tonen beide paden.
  6. 06

    Oefen privacygrenzen

    Test twee accounts, uitloggen, rolwijzigingen en gevoelige routes met warme caches.

    VERIFIËREN: Geen gepersonaliseerde response overschrijdt gebruikers.
  7. 07

    Bewijs releasecompatibiliteit

    Laad gecachte eerdere HTML na de volgende release.

    VERIFIËREN: Vorige en huidige HTML laden hun gerefereerde assets zonder 404's of scriptfouten.
  8. 08

    Documenteer rollback

    Leg de goede generatie, headerversie, eigenaar en bewaartermijn van oude assets vast.

    VERIFIËREN: Een non-production drill herstelt de bekende-goede generatie zonder een immutable URL te bewerken.
DISCUSSIEONDERWERPEN

Vergelijk de afwegingen, niet privégegevens.

Gebruik deze vragen met je team of de community van website-eigenaren. Deel methoden en lessen, maar plak nooit inloggegevens, klantgegevens of niet-openbare infrastructuurdetails.

  1. 01

    Welke URL-klassen op je site zijn het moeilijkst te classificeren als publiek, gepersonaliseerd, immutabel of vaak wijzigend, en hoe documenteer je die beslissing?

  2. 02

    Welke release-sequencingtest is het nuttigst geweest om een mismatch tussen oude HTML en nieuwe assets te vinden voordat een bezoeker het tegenkomt?

  3. 03

    Waar overlappen jouw CDN-, applicatie- en browsercache-regels, en wie is eigenaar van het verifiëren dat hun gecombineerde gedrag overeenkomt met het bedoelde beleid?

POPULAIRE / AUTORITATIEVE BRONNEN

Open het bronmateriaal.

IETFRFC 9111: HTTP Caching ↗

Legt freshnes, validatie, cache-directives, invalidatie en limieten voor gevoelige informatie uit.

Beoordeeld 2026-09-27
IETFRFC 8246: HTTP Immutable Responses ↗

Definieert immutable caching, het toepassingsgebied en corruptieoverwegingen.

Beoordeeld 2026-09-27
MDN Web DocsHTTP caching ↗

Praktische richtlijnen over validators, 304's, personalisatie en cache-busting.

Beoordeeld 2026-09-27
MDN Web DocsCache-Control header ↗

Referentie voor max-age, s-maxage, no-cache, no-store, private, public en must-revalidate.

Beoordeeld 2026-09-27
MDN Web DocsETag header ↗

Legt entity tags, If-None-Match en 304-validatie uit.

Beoordeeld 2026-09-27
web.devPrevent unnecessary network requests with the HTTP Cache ↗

Praktische richtlijnen over geversioneerde URL's, validators, beleidsregels en deployment.

Beoordeeld 2026-09-27

Bronbeleid. Dit artikel gebruikt open standaarden en eersteparts technische documentatie. Het vermijdt niet-ondersteunde prestatieclaims en scheidt HTTP-regels van platformspecifieke configuratie.

SNELLE TOELICHTINGEN

Veelgestelde vragen.

Betekent no-cache dat een browser de pagina niet mag opslaan?

Nee. no-cache staat opslag toe maar vereist succesvolle validatie met de origin vóór hergebruik. Gebruik no-store alleen wanneer de response niet opgeslagen mag worden, met inachtneming dat no-store op zichzelf geen volledige privacywaarborg is.

Moet elk statisch bestand een cachelevensduur van één jaar krijgen?

Nee. Een max-age van één jaar is alleen passend wanneer de URL's bytes gedurende die periode niet zullen veranderen, meestal omdat het URL fingerprinted of geversioneerd is. Mutable bestanden met hetzelfde URL hebben een kortere of validatie-eerst policy nodig.

Kan een CDN-purge een browser caching-fout oplossen?

Het kan een beheerde gedeelde-cachekopie verwijderen, maar het kan niet elke browser dwingen een fresh response te vergeten. Publiceer een nieuw geversioneerd asset-URL en werk HTML-verwijzingen bij; gebruik vervolgens het rollbackplan om een compatibele generatie te herstellen indien nodig.

Status Is UP Editorial Team · Uptime Enablement Editors

Beoordeeld door Reviewer webperformance en release engineering. Gepubliceerd 2026-09-27; bijgewerkt 2026-09-30.