BRAINFART

Introduction

It’s a good practice to use many small JavaScript and CSS files instead of one large JavaScript/CSS file for better code maintainability, but bad in terms of website performance. Although you should write your JavaScript code in small files and break large CSS files into small chunks, when a browser requests those JavaScript and CSS files, it makes one HTTP request per file. Every HTTP request results in a network roundtrip from your browser to the server and the delay in reaching the server and coming back to the browser is called latency. So, if you have four JavaScripts and three CSS files loaded by a page, you are wasting time in seven network roundtrips. Within the USA, latency is average 70ms. So, you waste 7×70 = 490ms, about half a second of delay. Outside USA, average latency is around 200ms. So, that means 1400ms of waiting. The browser cannot show the page properly until CSS and JavaScripts are fully loaded. So, the more latency you have, the slower the page loads.

How Bad is Latency

Here’s a graph that shows how each request latency adds up and introduces significant delay in page loading:

However, a better solution is to deliver multiple files over one request using some script (PHP, Perl etc.) that combines several files and delivers as one output. So, instead of putting many <script> or <link> tags, you just put one <script> and one <link> tag, and point them to your script. You tell the handler which files to combine and it delivers those files in one response. This saves browser from making many requests and eliminates the latency.

Here you can see how much improvement you get if you can combine multiple JavaScripts and CSS into one.

Solution

In a typical web page, you will see many JavaScripts referenced:

<script type="text/javascript" src="http://www.domain.com/JScript/jquery.js"></script>
<script type="text/javascript" src="http://www.domain.com/JScript/jDate.js"></script>
<script type="text/javascript" src="http://www.domain.com/JScript/jQuery.Core.js"></script>
<script type="text/javascript" src="http://www.domain.com/JScript/jQuery.Delegate.js"></script>
<script type="text/javascript" src="http://www.domain.com/JScript/jQuery.Validation.js"></script>

Instead of these individual <script> tags, you can use only one <script> tag to serve the whole set of scripts using your script:

<script type="text/javascript" src="Combiner.php?s=jQueryScripts&t=text/javascript&v=1" ></script>

We can improve this solution a bit and use .htaccess to rewrite some rules:

<script type="text/javascript" src="http://www.domain.com/JScript/jquery.js,jDate.js,jQuery.Core.js,jQuery.Delegate.js" ></script>

and .htaccess rules:

	RewriteRule   (.*\.css)$ cache_combine.php?files=$1 [L]
	RewriteRule   (.*\.js)$ cache_combine.php?files=$1 [L]

One of such free source scripts you can download on http://rakaz.nl/extra/code/combine.