Question

I read that concatenating and possibly gzipping a javascript file will make an application run faster, so I decided to give it a go.

I figured most of my pages (although not all) were downloading at least 1mb of javascript, so why not compress and aggregate it?

Well, it turns out I think the performance is worse than before. Firebug is reporting that the “DomContentLoaded” took 1.17s on any random page for the application. Is this at normal? Like whoa.

Basically my application javascript now aggregates all of the files for the site. Each file looks for a main id, and if it’s there, it runs some code. If not, it just goes the next function block.

I have put in a bunch of libraries along with my application code as well. Here are the libraries I’m using. Should I have aggregated these, or no?

<include>**/font/font.js</include>
<include>**/json/json2.js</include>
<include>**/jwplayer/jwplayer.js</include>
<include>**/underscore/underscore.js</include>
<include>**/jquery/jquery-1.7.1.js</include>
<include>**/jquery/jquery-ui-1.8.16.custom.min.js</include>
<include>**/jquery/jquery.cookie.js</include>
<include>**/jquery/jquery.jcrop.js</include>
<include>**/jquery/jquery.tmpl.js</include>
<include>**/jquery/farbtastic.js</include>
<include>**/simpleyui/simpleyui.js</include>
<include>**/audio-player/audio-player.js</include>
<include>**/tiny_mce/tiny_mce.js</include>
<include>**/jscharts/jscharts.js</include>

I think my big footprint is in jquery-1.7.1.js (100k), jquery-ui-1.8.16.custom.min.js (206k), jwplayer.js (83k), simpleyui.js (103k), jscharts.js (100k) and tiny_mce.js (186k). Those kb amounts are minified surprisingly.

I’ve experimented with gzipping the content on demand, but this actually makes it slower. I guess rackspace cloud’s cpus are not very fast? It adds a lot of time to the request. Turning off gzipping on demand seems to make things better.

EDIT: I can confirm that putting the javascript at the bottom of the page makes no difference. I can confirm that removing all of the libraries like jquery, audio-player, jwplayer, etc. takes a total of 1 seconds just by itself.

My application code (which is a lot more files, but less code overall probably) takes about .2 to .3 seconds.

I am 99% sure the problem has nothing to do with downloading now and a lot more to do with execution speed.

What would you recommend I do to improve the performance of my pages?

Answer 1

You can load only the javascript libraries you need on each page.

In my current project we are working on reducing reliance on outside javascritpt library dependencies by encapsulating components of functionality and passing them through a dependency manager that loads only the javascript libraries that are needed for each particular page (if a page has 3 modules then it only loads the libraries needed for those).

You can use this approach to get rid of a lot of needless requests for particular libraries.

Reduce reliance on outside libraries as much as possible.

In addition, we’ve taken measures to reduce reliance even on jQuery by converting our code to use DOM directly instead, for example by using document.getElementByID() and getElementsByTagName() instead of jQuery('#myId') or jQuery('table.myTableClass'). This has helped cut down some pages so that they use no dependencies at all, hence giving an incredible boost to their loading time.

Another example is that if you only need CSS selectors instead of the whole gamut of jQuery functionality you can use Sizzle which is the standalone CSS selector engine, thus cutting your 80+ KB of jQuery into only 4KB needed for Sizzle. I’m sure the same approach can be used with your other libraries to trim down a lot of unnecessary flab in your application.