SiteKickr Web Development

Javascript Optimization Tip: Merging JS files

A major component of optimizing your client side scripts (JavaScript) is reducing the number of http connections required. In other words, reducing the number of individual scripts that are loaded with each page request.

So, for your home page, you might have:

<script type="text/javascript" src="default.js"></script>
<script type="text/javascript" src="home.js"></script>

This requires two http connections to load the two individual files. One script for code that is run on all pages, and one that is specific to the home page.

Instead, let's say we merge the home.js code into default.js, to produce only:

<script type="text/javascript" src="default.js"></script>

Then, in default.js, you can wrap your "home page only" code in a conditional, such as:

if (document.URL == 'http://www.mysite.com/') {
  // home page only code
}

In effect, you've traded two http connections for one http connection and a javascript conditional. This is a net gain in site load time and performance.