I've done some searching on this but can't find any sort of best practice or recommendation -- and perhaps that's because there isn't any. I'm using all sorts of jQuery plugins on my site, in addition to TinyMCE and some other plugins, and my site's specific JS file. On top of that, I have three stylesheets ..... and there's more coming as the site grows!

Is there any sort of 'limit' or anything you should keep an eye out for including scripts in the tag? I know that each one is another HTTP request that needs to be completed, but if they are all minified and as small as can be, will there be issues?

    <link rel="stylesheet" type="text/css" href=".css" />
    <link rel="stylesheet" type="text/css" href=".css" />
    <link rel="stylesheet" type="text/css" href=".css" />

    <!--[if gte IE 7]>
        <link rel="stylesheet" type="text/css" href=".ie.css" />
    <![endif]-->

    <script type="text/javascript" src=".js"></script>
    <script type="text/javascript" src=".js"></script>
    <script type="text/javascript" src=".js"></script>
    <script type="text/javascript" src=".js"></script>
    <script type="text/javascript" src=".corner.js"></script>
    <script type="text/javascript" src=".jeditable.js"></script>
    <script type="text/javascript" src=".qtip.js"></script>

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

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

I've done some searching on this but can't find any sort of best practice or recommendation -- and perhaps that's because there isn't any. I'm using all sorts of jQuery plugins on my site, in addition to TinyMCE and some other plugins, and my site's specific JS file. On top of that, I have three stylesheets ..... and there's more coming as the site grows!

Is there any sort of 'limit' or anything you should keep an eye out for including scripts in the tag? I know that each one is another HTTP request that needs to be completed, but if they are all minified and as small as can be, will there be issues?

    <link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/redmond.css" />
    <link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/style.css" />
    <link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/jqueryFileTree.css" />

    <!--[if gte IE 7]>
        <link rel="stylesheet" type="text/css" href="http://mysite.com/scripts/style.ie.css" />
    <![endif]-->

    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.js"></script>
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery-ui.js"></script>
    <script type="text/javascript" src="http://mysite.com/assets/js/jqueryFileTree.js"></script>
    <script type="text/javascript" src="http://mysite.com/assets/js/jqminmax.js"></script>
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.corner.js"></script>
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.jeditable.js"></script>
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.qtip.js"></script>

    <script type="text/javascript" src="http://mysite.com/assets/plugins/tinymce/tiny_mce.js"></script>

    <script type="text/javascript" src="http://mysite.com/assets/js/latitude.js"></script>

• javascript
• css
• xhtml

• Isn't the download time all the limit that matters? What are you asking? How slow a download is too slow? – S.Lott Commented Jul 27, 2009 at 16:00
• Yes, the download time is all that matters. But I don't know of a way to combine the JS files easily and was wondering what other people's thoughts were on how many is "too many." – Nathan Loding Commented Jul 27, 2009 at 16:04
• 2 The UNIX 'cat' utility is a good way to combine JS files. – Quentin Commented Jul 27, 2009 at 16:06
• Heh... If you have to ask, it's too many. ;-) – Shog9 Commented Jul 27, 2009 at 22:58

6 Answers 6

Not good!

I would reccomend combining these files into one js and one css using a script before deploying to live. There are many reasons why this is not good, see the link below for more info:

http://developer.yahoo.com/performance/rules.html

Edit: To answer further No, there are no limits on the number of files, but most browsers can only have 2 connections (for a site) to a web server at any one time and thus will load your js 2 files at a time. The YSlow plugin for firefox will show you a graph of how your files are being downloaded.

If you are using ASP.NET this codeproject article might help, if you are on linux then this might help.

Edit: A simple batch file on windows (to plug into your build tools) would be

@echo off
copy file1.js + file2.js + file3.js merged.js /b

Browsers have a limit to the number of concurrent requests to a domain, so they can slow down the loading of other items in your page. For example, IE8 has a limit of 6 concurrent connections, and IE7 has a limit of 2.

I'd recommend combining the files you host locally, referencing others externally (e.g. on Google), and potentially moving others to the bottom of the page so they don't delay load.

You can combine scripts with a lot of online tools, like jsCompress. It's got an "Upload Files" tab, so you can just upload all your js files and it'll compress and minify.

There are also server-side utilities that will do that for you. You don't say what server-side technology you're using, but for instance in the PHP world you can use Minify.

If it helps you feel better many other sites are "loaded" like that and js files are cached pretty much by all modern ( and even old ) browsers. One thing that might help would be linking your jquery file to one hosted on the googleapis site, because there could be a chance that some other site is linking to the same jquery file hosted there and it's already in their cache:

http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

Your web server should already optimize files by automatically enabling gzip compression, but double check to make sure.

The more CSS and JS files you reference on a page the longer it'll take to load. It's much better to combine them into as few files as possible.

I don't know if there's exists a good answer for this kind of question, but if you're interested in optimization, there's a whole number of them done by Yahoo!: http://developer.yahoo.com/performance/rules.html.

Personally, i tend to ignore most of those rules, simply because the kind of things i'm building aren't all that big.

Google Page Speed is your friend. Seems to be basically YSlow on steroids.