How to solve the critical path problem on a large site?

Question

css

Hello. Usually I put the styles of the critical path (the styles that are needed to display the first screen to the user) in the header for the main page and did not take a steam bath. Now I am working on a rather large project (more than 30 pages), which is created on Bitrix. The heading is taken out in a separate file and therefore taking out all the styles of the critical path for all pages through the conditions is still a hassle, I am silent about further support. I see only 1 solution to the problem - to generate the styles of the first screen with gulp for each page and insert it right under the header in the body of the page.
The remaining styles are loaded after loading the page from the footer in one file.
Perhaps someone can share a working way? I will be grateful

Answer 1

And how many megabytes does the page weigh, what makes styles not in the head prescribe?
And 30 more pages, is that a lot? it would be 300 at least...