Order of loading external CSS and JavaScript files

Question

I have a third party application that loads many css and javascript files, and I now want to optimize this by concatinating all the javascripts into one file, compressed by the yuicompressor, but ... when we have a mix like:

<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js"></script>
<link rel="stylesheet" href="style1.css" type="text/css" />
<script type="text/javascript" src="script3.js"></script>
<script type="text/javascript" src="script4.js"></script>

Does it matter that there's a css in the middle here? Should I concatinate and yuicompress the 4 javascripts and load them before the CSS or after?

Answer 1

Check out Yahoo's Best Practices for Speeding Up Your Web Site , they recommend loading your css first (preferably in the header), and your js last (after all the content in the body). Google's best practices also recommended loading CSS first.

Answer 2

It depends. If all the JS only works on DOM ready, the order is unimportant. However, if there is any in-line javascript that changes CSS styling of DOM elements, then you'll have issues.

More practically, you should probably put the CSS first so there is less time where the user needs to experience unstyled content.

Answer 3

It doesn't matter, although if loading takes a while, the user might see his page change appearance and wonder why. I'd put the CSS files first to have the style definitions in place before any DOM manipulation, most likely minimizing the visible change as the page loads, but it doesn't really matter in the end.