2

Primeiramente:

Sabemos que algumas requisições feitas dentro do <head> do documento bloqueiam a renderização da página. E também sabemos que hj em dia é possível e permitido usar links de folhas de estilo dentro do 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.

Tradução: "Se um elemento de link tiver um atributo rel que contenha somente palavras-chave que sejam body-ok, então o elemento é considerado permitido no corpo. Isso significa que o elemento pode ser usado onde o phrasing content é esperado."

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

O que diz a Mozilla:

Um elemento <link> pode ocorrer no elemento <head> ou <body>, dependendo se ele possui um tipo de link que é body-ok. Por exemplo, o tipo de link da stylesheet é body-ok e, portanto, a <link rel = "stylesheet"> é permitida no body.

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


Pergunta:

Então posso considerar que o usuário vai ter uma percepção de que a página carregou mais rapidamente se eu estrutura meu documento assim?

<!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>

Dessa forma eu coloco primeiro o CSS crítico e posteriormente ele vem renderizando o resto do CSS que está abaixo da primeira dobra.

Posso considerar que o documento será renderizado em etapas então de cima para baixo? Tipo assim, o browser vai fazer a requizição do <link rel="stylesheet" href="header.css"> ai renderiza, depois vai fazer a requisição do <link rel="stylesheet" href="main.css"> ai renderiza, etc...

Isso vai dar para o usuária a impressão, ou até de fato, vai carregar a página de forma mais rápida?

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .