What is Google Lighthouse trying to say?

Question

css

I checked my site through Google Lighthouse and it gave me this recommendation: Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles and I don't fully understand what he means. It seems that he removed the scripts from the head and cleaned up any unnecessary things, but it's still not clear what the problem is

Site tempes68.beget.tech

Answer 1

Absolutely all scripts at the end of the body, and make it in the defer if possible. He says that these styles (in 5 kb) are loaded very slowly. It seems that the problem is a very slow connection to your server, think about what could be the reason for this, or try a CDN.

Answer 2

Styles are first loaded for print, and then switched for the screen, like this

<link rel="stylesheet" media="print" href="/css/style.css" onload="this.media='all'"/>

And styles can be collected in 1 file.
You can also get confused about styles if you run the styles through the critical-css generator on Node.js and send the most necessary ones inline into the page. And do not forget to load them later separately, in the last request, so that you can cache and use from the cache when you navigate to the next pages.
There are many interesting examples in the google pagespeed recommendations.
According to the scripts commented on the answer above.