1

In a recent interview I was asked the following questions:

Where best to put CSS - top, body or bottom? Where best to put JS - top, body or bottom?

I had only assumed that because of standard recommendations to put these elements in the head tag (well, excluding inline CSS ofcourse) that this was the best way. But, my interviewer told me that for CSS - this is best put at the top of the page as it allows HTML to be render with the CSS already loaded; and for JS put at the bottom of the page as this will only be run after the DOM is loaded. Is this correct? Is there anywhere I can read more about this (and other unknown quirks)? Very curious to learn more. Thanks

1
  • 2
    your interviewer was right.
    – King King
    Apr 9, 2014 at 6:03

4 Answers 4

5

CSS should be placed in the head tag. This way the DOM elements can be styled as they appear.

The JS should be put before the closing body tag. This will ensure that your DOM elements can load into view right away without being held back while the JS files load.

2

It's true- CSS in the head to render the page without having to parse through the js, which you should put at the bottom of the page unless it's crucial for rendering.

1

Along with putting CSS at the top, you should think about caching. Storing CSS in a stylesheet allows it to be reused and cached by the user's browser. JS is the same way and can be best hosted with common CDNs. For example, loading JQuery from Google or jquery.com as it is more likely to be already cached in the user browser. If it isn't already cached, you also benefit from the speed of the CDN as they tend to have servers much closer to clients than standard web servers.

0

Below I want to show you some practices we use in our company. I have to admit that it's heavily biased towards the Google PageSpeed tool. Malicious gossip would say: "It's viewed through Google's glasses" ;-)

Important note: we only apply following rules in deployment. Our development environment stays uncluttered, structured and well organized.

CSS

  1. Inline all CSS needed for above the fold content:

     <head>
       ...
       <style>
       /* CSS goes here */
       </style>
    
     </head>
    

    Be as sparse as you can!

  2. Link your external CSS in the head section of your document - business as usual - but try to combine all remaining CSS into a least one external file. Browsers have to download each of your CSS files before being able to display the page. Avoid those unnecessary round trip times!

Javascript

  1. Inline all of your code that is needed for the page above the fold to be used/interacted with immediately:

     <head>
       ...
       <script type="text/javascript">
       /* Javascript goes here */
       </script>
    
     </head>
    
  2. Defer loading of the remaining javascript. The below code is Google's recommendation when it comes to pure speed. Place the following code in your HTML just before the closing tag. It says: "Wait for the entire document to load" and then gets the external stuff - like 'defer.js' in my example. Additional scripts can be added easily.

     ...
       <script type="text/javascript">
       function downloadJSAtOnload() {
           var element = document.createElement("script");
           element.src = "defer.js";
           document.body.appendChild(element);
       }
    
       if (window.addEventListener) {
          window.addEventListener("load", downloadJSAtOnload, false);
       } else if (window.attachEvent) {
           window.attachEvent("onload", downloadJSAtOnload);
       } else {
           window.onload = downloadJSAtOnload;
       }
       </script>
     </body>
    

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.