Including loads of css files and Javascript file - how do I optimize

Question

Duplicate: Multiple javascript/css files: best practices?

Hi guys, my application is almost done but the thing is that I've noticed that I'm including a lot of external javascript files and css. I'm using a lot of third party free plugins here and didnt want to touch the code for fear of messing something up.

But the result is that I notice that I have now included 8 external css files as well as a whopping 20 external Javascript files :O - I don't recall having seen any major website include more than 2 or 3 css_ js files combined so I definitely must be doing something wrong here. How do I sort this out - I read somewhere that one large js file is more quicker to load than 2 or 3 files which are even half the accumulated size.

Any help would be greatly appreciated

Answer 1

YUI Compressor http://developer.yahoo.com/yui/compressor/

And a nice tutorial : http://beardscratchers.com/journal/compressing-css-and-javascript-with-yui-compressor

Answer 2

Read this: Best Practices for Speeding Up Your Web Site

Answer 3

In past projects, I used SmartOptimizer for compressing JS and CSS files on the fly. It's a PHP based file minifier.

By using a just in time minifier frees you from having to keep seperate source and minified files. Of course, there's a little processing power needed to keep minifying the files. Also, loading a single minified file is better with the following advantages:

1. Smaller file size (for sure)
2. No component parallel download delay because fewer scripts/stylesheets.

Answer 4

If you combine your CSS files into one file (and same for JS) in the order they are currently loaded to the page then they will work exactly the same as before; it's when you start changing the order that rules can unexpectedly override ones they didn't used to.

Answer 5

One big file is better than a bunch of small because in this case web browser makes one request to the web server instead of, say, 8 requests. What counts more is not the slight differences in total size, but the total latency of the requests.

Imagine two scenarios: you download one file of 8 kB and 8 files of 1kB each.

1. In the first scenario total time is smth like 80 msec (transfer time) + 50 msec (latency) = 130 msec

2. In the second scenario you have smth like 8x10 msec (transfer time) + 8x50 msec (!) of latency = 480 msec (!)

You see the difference. This is by no means a comprehensive example, but you get the idea.

So, if possible, merge files together. Compress content to decrease the amount of data to transfer. And use caching to get rid of repetitive requests.

Answer 6

Most of your files should wind up in the client side cache anyway so I wouldn't be too worried about it. Just make sure you're setting the right headers. Of course if this is the front page of your site then yeah, you probably should be optimising further.