Google PageSpeed Conflicting Suggestions

Question

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.

Answer 1

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.

Answer 2

The idea here is that you inline the CSS rules that the page actually needs to render initially into the head tag, and defer loading of the rest of the CSS until after the page load.

For an example, see http://www.iispeed.com/mod_pagespeed_example/prioritize_critical_css.html?PageSpeed=on&PageSpeedFilters=rewrite_css,flatten_css_imports,inline_import_to_link,prioritize_critical_css

Answer 3

Hi recently we have created an opensource nodejs framework called "elegant framework" that help you building fast web application and we succeeded to get 100% google page speed in both desktop and mobile in all pages : you can check it at:

https://developers.google.com/speed/pagespeed/insights/?url=getelegant.com

there is a lot of things you can learn from it by viewing the page source also if anything you cannot understand please comment so i can help you with