I was wondering, If I have, let's say 6 javascripts includes on a page and 4-5 css includes as well on the same page, does it actually makes it optimal for the page to load if I do create one file or perhaps two and append them all together instead of having bunch of them?
+15
A:
Yes. It will get better performance with fewer files.
There are a few reasons for this and I'm sure others will chime in as I won't list them all.
There is overhead in the requests in addition to the size of the file, such as the request its self, the headers, cookies (if sent) and so on. Even in many caching scenarios the browser will send a request to see if the file has been modified or not. Of course proper headers/server configuration can help with this.
Browsers by default have a limited number of simultaneous connections that it will open at a time to a given domain. I believe IE has 2 and firefox does 4 (I could mistaken on the numbers). Anyway the point is, if you have 10 images, 5 js files and 2 css files, thats 17 items that needs to be downloaded and only a few will be done at the same time, the rest are just queued.
I know these are vague and simplistic explanations, but I hope it gets you on the right track.
Ryan Cook
2009-02-07 00:04:50
If you're on a server with PHP or another scripting language, you can often concatenate Javascript and CSS via the scripting language (and minify it at the same time). Good idea for production environments for reasons listed above.
One Crayon
2009-02-07 03:02:56
Mm. interesting.
Paolo Bergantino
2009-02-14 14:51:20
+3
A:
One of your goals is to reduce http requests, so yes. The tool called yslow can grade your application to help you see what you can do to get a better user experience.
Nosredna
2009-02-07 00:09:21
Keep in mind that most of the suggestions of YSlow are geared towards huge sites like, well... Yahoo.
Stefan
2009-02-07 01:56:10
+2
A:
Each include is a separate HTTP request the user's browser has to make, and with an HTTP request comes overhead (on both the server and the connection). Combining multiple CSS and JavaScript files will make things easier on you and your users.
This can be done with images as well, via a technique called CSS sprites.
ceejayoz
2009-02-07 00:09:21
+1
A:
The best possible solution would be to add all code to one page so it can be fetched in one GET request by the browser. If you are linking to multiple files, the browser has to request for these external pages everytime the page is loaded.
This may not cause a problem if pieplineing is enabled in the browser and the site is not generating much traffic.
Google have streamlined their code to being all in one. I can't even imagine how many requests that has saved and lightened the load on their servers with that amount of traffic.
Gary Green
2009-02-07 00:11:24
A:
I'm not really very versed in the factors which effect server load, however I think the best thing to do would be to find a balance between having one big chunk and having your scripts organized into meaningful separate files. I don't think that having five or so different files should influence performance too much.
A more influential factor to look at would the compression of the scripts, there are various online utilities which get rid of white space and use more efficient variable names, I think these will result in much more dramatic improvements than putting the files together.
Shraptnel
2009-02-07 00:12:55
+3
A:
Even if browse doing several requests it's trying to open least amount of TCP connections (see Keep-Alive HTTP header option docs). Speed of web pages loading also can be improved by settings up compression (DEFLATE or GZIP) mode on the server side.
LicenseQ
2009-02-07 00:58:04
+1. Keep-alives will reduce the latency of having separate files on modern web servers. There's still a benefit to concatenating scripts/sheets, but it's not going to be very big. mod_deflate is well worth enabling in either case.
bobince
2009-02-07 01:03:34
A:
As others have said, yes, the fewer files you can include, the better.
I highly recommend Blender for minifying and consolidating multiple CSS/JS files. If you're like me and often end up with 10-15 stylesheets (reset, screen, print, home, about, products, search, etc...) this tool is great help.
Mark Hurd
2009-02-12 19:44:49
+1
A:
There's no longer any reason to feel torn between wanting to partition js & css files for the sake of organisation on the one hand and to have few files for the sake of efficiency on the other. There are tools that allow you to achieve both.
For instance, you can incorporate Blender into your build process to aggregate (and compresses) CSS and JavaScript assets. Java developers should take a look at JAWR, which is state of the art.
David Easley
2009-02-14 12:58:00
A:
Web Resource Optimizer for Java (wro4j) - http://code.google.com/p/wro4j/wiki/GettingStarted is created exactly for this. It can help you to keep your resources (javascripts & css) organized in a single xml, describing how you want to group them and get the merged and minimized version of it using a single request.
Also, wro4j is very configurable and has a lot of bonus features like: extensibility, easy of configuration, css variables support, runtime configuration, maven plugin for build time processing & many others
Alex Objelean
2010-04-02 21:40:32