• Anthony Heddings
• July 29, 2020, 11:00am EDT

Elke browser van een gebruiker maakt gebruik van een ingebouwde cache om gedownloade objecten op te slaan, wat herhaalde bezoeken aan uw website aanzienlijk kan versnellen door vanaf schijf te laden in plaats van via het netwerk. Hoe u dit in Apache configureert, leest u hier.

Hoe werkt Caching?

De eerste keer dat een gebruiker verbinding maakt met uw site, downloadt hij alle statische bronnen die nodig zijn om de pagina te renderen, inclusief zaken als uw logo. Wanneer ze naar een nieuwe pagina navigeren, wordt uw logo uit het geheugen geladen in plaats van er opnieuw om te vragen. Dit versnelt de prestaties aanzienlijk en vermindert de belasting van uw webserver.

Dit is een client-side cache, maar veel sites zullen ook gebruik maken van een Content Delivery Network, of CDN. Een CDN is een netwerk van servers die voor uw belangrijkste webserver zitten, of “origin” server. Dit netwerk slaat uw pagina’s op in een cache, waardoor uw maximale bandbreedte toeneemt, de latentie voor toegang afneemt en de belasting van uw origin server sterk afneemt. Als u meer wilt weten over CDN’s, kunt u onze gids hierover hier lezen.

Cache-Control is een header die u uw webserver kunt configureren om toe te voegen aan alle uitgaande verzoeken, die de browser en CDN’s vertelt hoe ze uw inhoud moeten cachen.

Zekere pagina’s moeten nooit worden gecached door gedeelde caches zoals CDN’s. Als u dat doet, loopt u het risico dat de persoonlijke gegevens van een gebruiker aan anderen worden getoond. Als algemene regel geldt: als de pagina voor alle gebruikers precies hetzelfde is, zoals je startpagina, kun je hem cachen. Als er vertrouwelijke informatie op staat, kun je hem beter uit de cache verwijderen. Statische bronnen, zoals CSS en afbeeldingen, kunnen meestal voor iedereen worden gecached, vaak veel langer.

De hoeveelheid tijd die objecten in de cache doorbrengen is ook belangrijk. Verwezen als de Time-To-Live (TTL), de maximale leeftijd van uw gecachete bronnen bepaalt hoe lang het object in cache blijft voordat het ongeldig wordt gemaakt, en de gebruiker wordt gevraagd een nieuw object aan te vragen. Voor statische bronnen die niet veel veranderen, kun je zeer hoge TTL waarden instellen, meestal rond de twee jaar. Voor dingen die je misschien wilt updaten, zul je lagere TTL waarden willen instellen om te voorkomen dat verouderde bronnen te lang in de cache blijven.

Je kunt altijd bestandsnamen met versiebeheer gebruiken om een cache herladen te triggeren. Als je een nieuwe versie van een CSS style sheet uitbrengt, kun je het styles-1.0.1.css noemen, en de browser van de gebruiker (en eventuele CDNs ervoor) zullen het zien als een nieuw bestand dat opnieuw gedownload moet worden. Bovendien kunt u voor sommige CDN’s handmatige ongeldigmakingen uitvoeren om de bestaande cache te spoelen zonder bestandsnamen te wijzigen.

Hoe Cache-Control te gebruiken in Apache

Cache-Control heeft een paar opties:

• public – Mag door iedereen in de cache worden geplaatst, ook door browsers en CDN’s. Gebruik dit voor de meeste statische objecten.
• private – Bevat gevoelige gegevens die niet door CDN’s of reverse proxies kunnen worden gecached. De browser van de gebruiker kan het lokaal cachen. Gebruik dit voor de meeste geauthenticeerde pagina’s.
• no-cache – Ondanks de naam, schakelt dit de caching niet uit. De browser kan het antwoord nog steeds cachen voor de prestaties, maar moet bij de origin server controleren of er updates zijn voordat hij het gebruikt. Gebruik dit als u wilt dat de gebruiker elke keer opnieuw te valideren.
• no-store – Schakelt caching volledig. Gebruik dit alleen voor zeer gevoelige gegevens die niet twee keer moeten worden verzonden.

Extra, kunt u de no-transform directive toevoegen, die elke conversie uitschakelt die kan worden gedaan om de bron. Sommige CDNs comprimeren bijvoorbeeld afbeeldingen om de bandbreedte te verminderen. Deze directive schakelt dat gedrag uit.

In Apache moet u deze header handmatig instellen met de Header set directive, als volgt:

Header set Cache-Control "max-age=84600, public"

De max-age waarde wordt ingesteld in seconden, bijvoorbeeld max-age=300 voor een vijf minuten TTL, en max-age=63072000 voor twee jaar.

Je kunt deze directief in de root van je configuratie zetten om site-breed toe te passen, maar een betere methode is om de instellingen toe te passen afhankelijk van het type bestand. Om bijvoorbeeld een hoge TTL in te stellen voor de meeste statische media, kun je een FilesMatch blok gebruiken:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=63072000, public" </FilesMatch>

Als je een specifiek pad op de zwarte lijst wilt zetten zodat het niet door CDN’s wordt gecached, kun je een Directory blok gebruiken:

<Directory "/private"> Header set Cache-Control "max-age=300, private" </Directory> 

Of gewoon overeenkomen met een enkel bestand:

<File "protected.html"> Header set Cache-Control "max-age=300, private" </File>

De blokken met de meer specifieke overeenkomsten zullen voorrang hebben op algemene regex-overeenkomsten, maar u zult willen controleren of alles correct wordt ingesteld aan de ontvangende kant. U kunt dit controleren in de DevTools van Chrome, onder Network > Headers.

Als u alleen toegang hebt tot .htaccess-configuratie, kunt u nog steeds directory-matching gebruiken door een nieuw .htaccess-bestand te maken in elke subdirectory.

Gebruik Surrogate-Control om CDN Gedrag Direct Aan te passen

De Surrogate-Control header werkt precies als Cache-Control, maar geeft specifieke instructies voor CDNs en reverse proxies, in plaats van eindgebruikers. Op deze manier kunt u CDN’s vertellen om één ding te doen, maar verschillende richtingen naar de browser te sturen.

U zult deze header handmatig moeten instellen, op dezelfde manier als u Cache-Control instelt:

Header set Surrogate-Control "max-age=300, public"

U zult zeker willen testen met uw CDN om te verifiëren dat dit werkt- Surrogate-Control is vrij nieuw, en is niet universeel.