Google Pagespeed Insight: "Optimize CSS Delivery of the following". How to?

Question

I tested my wordpress website on Google Page Speed Insight and it scored a 95/100. It suggested that I should "Optimize CSS Delivery" of 1 css file:

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />

Right now it's sitting in the footer along with all the javascript codes below it. I moved it back between the head tag and same results. How do I optimized the css delivery of the css file?

Answer 1

In the case of a large CSS file, you will need to identify and inline the CSS necessary for rendering the above-the-fold content and defer loading the remaining styles until after the above-the-fold content.

Taken from: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Its not best to actually put all the css together. You should call first the styling that is needed for the rendering and afterwards call that big stylesheet of yours.

And if you want to know how to defer stylesheets well this is how:

CSS delivery optimization: How to defer css loading?

Hope i got you covered :)