Bloggen

...om livet bag teknikken

Med nogle få optimeringer af sin .htaccess fil kan man udnytte browseren til at cache udvalgt indhold fra hjemmesiden i et givent interval. I praksis betyder det, at browseren instrueres i at gemme en lokal kopi af indholdet og derfor ikke skal lave en ny forespørgsel på indholdet for hver enkelt sidevisning der foretages.

Indeholder dit tema f.eks. 10 javascripts og 10 css filer, kan du derfor spare browseren fra 20 forespørgsler for hver enkelt sidevisning.

Hvis én forespørgsel tager 100 ms, kan du altså skære 2 sekunders loadtid af hver sidevisning, når først indholdet er cachet (gemt)!

Eksemplet nedenfor forudsætter at Apachemodulet 'mod_expires' er installeret og aktiveret på din webserver.

 

 

Billed caching med .htaccess

Koden herunder fortæller browseren hvad den skal cache og hvor længe.
Placer koden i .htaccess filen i roden at dit site.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/x-icon "access 1 year"
</IfModule>
## EXPIRES CACHING ##

 

Man kan også cache andre filtyper vha. .htaccess:

ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"

 

Endeligt kan man også definerer et standard interval der gælder for alle andre filtyper end eksplicit angivet:

ExpiresDefault "access plus 5 seconds"

Note: Husk at have ftp adgang til webserveren når du redigerer i .htaccess - Hvis en regel ikke virker eller der bliver skrevet noget forkert, bliver websitet utilgængeligt!

 

 

Indstil cache tiden

Tiden som indhold skal gemmes i angives i en tidsperiode på samme linie som typen. F.eks. betyder "access 1 month" at indholdet skal gemmes i 1 måned efter det er besøgt (dvs. en måned ad gangen). 

Man kan ligeledes bruge andre engelske termer til at tweake tiden: "1 year", "1 month", "1 week", etc. 

 

 

"Generelle" problemer med browsercaching

Ændrer man i en fil som en browser allerede har gemt, kan det være svært at fortælle browseren at den hente indholdet på ny igen. Vi har jo instrueret den i at gemme indholdet!

Vær derfor varsom med hvad der skal caches og hvor længe det skal caches. Et år kan være lang tid at vente på nyt indhold ... ;)

 

Brug semantisk navngivning

En mulig løsning på problemet med caching, kan være at navngive sine filer forskelligt når/hvis de skal opdateres.

I stedet for at bibeholde filnavnet på det ændrede billed, kan du blot kalde det noget andet. På den måde er det et nyt billed for browseren og den vil derfor ikke have en cachet kopi.

Ligeledes kan man bruge en simpel nummerering på sine stylesheets og javascripts, eksempelvis: custom_1.css -> custom_2.css -> osv.

 

 

Test din cache

Vi anbefaler en minimums cachetid på en uge for dynamisk indhold, men gerne helt op til et år for statisk indhold der ikke ændrer sig. 

De fleste moderne browsere har nogle gode værktøjer til at debugge med, men man bør altid sammenholde resultatet med webserverens logfiler (access_log). Kun på dén måde kan man være sikker på cachen virker korrekt.

Husk dog: Det er ultimativt op til den enkelte browser (og dens plugins) hvor længe den vil cache indholdet.

 

 

Læs mere i guiden til teknisk mobiloptimering:

 

Janich Rasmussen
Om forfatteren: Janich Rasmussen

Problemknuser, nørd og stifter af CGOnline.dk - Løser alt fra lavpraktisk opsætning til advanceret performance optimering.

Har tidligere arbejdet for bl.a. Eniro, Geodatastyrelsen & Dealsales.

Involveret i flere Open Source projekter, herunder Joomla som Janich har elsket at været med til at udvikle og bruge siden 2006.