It's not all, it's just the priority, few key parts of page loading.
Follow the tag fragment pagespeed-insights :
PageSpeed Insights is a tool provided by Google that measures the performance of a page on mobile and desktop devices . It fetches the URL twice, one with a mobile user agent and once with a user agent , generating suggestions to make the fastest one.
Tips, that is, based on Google's opinion , you can do X thing to improve.
BUT, what the "giant" might say is harmful to your site , since it is not aware of how you are developing your site, but this is another question that you as a developer should see, calculate and make the necessary modifications and not simply do X thing because the giant spoke ...
Given this, it's important to look at the Google Developers site, related to CSS, and read carefully what they say (emphasis mine):
In-line insertion of small CSS allows the browser to proceed with page rendering.
We recommend incorporating critical CSS inline. Small key parts, to load the styles needed to render the parts needed for your page.
In case of a large CSS file, you will need to identify and insert the required CSS in-line to process the contents of the region above the fold.
In other words, it is recommended to insert only what is irrefutable to render your site and if it is a large CSS file, you as a developer should analyze what is important to load / be loaded to avoid rendering block in the contents above the border and make the necessary changes.
Example
If the HTML document looks like this:
<html>
<head>
<link rel="stylesheet" href="small.css">
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
And the small.css resource looks like this:
.yellow {background-color: yellow;}
.blue {color: blue;}
.big { font-size: 8em; }
.bold { font-weight: bold; }
Insert critical inline CSS as follows:
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<link rel="stylesheet" href="small.css">
See? You have inserted only what is important, the visible content of the page. In spite of having several CSS rules in small.css , it put the priority on the page, which was class=blue , which the user will see when he / she enters your page.
You can also try to postpone or load blocking features asynchronously.
About your customer
Tell him that this is a tool that generates suggestions and recommendations , which are generally generic to any site, not specific to your pages. Also tell them that it's not Google that approves, but their customers approve. Who wants to have a site that Google approves but no one accesses?
This test verifies that the page uses common best practices for performance. A high score is correlated to a fast user experience, but does not guarantee it . - Google
Of course, do not ignore everything that Google says, but do not accept everything blindly strive for balance between Google and your customers.
Note: Particularly I've never seen a 100/100 site.
Just remembering, they are recommendations, they are not rules that should always be followed blindly, they are very generic. Apply them in moderation.
Sources:
