How to optimize loading and css for fast rendering?

Question

css

Good afternoon. At the moment, Google has a requirement that the first scope be shown as quickly as possible.
Basically, this requirement is valid on mobile
. I would like to understand using the example of a simple store.
For example, there is a simple menu and a product slider. It turns out I have to give the layout + css for this block.
Then load everything else in the background. Am I right?
I just can't quite figure out how to solve the problem.

Answer 1

You understand everything correctly.
Google needs the first screen without all the tricks.
Those. styles - only for the visible part, scripts - too.
What is background loading? ))
Google sees it!
Most often, a timeout of at least 3 seconds helps! It's Google, baby...
If we watch mob. bookmark - respectively, the first screen on the mobile, it is there, judging by the screenshots of Google - 4 times less than the desktop one, most likely Google is testing on Athos 4S)))
give a link to the store and people will reach out ...
Examples from life:
Put the widget Zhivosayt and support claims that the widget is loaded asynchronously - NON-BELL!
Google perfectly sees all the ton of garbage from this live site and considers it to be interfering with the loading of the first screen !!))
Put a metric - Google sees half a ton of jash-garbage.
Put Google fonts - Google swears.
I put Google Analytics - Google yells with a good obscenity.
Therefore, we forget about this hellish tool and live in peace without it, and even better without metrics, analytics and a live site.
Perhaps there is another reason - Why are there so many Indians in IT?