How to split critical css?

Question

css

There is a website hosted. It is necessary to speed up its loading on the client side. Google Page Speed ​​recommends "Remove render-blocking resources".

There is a huge css file with a lot of unused code. As far as I understand, you need to cut out the critical part of the css and load it immediately, and load the rest later. The question is: How should it look like? I cut out the critical part of the css with the help of an online service and now I need to edit it so that it loads first, and the rest of it later. Like I need to split a large css file into two files and load the critical file first. But how can I cut out the non-critical part separately? After all, otherwise the critical css will be loaded first and then again the entire large file.

Answer 1

1. The average method (without deepening into the essence of the task) is to call critical CSS in the head, and in the footer after everything else.
2. Use a hack like this for the rest of the code:

<link rel="stylesheet" href="/css/style.css" media="none" onload="if(media!=='all')media='all'" >

, with the creation of a fallback for the case when JS is not included.
3. Generate a call through document.write using JS (but this is essentially one of the variations and, as far as I remember, it is dangerous because the browser's security is triggered by this, I'm not sure, so just take note).
4. Just adequately approach the generation of styles and not load what should not be on the page. Read as you like, even though the build for each page is different (not the best, because the cache).
UPD: In any case, the main CSS must be loaded in head. And the rest of the code (if any) in some other way.

Answer 2

You do not load the critical part, but place it through style in the head tag. Load the shared file asynchronously.