How to properly create critical css?

Question

css

Hello.
I read articles about the implementation of critical css, but for some reason they do not understand important questions:
1) For what height of the display should critical css be created? After all, someone comes from a laptop with HD resolution, while the other has a 4k monitor turned vertically. Where is the golden mean?
2) What to do when the user gets to the middle, the footer of the site by anchoring? After all, in this case, after optimization, we get a fast-loading site header, and the lack of design on the rest of the page for a while.
3) Preloaders and critical css can't exist together?

Answer 1

it takes, as a rule, fractions of a second to load styles. therefore, critical styles are rarely bothered at all.
what to take out in critical css is always according to the situation, but IMHO the main principle should not be that we first completely render the first screen, and then everything else.
and that in that short time interval, while the styles are being loaded, the “bare” text in a column does not flash.
those. we hide secondary and auxiliary elements, put aside for later shadow-gradients with other prettiness, etc. the main thing is to display the layout so that the content does not jump when fully loaded.

3. Preloaders and critical css can't exist together?

critical css is needed to display the site almost instantly for the user, so as not to stare for a whole second at a stupid preloader.

Answer 2

Where is the golden mean?

The golden mean is usually + 1 section below (you cover especially large screens with it).

laptop with HD resolution, and the other has a 4k monitor rotated vertically.

As a rule, critical css is created with a focus on users of mobile devices, or users with a very poor Internet connection. But 2020 is in the yard, and your 100kb css is just ridiculous for 99% of users. Most of the articles that you read about critical css are foreign (bad Internet, + multi-million audience coverage, some kind of portal like bbc news), if you don’t have such coverage, and you “stream” your business to Russia, bothering with critical css is not so productive.

Preloaders

A preloader is usually needed if your site has a loading time of more than 3+ seconds, it allows you to reduce the user's bounce rate and remove aggression towards you) If your site loads up to 3 seconds, a preloader is also the same.

Answer 3

1. make a cut for your audience. Maybe they only watch you from smart TV.
2. try Splash screen. For the second page, it will not be needed - because. styles already in cache
3. see point 2