Menu
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>
579
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.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
