Question: I was watching this [video](https://www.youtube.com/watch?v=AWF7ZzPyagE), and found some elements of it going over my head. 

He says that scripts are 'serialized' and also block subsequent files from being loaded. If this is the case then `Script 1` would finish loading and then `Script 2` would begin loading and then the CSS files would load. 

I do not see how loading the CSS files before would inhibit this behaviour. Since the script files should have a set waiting time even if they are loaded one after the other, swapping around the order should not change this behaviour?

Thanks in advance.

Answer: 
Blocking the CSS file won't block the page load, but it will cause the page to be re-rendered; possibly causing a noticeable flicker. This is because each time the browser encounters another block of CSS it needs to re-render the DOM, in case the new styles change anything. 

This is all about user experience / perceptual load speed:

* Put CSS as high as possible (pref in `<head>`) to negate the chance of the DOM being re-rendered
* Keep JS scripts as low as possible (pref just before `</body>`) because it ensures the DOM is loaded into the browser (and therefore visible to the user) before any potentially blocking external scripts are loaded
Its generally good practice to load your JS files at the bottom of your page as you then give HTTP request priority to other elements on the page such as styles (CSS), images and text etc. These will be shown visually to the user first instead of waiting for scripts to load in the background.