On this blog I use several stylesheets to keep things (somewhat) organised. This allows me to upgrade my coderay.css file or my Tripoli CSS stylesheets without having to reorganise everything.
But, just because I like to organise my code into managable chunks, doesn’t mean that I have to degrade the performance of the site for the visitors.
To help me improve performance by both reducing total transfer size and amount of requests for stylesheets, I’ve added Juicer to the mix.
Juicer requires a few gems and Java (as it uses YUI Compressor internally to minify stylesheets), but if you’re still reading, this should not be a problem for you.
The stylesheets
Firstly, I’ve created two driver stylesheets, that is responsible for importing the other stylesheets in the correct order.
First, the stylesheet for modern browsers.
1 /* master.modern.css - holds stylesheets for modern browsers */
2 @import url(/stylesheets/tripoli/tripoli.simple.css);
3 @import url(/stylesheets/coderay.css);
4 @import url(/stylesheets/base.css);
Second, the stylesheet older versions of Internet Explorer
1 /* master.ie7.css - loads stylesheets for IE7 and lower */
2 @import url(/stylesheets/tripoli/tripoli.simple.css);
3 @import url(/stylesheets/tripoli/tripoli.simple.ie.css);
4 @import url(/stylesheets/coderay.css);
5 @import url(/stylesheets/base.css);
6 @import url(/stylesheets/ie7.css);
Steve Souders has explained that you should not use @import in your stylesheets, as it will block parallel downloads. But, don’t worry, Juicer will combine all of these stylesheets into one and all will be well in the world.
The rake file
To control the behaviour of Juicer, I’ve created a little rake task.
1 # juicer.rake
2 namespace :juicer do
3 namespace :merge do
4 desc 'Merges stylesheets'
5 task :stylesheets do
6 sh 'juicer merge content/stylesheets/master.modern.css -o content/stylesheets/master.modern.min.css --document-root content --force'
7 sh 'juicer merge content/stylesheets/master.ie7.css -o content/stylesheets/master.ie7.min.css --document-root content --force'
8 end
9 end
10 end
You should update the rake task with the correct paths and filenames for your site.
Updating the Sitefile
In order for Webby to generate these new files, you will need to update your Sitefile, and instruct Webby to run the merge task with every build. To do this you simply add a dependency for the built-in build tasks.
1 # add these lines to your Sitefile
2 desc "Build the website"
3 task :build => [:configure_basepath, 'juicer:merge:stylesheets' ]
4
5 desc "Rebuild the website"
6 task :rebuild => [:configure_basepath, 'juicer:merge:stylesheets' ]
7
8 desc "Continuously build the website"
9 task :autobuild => [:configure_basepath, 'juicer:merge:stylesheets' ]
Using the new merged stylesheets couldn’t be easier, you just reference them by their new names master.modern.min.css and master.ie7.min.css.
Results
For this blog, the result is ~2kb and 2 or 4 connection requests saved, if your site has bigger and/or more stylesheets, you’re going to see even better results.
As an added bonus, Juicer also adds cache buster suffixes to all image references in the stylesheets (this is configurable), so now I can safely turn on expiration headers for these images and my (repeat) visitors can enjoy an even faster site.