When it comes to loading CSS, Google PageSpeed has conflicting recommendations.
On the one hand, it tells us to load all CSS in the head: https://developers.google.com/speed/pagespeed/service/MoveCSSToHead?csw=1
On the other hand it tells us to only put the priority CSS in the head and insert the rest after the page has fully loaded: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
So which rule do I follow? Also, if anyone can point me to an example of how to load the CSS using Javascript after "onLoad", I will be very grateful.
99% of the time all CSS should be in the head in the form of a external link. And all js should be just before the closing body tag. If its telling you to put the css in the body it is wrong. page speed is not just actual speed. it is also perseived speed. css in the head will make the page appear to load faster. Here are all the ways to load CSS with js that I know of. http://www.websitecodetutorials.com/code/javascript/add-css-with-javascript.php.