2

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

6 Answers 6

2

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.

2
  • Isn't there any risk of causing any kind of conflicts if I merge the javascript files together? Or is it just a matter of copy pasting the file contents one after the other in one huge file?
    – Ali
    Apr 29, 2009 at 12:26
  • Yes, there might be conflicts. But there is always a trade off: if you want to optimize it and make it faster you have to invest some time to make sure that it works properly. Apr 30, 2009 at 4:04
1

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

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

1

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.

1

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.

0

Read this: Best Practices for Speeding Up Your Web Site

1
  • 1
    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. Have a look at this article: How do I write a good answer. Mar 9, 2016 at 14:19
0

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.
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.