A related question has been asked before: What is “above-the-fold content” in Google Pagespeed?
Firstly you have to notice that this is all about ‘mobile pages‘.
So when I interpreted your question and screenshot correctly, then this is not for your site!
On the contrary – doing some of the things advised by Google in their guidelines will things make worse than better for ‘normal’ websites.
And not everything that comes from Google is the “holy grail” just because it comes from Google. And they themselves are not a good role model if you have a look at their HTML markup.
The best advice I could give you is:
- Set width and height on replaced elements in your CSS, so that the browser can layout the elements and doesn’t have to wait for the replaced content!
Additionally why do you use different CSS files, rather than just one?
The additional request is worse than the small amount of data volume. And after the first request the CSS file is cached anyway.
The things one should always take care of are:
- reduce the number of requests as much as possible
- keep your overall page weight as low as possible
And don’t puzzle your brain about how to get 100% of Google’s PageSpeed Insights tool …! 😉
Addition 1: Here is the page on which Google shows us, what they recommend for Optimize CSS Delivery.
As said before, I don’t think that this is neither realistic nor that it makes sense for a “normal” website! Because mainly when you have a responsive web design it is most certain that you use media queries and other layout styles. So if you are not gonna load your CSS first and in a blocking manner you’ll get a FOUT (Flash Of Unstyled Text). I really do not believe that this is “better” than at least some more milliseconds to render the page!
Imho Google is starting a new “hype” (when I have a look at all the question about it here on Stackoverflow) …!