Best practices for web design don’t just exist on the user interface. They also exist on the back-end where the code is. Where you place your style sheets and scripts can affect how your site loads.
If you want your site to load faster, place your CSS at the top in the <head> section and JavaScript at the bottom. This allows the browser to load your CSS first, so that users can see the content on your site load. Users won’t find themselves staring at a blank white page.
This works as visual feedback to make users feel like the page has loaded quicker than it really has. All of this happens before executing the JavaScript at the bottom of the page.
If you put your JavaScript at the top of the page and CSS at the bottom, users will have to stare at a blank white page until the JavaScript finishes loading because <script> tags block parallel downloads. This means the visual elements of your site won’t show up until the JavaScript finishes downloading first. When it does finish, users will experience a brief flash of styleless content and a shifting of elements on the screen.
Making users wait to see your site and showing them unformatted content is not a good user experience. Follow this best practice with your code, and your users should have no complaints about the speed of your site.
UI Design Kit
Affiliate
This is great advice if you are using Javascript to progressively enhance your site. For example, if you use jQuery to ease transitions, fade elements, or have a sliding content bar (or any of the other fantastic things you can do with jQuery). However, it’s not a blanket statement that one should make; it’s not *always* correct to put the javascript last. If you’ve made a website that heavily reliant on javascript for core functionality then loading your javascript last breaks the key feature of your site.
An (admittedtly poor) example is google maps: if you were to load the visuals of the site without loading the javascript, your feel would be that the site was broken because you could not interact with the map until the javascript was ready (like I said – it’s a poor example because Google has highly optimized and fast loading code – their load order is *almost* moot).
I would say that a better way to phrase your very good point here might be to say that one always needs to consider the order of elements that one loads in an HTML page, and to prioritize them based on how they effect the User Experience. However, one could also consider your point to be the rule, and that an expert should know when and how to break the rules.
no i think that’s a good example. Or how about a “mosaic” style browser like tumblr’s. Noscript at the top, JS second.
I agree that style sheets should come before scripts, this is a very sensible way to allow your content to be loaded into an environment that already carries style rules. What I am curious about is some of the functionality that is part of the jquery (and possibly other) library. Specifically considering:
$(document).ready(function() {
// scripts here
});
Now this script will not execute until all your content in the DOM is loaded. I haven’t tested extensively but this seems to be pretty well accepted that putting this in the of your html documents does not delay your page from loading. I suppose there could be some argument for having to load the library before this function can even be executed, truth. Fortunately many developers have taken to loading their jquery via google. The more sites that do this, the more likely people will actually have the library cached.
This way you can load all of your javascript and stylesheets safely in your header further pushing the standardist idea of keeping scripts, styles and markup very separate while still considering the very important load time.
Thanks again for the post!
The code above still uses the old way to specify the charset. It’s perfectly safe to use the newer much shorter version:
<meta charset=”UTF-8″/>
or:
<meta charset=”utf-8″/>
or:
<meta charset=”utf-8″>
or even:
<meta charset=utf-8>
I escaped it manually. Hope it works now.
In times of Head.js, that whole post is simply not true.
I agree with David, all the main stream JavaScript frameworks have some kind of onDomReady built in – so I believe this would defeat the purpose of putting the script tag at the bottom.
Also, is it valid to put the script at the bottom?
Putting the script tag at the bottom isn’t just for OnDomReady, but also a performance optimization. Loading and parsing scripts in the head delays the rest of the page render downstream. Alternatively you can have your CSS and HTML read and being rendered as you parse your script if you put it after your HTML. Yes it is valid to put script at the bottom, assuming it’s still in the body tag
I bet you anything, that if you put jquery on the bottom of the page, you will get uncaught error because inline script requesting the jquery.js will fail.
Yes, putting JS on the bottom is okay as long as the don’t contain document.write or get alled by an other script in the body of the page.