How to upload CSS to get a high score in Google PageSpeed ​​Insights?

Question

Google

Hello.
I load the CSS in the usual way:
<link rel="stylesheet" href="/css/style.css">
I get " Remove JavaScript and render-blocking CSS from the top of the page ".
The file weighs 120 KB, I completely delete everything from it, make it empty, run Google PageSpeed ​​Insights, it still swears at it, i.e. he doesn't care how much he weighs, the main thing is that he was not there. Where to put it and how to load CSS in general?
UPD:
All the proposed options do not solve the problem, PageSpeed ​​keeps track of the connection of the style wherever I put it, whether in the head or at the bottom of the page and "swears". Found this option which made PageSpeed ​​100/100:

function rocketCSS(e) {
    var t = new XMLHttpRequest;
    t.onreadystatechange = function(){
        if(4==t.readyState && 200==t.status){
            var e = document.head||document.getElementsByTagName("head")[0];
            var n = document.createElement("style");
            n.type = "text/css";
            n.styleSheet
                ? n.styleSheet.cssText = t.responseText
                : n.appendChild(document.createTextNode(t.responseText));
            e.appendChild(n);
        }
    };
    t.open("GET",e,!0);
    t.send();
}

rocketCSS('/style.css');

Answer 1

I ignore this rule, while the score is 94 \ 100. For good, you can remove the style file from head only when you have generated the correct critical path, i.e. display-critical styles placed inline in the style tag. In all other cases, either crutches, or the unpleasant effect of FOUC (Flash of unstyled content), when the user sees the page content before the styles are loaded. It shouldn't be like that.

Answer 2

Ideally, you need to collect all the styles in one file, connect the styles with a script, for example, like this:
and insert all scripts at the end of the page - right before the closing tag </body>, plus, if you can have users with disabled javascript in the browser (you never know), you will need to duplicate the connection of the style file inside the tags <noscript></noscript>, for example, like this:

<noscript><link rel="stylesheet" type="text/css" href="/путь_до_файла_стилей.css" /></noscript>

Answer 3

You need to:
1. Extract from your large CSS file all the rules that affect the display of the first 1000px page. Service - https://jonassebastianohlsson.com/criticalpathcssg...
2. Place this CSS in the HTML file, in the head section, between the style tags.
3. Download the full CSS file using JS placed at the end of the page.
I have Google PageSpeed ​​Insights 98/100 for mobile and desktop, 100/100 for convenience. I didn't get 2 points because I use the scripts Ya.Metrika and G.Analitka - swears at caching. Potentially can be fixed, but to the detriment of the current versions of these scripts.

Answer 4

According to Google's recommendations, it needs to be moved down to the JS call. From personal experience, I can say that this does not interfere with the display of the site.

Answer 5

either add styles with a script, or in a tag

Answer 6

Also, as some people write here, I do not recommend doing this.
The loading speed does not increase from this particular recommendation, but the FOUC (Flash of unstyled content) effect appears when the user sees the content of the page before the styles are loaded. This results in lower conversions and higher bounces. We get the opposite effect - much stronger than the positive effect from pagespeed