Leverage browser caching is een van de makkelijkste methodes om de performance van je website flink te verbeteren, en het is platform onafhankelijk, het werkt net zo goed voor Joomla als voor Wordpress, Drupal of andere CMS'en. Het klinkt heel ingewikkeld, maar dat is het helemaal niet, en de risico's voor functionaliteit van je website zijn ook gering, dus er zijn eigenlijk geen goede redenen om het niet te gebruiken. Ik heb de term onvertaald gelaten omdat je hem zo vaak in deze vorm voorbij ziet komen in bijvoorbeel online performance testjes. Leverage Browser caching betekent eigenlijk: Browser caching toepassen. Je hebt de term browser caching mogelijk ook gezien in de systeem - Paginacache plugin, maar dat is iets heel anders.

Wat de techniek eigenlijk inhoudt: plaats wat code in je .htaccess bestand, en zet daar een houdbaarheidsdatum in (minuten tot maanden) voor bestandstypes als plaatjes, CSS, Javascript, enzovoorts. Als een bezoeker deze bestanden ooit al heeft gedownload bij het eerder bekijken van de bereffende website, worden deze bestanden bij een volgend bezoek niet van de server gedownload, maar worden de lokaal op zijn PC opgeslagen bestanden gebruikt (mits de houbaarheidsdatum niet is overschreden). Deze bestanden hoeven dan niet opnieuw gedownload te worden.

Natuurlijk bestaat altijd het risico dat een van de bestanden toch aangepast is voor de houdbaarheidsdatum is verstreken. Stel bijvoorbeeld dat je CSS wat aangepast is. Tot de bezoeker een harde refresh doet zal diegene het oude CSS bestand zien, en een andere opmaak. Of dit een probleem is valt te bezien. Vaak wijzigt je CSS zelden nadat je site live is. Mocht dat echter wel gebeuren, dan kun je eventueel met zogenaamde versienummers werken (oudecss.css?versie=2), maar daar ga ik nu niet verder op in.

Joomla Hosting tip: Siteground

Joomlaseo.com laadt in 0.5 - 1 seconden en heeft een Pingdom score van 100%!!! Daarom bevelen we Siteground hosting aan. Snelle servers, goede support, gratis SSL, etc. En niet duur...

 

Zet expire headers in je .htaccess

Om Leverage Browser Caching te activeren moet je dus weer je .htacces betsand aanpassen. Check of het bestandje in je hoofdmap staat. Staat er alleen nog maar een htaccess.txt dan kun je het renamen (let wel op consequenties voor URL herschrijven). Mocht je Wordpress gebruiken, dan staat het bestand warschijnlijk in je hoofdmap. Eerst plaatsen we een aantal regels die technisch gesproken niet bij browser caching horen, maar wel sterk bij de uitvoering ervan:

  • ETag: Informeer de browser dat zaken die al geladen zijn niet hoeven te worden gedownload als aan de latere voorwaarden wordt voldaan
  • Expires headers: vergelijkbaar aan ETAG, maar dan specifiek voor bestandstypen
  • AddOutputFilterByType DEFLATE: verkleint code door witruimte te verwijderen

Vervolgens plaatsen we de rest van de code, regel per regel voor alle bestandstypes die je gebruikt op je site:

<IfModule mod_expires.c>
  FileETag MTime Size
  AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month "
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType application/x-javascript "access plus 1 month"
  ExpiresByType image/x-icon "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
</IfModule>

Joomla Hosting tip: Siteground

Joomlaseo.com laadt in 0.5 - 1 seconden en heeft een Pingdom score van 100%!!! Daarom bevelen we Siteground hosting aan. Snelle servers, goede support, gratis SSL, etc. En niet duur...

 

Dit is een simpel voorbeeld, en je kunt het flink uitbreiden. Zeker als je bijvoorbeeld nog weer andere bestanden gebruikt als .mpeg, .woff, enzovoorts.

Let wel op dat je server de Apache module mod_expires moet ondersteunen. De bovenstaande code is daarom voor de zekerheid binnen een if-statement gezet om te voorkomen dat je site crashed als het niet wordt ondersteunt (en aanstaat). Alle goede hosts ondersteunen dit, als ze het toch niet ondersteunen zit je bij een hopeloos ouderwetse webhost en raad ik je aan te verhuizen. Ook op je localhost test-omgeving is het vaak niet ondersteunt, en daarom is het altijd handig om het if-statement wel te gebruiken.

Een nog veel uitgebreider voorbeeld (met ook andere functies, zoals security) vind te trouwens op docs.joomla.org. Maak voordat je deze wijzigingen uitvoert altijd een backup van je .htaccess bestand, en test uitgebreid naderhand. Doe tenslotte nog eens een snelheidstest. Je zult zien dat je flink wat winst hebt behaald.

Vermijd browser caching in development

Gebruik browser caching niet als je bezigf bent met het ontwikkelen van een website. Dan wil je je resources namelijk niet gecached hebben: wijzigingen in CSS, Javascript en plaatjes komen dan niet door. pas de code pas toe als je de website publiceert.