The Techjoomla Blog

Stay updated with all the latest happenings at Techjoomla. From news about the developments in your favourite extensions to Tips & Tricks about the Joomla CMS, Framework & Development.

Posted by on in Joomla Development
  • Font size: Larger Smaller
  • Hits: 3299
  • Comments

Rolling out CSS/JavaScript changes with heavy browser caching

Most of us have been in this scenario. We have spent hours tweaking our Joomla site using numerous tools like Google Page speed, YSlow and made those adjustments to shelve those important milliseconds from page load times. You've added gzip, Joomla caching and also enabled month long caching via the .htaccess file. The site now works fast. Cool!

A few days later you want to make some CSS updates, add some nice effects. You do that and upload the files. Imagine the mess when your users dont receive the updated CSS. This is a common scenario, becuase depending on how you wrote the caching code in htaccess users' browsers won't even bother to ask for a new CSS till that 1 month is over. A way around this is to change the CSS paths everytime you update the CSS. So
templates/beez20/css/template.css
becomes 
templates/beez20/css/template_v1.2.css

Isn't that a pain ?

Not to worry. If you've been following our series about deploying Joomla sites with git, there's a way to maintain versions of your Joomla site, and the current deployed version gets written to a .htversion file. We use this to add a version number to your stylesheets. This way 
templates/beez20/css/template.css
becomes
templates/beez20/css/template.css?1.2
and later becomes
templates/beez20/css/template.css?1.3

So everytime you deploy, we append all the CSS & JS files with the deployed version number. After deploying v1.2 the CSS path will have ?1.2 so the browsers will request the file once. Then if you deploy v1.3 the path changes to ?1.3 and the file is requested again. Between the deployments the file remains cached with the users' browser.

All this is facilitated by the deploy-tools system plugin, which can be downloaded at - 

https://github.com/techjoomla/Joomla-Extensions/tree/master/plugins/system/deploytools

Rate this blog entry:
0
Trackback URL for this blog entry.

Ashwin is the Lead geek at Techjoomla. The CTO so to say :) Ashwin has been dabbling with Joomla since the Mambo days. He knows his way around PHP Frameworks - Wordpress, Drupal, Magento as well any kind of coding in general just as well as he knows Joomla. The Guy to go to when anyone is faced with a tech challenge, its also his job to make sure the code getting shipped is top notch !


Ashwin loves to travel, eat, cook and of course speak at Joomla Conferences! 

blog comments powered by Disqus