Why is the standard to put the css and js file at the top and bottom of the page (respectively)?

Question

Just curious why there is a performance enhancement when you standardize a site with the css and js in the headers and at the top/bottom of the page.

Answer 1

That's not entirely correct. Said simply:

• Style declarations should be as close to the top as possible, since browsers won't render your page before loading the CSS (to avoid a flash of unstyled content)

• Script tags should be as close to the bottom as possible, since they block browsers from parsing after the tag before it is loaded and complete (because the script may change the document with document.write)

If you're interested in frontend performance, I highly recommend reading High Performance Web Sites: Essential Knowledge for Front-End Engineers by Steve Souders.