The reasoning is generally, of this form:
use the following page to test
When we include the CSS first, the page takes 1.5 seconds to render:
- We have always put the CSS <link href=”…”>s before the JS <script src=”…”>s because it’s high time we do some actual research!
- Made sure there was no HTTP caching so the browser would have to do a full download each time a page is loaded.
- To simulate reality, we included jQuery and the H5BP CSS (so there’s a decent amount of script/CSS to parse)
- Set up two pages – one with CSS before script, one with CSS after script.
- Recorded how long it took for the external script in the <head> to execute
- Recorded how long it took for the inline script in the <body> to execute, which is analogous to DOMReady.
- Delayed sending CSS and/or script to the browser by 500ms.
- Ran the test 20 times in the 3 major browsers.
- Old browsers (Internet Explorer 6-7, Firefox 2, etc.) would block all subsequent downloads when they started downloading a script.
- So if you have a.js followed by b.css they get downloaded sequentially: first a then b. If you have b.css followed by a.js they get downloaded in parallel so the page loads more quickly.
- Nothing is rendered until all stylesheets are downloaded – this is true in all browsers. Scripts are different – they block rendering of all DOM elements that are below the script tag in the page.
- If you put your scripts in the HEAD then it means the entire page is blocked from rendering until all stylesheets and all scripts are downloaded.
- While it makes sense to block all rendering for stylesheets (so you get the correct styling the first time and avoid the flash of unstyled content FOUC), it doesn’t make sense to block rendering of the entire page for scripts.
- Often scripts don’t affect any DOM elements or just a portion of DOM elements. It’s best to load scripts as low in the page as possible, or even better load them asynchronously.
During the loading of your website, there are two scenarios that you would see:
CASE 1: white screen > unstyled website > styled website > interaction > styled and interactive website
CASE 2: white screen > unstyled website > interaction > styled website > styled and interactive website
“When using scripts that rely on the value of CSS style properties, it’s important to reference external stylesheets or embed style elements before referencing the scripts”.
- There are several things to consider here, and the relevance of these recommendations almost always become rules when you venture into high-caliber web development.
- The purpose of the “put stylesheets at the top and scripts at the bottom” rule is that, in general, it’s the best way to achieve optimal progressive rendering, which is critical to the user experience.
- All else aside: assuming your test is valid, and you really are producing results contrary to the popular rules.
- Every website (and everything it takes to make the whole thing appear on a user’s screen) is different and the Internet is constantly evolving.
- is resized before CSS styles are applied and thus looks weird when the styles finally kick in.
If load the CSS beforehand we can guarantee that things run in the intended order and that the final layout is what we want it to be.
The css will download parallel but js cant. Consider for the same case,
Instead of having single css, take 2 or 3 css files and try it out these ways,
css..css..js will give better result than all others
We can see in the not so distant future a situation where technology has reached a point where performance is not really an issue anymore.