The Bug Genie team blog

What's cooking behind the scenes of The Bug Genie

New in 3.1: Javascript and CSS optimization and compression

leave a comment »

A new feature just added to The Bug Genie 3.1 is support for compressing and optimizing the CSS and JS which is downloaded as part of a page. The Javascript alone is huge, nearing a massive 400KB of data! However, now with integration of another open source project, Minify, The Bug Genie automatically takes all CSS and JS which is requested on a page, and does some magic.

So how does it work?

Well it all starts with some functions in the internals of The Bug Genie, which are used to specify Javascript and CSS files to load on a page. We use these functions so unnecessary code isn’t loaded (for example, the admin js is very large and is often unneeded, so we don’t load that unless we are on a page that needs it). However, this is where things change. The list of requested scripts is turned into a string of files, separated by commas, and then encoded with base64.

This is sent to a special url, along with the type of content we are decoding (js/css), and then our Minify wrapper is called. This wrapper decodes the list of files, and turns it into a format that Minify will understand. It then runs it through Minify, and sets the right output headers (such as content-type), so that in effect this special URL, if you were to view it in your browser, just outputs the optimized JS code. Think of it as a virtual JS script.

Minify also does some other magic here, along with the optimization and gzip compression. By comparing when the data was last changed, vs the date of the data in your browser’s cache, we often find that your browser’s cache is up to date! If this is the case, Minify returns an alternate set of data (setting the 302 Not Modified HTTP status code), along with no actual content for the script. Because of the 302 code, the web browser knows to look in its cache instead, saving even more bandwidth. If the cache is up to date, there is literally no code downloaded. And, of course, if the scripts change on the server side, the timestamps will change so that the browser is out of date, and the scripts reloaded.

Naturally, we do the same for CSS, though we run Minify again with a separate list, as combining CSS and JS is just asking for trouble.

So how much space do I save?

None locally, though there are massive bandwidth improvements – meaning that it’s easier on your pocket (if you pay by usage), plus you and your users spend less time downloading. We performed some tests to see how much data was downloaded when viewing the index page, when not logged in:

  • Without optimization: 397.6KB
  • With optimization (cold cache): 65.2KB (reduction of 83.6%!)
  • With optimization (hot cache): About 0B (reduction of 100%!)

As you can see, these are massive reductions which are bound to help!

This functionality is available in Springloops now, though we are still tweaking it to make sure that the optimization is spot on! In addition, there is still work to do, as there is a lot of duplicated code in the Javascript which can be removed, which will hopefully lead to further improvements soon!

Written by lsproc

April 19, 2011 at 09:47

Posted in The Bug Genie 3.1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: