performance loading js files

Question

Hi

I was wondering what would be best. I have different JS functions, for instance I have the accordion plugin, a script for the contact page. But I only use each script on one page e.g. 'the faq page'uses the accordion JS but not the contact JS obviously. This along with many other examples (my js dir is 460kb big in total, seperated in different files)

So what's best, put all the scripts in one file and load it in my header template, or seperate them into about 10 different files and load them when I need them?

Regards

Answer 1

You want to place them all in one file. It cuts down on the number of trips to the server and reduces overhead.

Placing them at the end of the document is generally recommended as that way the rest of the page downloads beforehand.

Here's a link describing the best practices by Yahoo on where to include scripts and about minimizing trips to the server. http://developer.yahoo.com/performance/rules.html

Answer 2

The "best" isn't usually a one-size-fits-all.

Merging the files together means fewer connections and (assuming your cache settings are correct) it will allow your first page view to take a hit and then all other pages would benefit.

Splitting them out gives you more granularity in terms of caching but it comes at a cost of many connections (each connection has an overhead associated with it). Remember that many browers only make 2 connections to any given hostname. This is an old restriction imposed by the HTTP spec.

Usually "best" is finding the way to chunk them into large enough groups that for any one page you aren't downloading too much extra but you are able to share a lot between pages. Favor fewer groups over worrying about downloading too much.

Whichever way you go, make sure you compact your scripts (remove whitespace, comments, etc.), serve them up GZipped or Deflated, and set your expire headers appropriately so that a user isn't downloading the same scripts over and over.

Answer 3

I would group it into a couple or 3 files based on what is used everywhere or only somewhere.

Also, with that much code, you should look at minifying the code to reduce the download time. I've used the YUI Compressor before, does a good job and is easy to integrate into a build file.

Answer 4

Combine them into a single file - it will mean fewer HTTP requests.

However, it is very important that you are setting expiry headers on your CSS and JS files. You should always have these headers set, but it's especially bad if you're forcing the user to re-download the contents of 10 files each page load.

Answer 5

If you really only use each function on a single page, you won't gain much by combining them into a single file. It'll take longer to load whatever page a visitor hits first, but subsequent pages will load faster.

If most scripts are only used on a few pages, then it might make sense to figure out which pages visitors are likely to hit first (main page, plus whatever's bookmark-worthy) and produce combined js files for those pages, so they load as quickly as possible. Then just load the less-used scripts on whatever page they're used.