Why You Should Place Style Sheets Before Scripts

by on 05/19/11 at 5:00 pm

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 in your document can affect the speed of your website.

If you want your website 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 your site load visibly. Users won’t find themselves staring at a blank white page. Important visual elements, such as the logo, header and navigation, will progressively show up. This works as a form of visual feedback to let users know they’re on the right page and that the page is loading. All of this happens before executing the JavaScript at the bottom of the page. Thus, it gives users the impression that your site has finished loading before it actually has.

Why You Should Place Style Sheets Before ScriptsIf 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 your CSS won’t load and the visual elements of your site won’t show up until the JavaScript finishes downloading first. When it does finish, users will experience a flash of unstyled content and a shifting of elements on the screen.

Making users wait to see your site and showing them incorrectly formatted 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 website.


Why You Should Place Style Sheets Before Scripts Why You Should Place Style Sheets Before Scripts

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

8 Responses to “Why You Should Place Style Sheets Before Scripts”

  1. Andrew

    May 20th, 2011

    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.

    • isomorphismes

      Mar 13th, 2012

      no i think that’s a good example. Or how about a “mosaic” style browser like tumblr’s. Noscript at the top, JS second.

  2. David Siegfried

    May 20th, 2011

    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!

  3. Jos Hirth

    May 21st, 2011

    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.

  4. Mariusz

    May 23rd, 2011

    In times of Head.js, that whole post is simply not true.

  5. Bill Roman

    May 23rd, 2011

    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?

    • Chris

      May 24th, 2011

      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

    • mrPerezMarc

      Aug 11th, 2011

      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.

Leave a Comment