Aktivera cachning av statiska filer

Många av filerna i din webbplats ändras nästan aldrig. Bilder, teckensnitt, stilmallar och javascript är några exempel på statiska filer som kommer ha exakt samma innehåll under lång tid.

I din webbläsare finns en funktion som kallas för cache. Där lagras alla hämtade filer temporärt medan de används av webbläsaren. Du kan berätta för webbläsaren att vissa filer inte kommer att ändras och att den därför kan spara filen i cachen för återanvändning. Nästa gång webbläsaren behöver filen kan den använda den redan nedladdade filen, istället för att ladda ner en ny version över internet.

Att kunna använda lokala filer från webbläsarens cache går mycket snabbt, belastar inte din server och drar inte datatrafik från din besökares mobila bredband.

För att aktivera cachning av statiska filer behöver du göra ett par inställningar för din webbsajt på din webbserver. Hur du gör skiljer åt mellan olika miljöer, men gemensamt för alla är att du redigerar en konfigurationsfil i en vanlig texteditor. Ta också en titt för att försäkra dig om att din konfigurationsfil inte redan innehåller ett liknande block.

Internet Information Services (IIS)

I IIS lägger du till följande rader i din web.config-fil:

<system.webServer>
<staticContent>
<clientCache cacheControlMaxAge="365.00:00:00" cacheControlMode="UseMaxAge"/>
</staticContent>
</system.webServer>

Koden ska placeras inom <configuration> och </configuration>. Detta gör att alla statiska filer, som t ex bilder, css, javascript, med mera cahcas i 365 dagar, 0 timmar, 0 minuter och 0 sekunder.

Apache

I Apache lägger du till följande rader i din .htaccess-fil:

<FilesMatch "\.(png|jpg|jpeg|gif|svg|ico|woff|eot|ttf|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 year"
</FilesMatch>

Dessa rader betyder på svenska ungefär ”filer som matchar filändelserna .png eller .jpg eller .gif ska cachas i ett år”.

NGINX

I NGINX lägger du till följande rader i din conf-fil:

location ~* \.(png|jpg|jpeg|gif|svg|ico|woff|eot|ttf|css|js)$ {
expires 365d;
}

Dessa rader betyder på svenska ungefär ”filer som matchar filändelserna .png eller .jpg eller .gif ska cachas i 365 dagar”. ”365d” styr hur länge filerna får cachas. Du kan använda heter som ”s” (sekunder), ”m” (minuter), ”h” (timmar) och ”d” (dagar).

Att rensa cachen

Nu har du snabbat upp din sajt genom att låta webbläsaren cacha filer i ett år. Men hur gör du när du faktiskt behöver ändra en fil? Hur berättar du för webbläsaren att den faktiskt behöver hämta en ny version istället för att använda versionen den redan har? Poängen med cachen är ju just att webbläsaren inte ska fråga din server efter filen.

I programmeringsvärlden brukar man skämta om att det finns bara två saker som är svårt med programmering: Att döpa saker och att tömma en cache.

För att komma runt detta brukar man se till att filnamnet har ett versionsnummer i sig. Ett enkelt sätt att lösa det är att ha en ”querystring” med versionsnummer på filnamnet, så att istället för att bara skriva logo.png, skriver du logo.png?v=1 och när den ändrats byter du till logo.png?v=2. Detta gör att webbläsaren inte längre tycker att den har just den versionen av filen och hämtar den senaste från webbservern.

Testa

För att testa att dina förändringar aktiverats kan du använda Sajtkollen och se att du förhoppningsvis fått ett högre betyg på avsnitt för cachning.