rob.cogit8.org

Reducing HTTP requests using make

After reading the article, High Performance Web Sites: Rule 1 - Make Fewer HTTP Requests, I experimented with concatenating 10 Javascript files into 1 to see what performance gain that would provide.

At work we're using YUI which separates their .js files into modularized chunks so you use what you need. I took a cue from mootool's download page and from the above article and thought that I could save some page load time and HTTP requests by concatenating the .js files into one big "all.js" file in the same order that I was already loading them in the HTML header.

Here's my Makefile:

# Makefile to concatenate all JS files
#
all:    joinJS

joinJS:
        cp swfobject.js all.js
        cat yahoo/yahoo-min.js >> all.js
        cat event/event-min.js >> all.js
        cat dom/dom-min.js >> all.js
        cat dragdrop/dragdrop-min.js >> all.js
        cat animation/animation-min.js >> all.js
        cat container/container-min.js >> all.js
        cat connection/connection-min.js >> all.js
        cat utilities/utilities.js >> all.js
        cat site.js >> all.js

What I did was drop that into my media/js folder and ran "make" from the command line. It built all.js for me. Each time I update one of the original files I type "make" again.

My "testing" wasn't the most robust... I turned on Firebug and loaded the page with an empty cache and looked at the Net tab to see all the parts of the page loaded and a final time. I did that 5 times, each starting with an empty cache and averaged the times. I then changed my Django templates to load the single .js file instead of the 10, cleared the cache, and again tested 5 times. The end result was 1.9s faster load time presumably from the reduction of the overhead of 8 HTTP requests. For a page that was averaging about 3.5s per initial page load, that dropped it by 54%!

Even if it were 5% the minimal effort involved for me made it worth the effort.

In case anyone is interested, my actual results are as follows:

• 10 JS files: [4.06, 3.21, 3.35, 3.4, 3.48] / 5 = 3.50s
• 1 JS file: [1.65, 1.63, 1.60, 1.54, 1.67] / 5 = 1.62s

Update:

It looks like Ian Bicking has a Python based solution (see his example recipe) using Python's setup.py and setup.cfg. (via)