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 arel
attribute that contains only keywords that are body-ok, then the element is said to be allowed in thebody
. 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 delink
dastylesheet
é body-ok e, portanto, a<link rel = "stylesheet">
é permitida nobody
.
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?