Can requesting CSS within Body speed up page loading and improve rendering performance?

Asked

Viewed 128 times

2

First of all:

We know that some requests made within the <head> document blocks page rendering. And we also know that hj on time is possible and allowed to use links de folhas de estilo within the body.

If a link element has a rel attribute that contains only Keywords that are body-ok, then the element is said to be allowed in the body. This Means that the element can be used Where phrasing content is expected.

Translation: "If a elemento de link has an attribute rel which contains only keywords that are body-ok, then the element is considered allowed in the body. This means that the element can be used where the phrasing content is expected."

Source: https://www.w3.org/TR/html5/document-metadata.html#allowed-in-the-body

What Mozilla Says:

An element <link> may occur in the element <head> or <body>, depending on whether it has a type of link that is body-ok. For example, the type of link of stylesheet is body-ok and therefore the <link rel = "stylesheet"> is permitted in the body.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

Question:

Then I can consider that the user will have a perception that the page loaded faster if I structure my document like this? 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

    <link rel="stylesheet" href="header.css">
    <header>
        elementos etc...
    </header>

    <link rel="stylesheet" href="main.css">
    <main>
        elementos etc...
    </main>

    <link rel="stylesheet" href="footer.css">
    <footer>
        elementos etc...
    </footer>

</body>

</html>

This way I first put the critical CSS and later it comes rendering the rest of the CSS that is below the first fold.

Can I consider that the document will be rendered in steps then from top to bottom? Like this, the browser will make the request of <link rel="stylesheet" href="header.css"> ai renderiza, then will make the request of <link rel="stylesheet" href="main.css"> ai renderiza, etc...

This will give the user the impression, or even in fact, will load the page faster?

html css performance browser http-request
No answers

Browser other questions tagged html css performance browser http-request

You are not signed in. Login or sign up in order to post.