It is not everything, it is only what is priority, few fundamental parts of page loading.
Follow the tag fragment pagespeed-insights:
Pagespeed Insights is a tool made available by Google that measures the performance of a page on mobile and desktop devices. It searches the URL twice, once with a user agent mobile device and once with a user agent computer, generating suggestions to make it faster.
Suggestions, that is, based on the opinion of Google, you can do x thing, to improve.
BUT, it may be that what the "giant" is saying harms your site, since she has no knowledge of how you are developing your site, but this is another issue that you as a developer should see, calculate and make the necessary modifications and not simply do X thing because the giant said...
That said, it is important to look at the site itself Google Developers, related to CSS, and read carefully what they say(my emphasis):
The in-line insertion of small CSS allows the browser to proceed with page processing.
It is recommended to incorporate the CSS critical in-line. Small fundamental parts, to load the styles needed to render the parts needed for your page.
In the case of a large CSS file, it will be necessary to identify and insert the necessary CSS in-line to process the content of the region above the fold.
In other words, reinforcing again, it is recommended to insert only what is irrefutably necessary to render your site and if it is a large CSS file, you as developer should analyze what is important to load/be loaded to avoid rendering blocking on content above the edge and make the appropriate 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 resource small.css
be it so:
.yellow {background-color: yellow;}
.blue {color: blue;}
.big { font-size: 8em; }
.bold { font-weight: bold; }
Insert the CSS critical in-line 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">
Did you see? You only inserted what is important, the visible content of the page. Despite having several CSS rules in small.css
, placed the priority on the page, which was the class=blue
, what the user will see right away when entering your page.
You can also try to asynchronously postpone or load the blocking features.
About your client
Tell him that’s a tool, that generates suggestions and recommendations, which are generally generic to any site, and not specific to its pages. Also say that the important thing is not that Google approves it, but that its customers approve it. Who wants to have a website that Google approves, but that no one accesses?
This test checks whether the page uses common best practices for performance. A high score is correlated to a fast user experience, but it does not guarantee that. - Google
Of course don’t ignore everything Google says, but don’t blindly accept everything look for the balance between Google and its customers.
Note: Particularly I have never seen a site 100/100.
Just remember, they are recommendations, they are not rules that should always be followed blindly, they are very generic. Apply them sparingly.
Sources:
I don’t understand exactly what you want to know; is if Google really recommends using tag
<style>
? In this case, the question itself answers itself, although it speculates that they must perform some algorithm that does not always recommend using style inline.– Wtrmute
@Wtrmute edited the question. Really, it was not very clear.
– Daniel Bonifácio
See https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example. One of the recommendations is to prioritize the content above the page fold, that is, load the styles needed to render page header and top and leave footer style for example last. CSS inline only if small.
– rodorgas
He says: "incorporate the core parts online" and understand that core parts are not the entire CSS. And even before that he recommends you "postpone or asynchronously load the blocking features". Remember that using styles on the page inside
<style>
not wrong, just know what you are doing. Follows the page.– Woss
@Andersoncarloswoss but use via styles
<style>
does not hinder SEO? Wouldn’t this technique presented generate an extra job of preparing the screen for early loading? In addition, reading inline css would not be the same linked css, avoiding only a request?– Daniel Bonifácio
@rodorgas: This document provides enough information for a response, although the automatically translated Portuguese version is terrible. Why don’t you try to get laid?
– Wtrmute