In a previous post titled 17 rules of speed optimisation I discussed the importance of page load speed in terms of both user experience and SEO. One of the rules of speed optimisation is reducing the number of http requests. Before delving into the technical side of things I thought it would be beneficial to explain what an actual “http request”.

HTTP or Hypertext Transfer Protocol is a request and response protocol which allows your computer to send a request for a file to a particular server, the server then sends back a response along with the contents of the requested file. If the requested file does not exist, the server will only send a “response code” indicating the file doesn’t exist. The standard response code for a non existing file is an HTTP 404 or Not Found error message. For a complete list of standard http response code please click here.

It is also important to understand Round-trip time or RTT. RTT is the time taken for a your browser to send a request and the server to send a response back to your browser excluding the time it takes to fetch actual data. Basically, if you reduce the number of HTTP request you are effectively reducing RTT.

Lets look at the following problem scenario, home.html is requesting 6 different JavaScript files in the following order.

<script src=”http://www.domain.com/js/jquery.min.js” type=”text/javascript”></script>
<script src=”http://www.domain.com/js/jquery.cookie.js” type=”text/javascript”></script>
<script src=”http://www.domain.com/js/my-1.js” type=”text/javascript”></script>
<script src=”http://www.domain.com/js/jquery.cycle.all.2.72.js” type=”text/javascript”></script>
<script src=”http://www.domain.com/js/jquery.prettyPhoto.js” type=”text/javascript”></script>
<script src=”http://www.domain.com/js/jquery.jcarousel.min.js” type=”text/javascript”></script>

This means that every time a new client requests home.html, it will make 6 http requests and 6 RTTs just to load the list JavaScript resources. This could cause latency, so what if we were able to combine all the JavaScript sources into one file? Combining our the JavaScript resources will significantly reduce the number of HTTP requests and as a results the number of RTTs as explained previously.

There are a few different way of suturing  JavaScript & CSS resources, this post will focus on Minify. Minify is an excellent PHP5 tool that allows you to combine, minify and cache JavaScript and CSS files dynamically.

Prerequisites:

1. FTP Access

2. PHP 5

As mentioned above Minify is a PHP5 application, you can only use it in a PHP5 environment. Some hosts allow you to view what version of PHP your server is running through your web server panel. Good hosts will allow you to switch between different environments. Don’t switch PHP environments if you are not sure what your website is configured for as it could affect some functionalities of your website.

If you don’t have access to your web panel, you can still find out what PHP version your site is hosted on if you have FTP access. Simply create a file called phpinfo.php and add the following inside it:

<?php phpinfo(); ?>

Save the file and upload it on your server. Upon requesting the phpinfo.php, the server will output information about PHP version, compilation options, extensions and etc.

Note: phpinfo() can also be used as a debugging tool because it contains all EGPCS (Environment, GET, POST, Cookie, Server) data.

Should you have PHP5 running on your server, you are set to take advantage of Minify.

Installation:

1. Download Minify from here.

2. Unpack the archive file using your favourite tool. I am a big fan of 7Zip.

3. Upload the “min” folder indicated below to your server i.e. domain.com/min. I use FileZilla.

4. Point your browser to the location of “min” folder on your website.

5. You will see the following page:

NOTE: The first time you use Minify you will be prompted with the following message:

Note: Please set $min_cachePath in /min/config.php to improve performance.”

Just open config.php located in /min/config.php and go to line 43. By default this is commented out, un-comment line 43 and set the path to your cache which by default should be “/tmp”. You then need to create “tmp” manually and chmod it to 777. If you are using fileZilla, simply right click on the folder and type in 777 or select all options for “tmp” directory.

6. Add all your files one by one to the list and make sure they are in the right order. Don’t worry if you have not listed them in correct order though, because the tool allows you to rearrange the order of files.

7. Once all your JavaScript files you are listed you can then click on “update”. This will output a single script tag which enlists all your JavaScript files in order. All you have to do now is add that to your header and you are off!

If you want to take this a step further then you can hide the comma separated JavaScript files appearing inside the <script> tag by using a keyname.

For example:

<script type=”text/javascript” src=”<a href=”http://cdn2.rocketmill.co.uk/min/g=rocketmill-js” target=”_blank”>http://cdn2.rocketmill.co.uk/min/g=rocketmill-js</a>”></script>

rocketmill-js replaces all the comma separated files as a keyname, this looks much more cleaner.

Caution:

Minify would leave your JavaScript files unmodified if:

  • the filename ends with -min.js or .min.js (it will however still gZip them)
  • the script contains syntax like + ++a. Minify’s JSMin port can’t handle this syntax and assumes it’s a script already minified by Closure Compiler.

Don’t minify all your JavaScripts files and use them globally on your website. There might be instances where a certain JavaScript file is only needed in a single or a selected set of pages. Try isolating such files and don’t minify them because you won’t need those files globally, request them individually and it will cost your less in terms of load time and bandwidth.

Furthermore, in some instances you might want to load a certain file after the document has been loaded. You therefore need to isolate the file as you will need to request them just before </body>. Basically, think about the structure of your website and every page’s dependency. If you are working on a large site it might be worth using Visio to draw dependencies and staged requests and then minify your resources accordingly.