Webmove Blog

Content Expiration

In deel 1 van deze reeks over het verbeteren van de performantie van je website, zagen we drie vuistregels van web performantie:

• Reduceer het aantal http requests
• Verstuur zo weinig mogelijk
• Verstuur het zo infrequent als mogelijk

In deze blogpost gaan we dieper in op een techniek om data van de server naar de browser zo infrequent als mogelijk te versturen. Zoals bij http compressie is dit ook een maatregel op het niveau van de infrastructuur, meer bepaald de webserver.

Waarom Content Expiration?

Wanneer een bezoeker een webpagina op je website consulteert, slaat de browser bestanden zoals afbeeldingen, css en Javascript bestanden op de browser cache. Men zou verwachten wanneer de webpagina opnieuw wordt opgevraagd, de browser deze bestanden onmiddellijk laadt vanuit de cach, maar dit is helaas niet het geval.

De browser stuurt eerst een request naar de server om te controleren of de desbetreffende files in zijn cache niet gewijzigd zijn op de server. Indien dit het geval is stuurt de server de file opnieuw naar de browser, indien de file niet gewijzigd is antwoord de server met een 304 status code. Dit is hoe een server de browser te kennen heeft dat de inhoud van een file niet gewijzigd is.

Als de file niet gewijzigd is worden dus heel wat onnodige requests en responses verstuurt voor bestanden die onmiddellijk vanuit de browsercache geladen zouden kunnen worden.

Wat we in het nu volgende zullen doen is de browsercache beter benutten met behulp van content expiration.

Een voorafgaande test

Om het effect van het instellen van content expiration aan te tonen voer ik een Page Speed test uit op mijn website:

Afbeelding 1 Page Speed test voorafgaand aan het instellen van content expiration

De Page Speed Score is 91/100. Dit is hetzelfde als mijn vorige test toen ik http compressie had ingesteld (lees mijn blogpost over http compressie).

Content expiration instellen op een webfolder

Zoals je in afbeelding 1 kunt zien, geeft de Page Speed tool aan om browser caching in te stellen voor de webfolders 'css' en 'scripts'. Ik zal voor deze demo content expiration instellen op de 'css' folder:

1. Ik open IIS 7.5 en browse naar de css folder van mijn website
2. In het Functie Paneel dubbelklik ik op 'HTTP Response Headers'
3. In het Actie Paneel klik ik op de link 'Set Common Headers'
4. Het dialoogvenster 'Set Common HTTP Response Headers' verschijnt en ik vink 'expire web content' aan
5. In hetzelfde dialoogvenster kies ik het 'After' keuzerondje en vul 365 (dagen) in bij 'expiration period' (zie afbeelding 2)

Afbeelding 2 de content expiration headers voor de css folder worden ingesteld op 365 dagen

Test na het instellen van de content expiration headers

Als ik een nieuwe Page Speed test uitvoer op de homepage van mijn test site, stel ik vast dat de Page Speed Score gestegen is van 91/100 naar 96/100. Het indicator licht voor browser caching staat nu op groen en de suggestie om de css folder te cachen is verdwenen (zie afbeelding 3).

Afbeeling 3 Na het instellen van content expiration op de css folder is de Page Speed Score gestegen naar 96/100

Een nader onderzoek met Fiddler

Om een meer gedetailleerd overzicht te krijgen van het dataverkeer tussen mijn browser en de server gebruik ik Fiddler.

Vooraleer ik de content expiration header instelde op de css folder, kon ik in Fiddler verschillende 304 status codes zien voor de files in de css en scripts folder (zie afbeelding 4).

Afbeelding 4 Fiddler toon de 304 status responses van de server aan de browser

Zoals ik voorheen betekent een 304 status code dat de inhoud van het bestand op de server niet gewijzigd is.

Nadat ik de content expiration op de css folder heb ingesteld kan ik in Fiddler zien dat al de bestanden in deze folder een max-age header hebben van 31536000 seconden (zie afbeelding 5). Dit is uitgerekend, 365 dagen. De browser laadt deze bestanden nu direct vanuit de browsercache zonder eerst een request naar de server de sturen om te weten of dit bestand gewijzigd is op de server. Dit is de reden waarom de Page Speed Score gestegen is van 91/100 naar 96/100

Afbeeling 5 de bestanden van de css folder worden voor 365 dagen gecached (max-age=31536000)

Wat als mijn bestand op de server gewijzigd is?

De lezer kan zich afvragen wat er gebeurd als een gecached bestand gewijzigd is op de server. De browser zal in dit geval nog steeds het oude bestand vanuit de cache laden.

Een manier om de browser duidelijk te maken dat het bestand gewijgid is en dat hij een nieuw bestand moet cachen, kunnen we onze bestanden voorzien van volgnummers. De browser zal dan zien dat er nieuwe bestanden zijn, deze downloaden en ze opslaan in de browsercache.

Het is natuurlijk omslachtig om elk bestand een volgnummer te geven. Daarom worden verschillende bestanden meestal gebundeld in één bestand, dit gebundelde bestand krijgt dan een volgnummer. Het bundelen van bestanden is echter een onderwerp van een volgende blogpost.

Besluit

Door het verstandig aanwenden van content expiration headers op onze webfolders kunnen we ervoor zorgen dat de browser gecachete bestanden onmiddellijk laadt zonder voorafgaande request naar de server. Dit is niet alleen een grote verbetering voor de performantie van onze website, maar ontlast ook de server van onnodige werk en zorgt voor minder dataverkeer.

In de volgende blogpost bekijken we een andere techniek om de server minder te belasten, namelijk het gebruik van Content Delivery Networks.