4
I checked the performance by means of testing on the website of google so-called Pagespeed Insights, when inserting the tags related to the CSS at the end of the body of body scores go up.
8
Yes, it makes a difference for the worse, and this is linked to how the document render tree is mounted. If you want to know more about it, this question can be a starting point The order of CSS styles influences the render tree?
Here’s what happens when the CSS is at the end of the document
And when it’s starting! Notice the MS charging!
Now look at Refresh when CSS is at the end of the document.
Notice how for some MS you can see the HTML without the CSS applied. Now imagine this with a slow connection or on Mobile with bad signal....
This behavior is known as FOUC (flash of unstyled content) and is described even in Wikipedia rss https://en.wikipedia.org/wiki/Flash_of_unstyled_content
Regardless of the organization of the folders in the served way qq puts the CSS at the end of the document is a bad practice... The result speaks for itself, and Pagespeed may have improved because HTML weighs more than CSS for Google, and even pq there is no SEO in CSS (the most that is known on the subject is whether the site is responsive Google prioritizes, the rest is a dark and uncertain subject)
An alternative
One option is to split your CSS into at least 2 parts
<link href="above.css"> (20kb)
--------------------------------
<link href="below.css"> (200kb)
So in the <head> vc will have a CSS essential to the layout that is before the first fold (layout that appears before the first scroll), and at the end of the document you put the rest of the CSS on a separate sheet. This will speed up the loading, but without compromising the rendering of the first part.
OBS: and yes to tag <link href="style.css" rel="stylesheet" > is allowed within the <body> for it is a phrasing content (but not all kinds of <link> is accepted inside the body) https://www.w3.org/TR/html5/document-metadata.html#the-link-element
This is the code of the test, it was made with Bootstrap that has a very extensive CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/product/product.css">
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
</style>
</head>
<body>
<nav class="site-header sticky-top py-1">
<div class="container d-flex flex-column flex-md-row justify-content-between">
<a class="py-2" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
</a>
<a class="py-2 d-none d-md-inline-block" href="#">Tour</a>
<a class="py-2 d-none d-md-inline-block" href="#">Product</a>
<a class="py-2 d-none d-md-inline-block" href="#">Features</a>
<a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a>
<a class="py-2 d-none d-md-inline-block" href="#">Support</a>
<a class="py-2 d-none d-md-inline-block" href="#">Pricing</a>
<a class="py-2 d-none d-md-inline-block" href="#">Cart</a>
</div>
</nav>
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
<div class="col-md-5 p-lg-5 mx-auto my-5">
<h1 class="display-4 font-weight-normal">Punny headline</h1>
<p class="lead font-weight-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple's marketing pages.</p>
<a class="btn btn-outline-secondary" href="#">Coming soon</a>
</div>
<div class="product-device box-shadow d-none d-md-block"></div>
<div class="product-device product-device-2 box-shadow d-none d-md-block"></div>
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
<div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
<div class="my-3 py-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 p-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 p-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
<div class="bg-primary mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
<div class="my-3 py-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 p-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 py-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 p-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 py-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
</div>
<footer class="container py-5">
<div class="row">
<div class="col-12 col-md">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mb-2"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
<small class="d-block mb-3 text-muted">© 2017-2018</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Cool stuff</a></li>
<li><a class="text-muted" href="#">Random feature</a></li>
<li><a class="text-muted" href="#">Team feature</a></li>
<li><a class="text-muted" href="#">Stuff for developers</a></li>
<li><a class="text-muted" href="#">Another one</a></li>
<li><a class="text-muted" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Business</a></li>
<li><a class="text-muted" href="#">Education</a></li>
<li><a class="text-muted" href="#">Government</a></li>
<li><a class="text-muted" href="#">Gaming</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
<li><a class="text-muted" href="#">Locations</a></li>
<li><a class="text-muted" href="#">Privacy</a></li>
<li><a class="text-muted" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>It is worth mentioning that one of the most critical parts within the page (in terms of SEO and metrics in Pagespeed) is the region above the fold. This justifies increasing the Pagespeed score, because without the loaded CSS you decrease the render time of this region (giving up the correct view, as you demonstrated).
@Andersoncarloswoss that’s right! No one knows for sure what Google’s criteria are, but surely "above-the-fold" content has a special importance. Good tip!
1
Render Tree
As trees of CSSOM and of GIFT are combined into a render tree, which is used to process the layout of each visible element and acts as an input mechanism for the recording process, which renders the pixels on the screen. Optimizing each of these steps is essential to achieve optimal rendering performance. However, both are independent objects that capture different aspects of the document: one describes the content and the other, the style rules that should be applied to the document. How can we merge the two for the browser to render the pixels on the screen?
Illustrative example:
The browser steps to Process and Render are as follows:
1) Process HTML markup and create DOM tree.
2) Process CSS markup and create CSSOM tree.
3) Combine DOM and CSSOM in a render tree.
4) Run the layout in the render tree to calculate the geometry of each node.
5) Paint individual nodes on canvas.
So knowing all this..
No.. There are no consequences by randomly sorting CSS properties. However, even if it does not significantly affect the performance of the project the organization of the architecture of the project in relation to the folders and in relation to the HTML insert each tag in its proper place, this is called good practices and design Patterns.
Part of the content was taken from this SOURCE...
It would be nice to include the source in the reply
Browser other questions tagged css pagespeed-insights
You are not signed in. Login or sign up in order to post.
I kindly ask to read hard about how to create a good question here in the community.
– user148754
Possible duplicate of The order of CSS styles influences the render tree?
– user148754
@THIAGODEBONIS looks read this topic that you cite as possible duplicate but it deals with the order of CSS properties in the element and in my question I ask about CSS as a whole. And thank you for alerting me on how to create a good question and that I ended up doing it very quickly because I was leaving.
– Joao Nivaldo
your question is similar to the possible duplicate link. In this same link addresses the subject of Building, layout and recording the render tree, where you need to read sinking not only in this link and out to understand the critical paths of how google’s pagespeed-insights analyzes your performance, it’s all there. Below I left my reply to you, going straight to the subject of what really happens in technical terms, I hope to have helped.
– user148754
I saw this link and thought it might complement your question https://answall.com/questions/214425/por-que-a-google-recomenda-css-inline
– hugocsl