25 lines
3.4 KiB
Plaintext
25 lines
3.4 KiB
Plaintext
---
|
|
title: Por que geralmente é uma boa ideia posicionar os CSS `<link>` entre `<head></head>` e os JS `<script>` logo antes de `</body>`?
|
|
subtitle: Você conhece alguma exceção?
|
|
---
|
|
|
|
Em poucas palavras, posicionamento CSS `<link>`s and JavaScript `<script>`s permite uma renderização mais rápida da página e um melhor desempenho geral.
|
|
|
|
## Colocando `<link>`s em `<head>`
|
|
|
|
Colocar `<link>`s em `<head>` faz parte da especificação adequada na construção de um site otimizado. Quando uma página é carregada pela primeira vez, HTML e CSS são analisados simultaneamente; O HTML cria o DOM (modelo de objeto do documento) e o CSS cria o modelo de objeto CSSOM (CSS Object Model). Ambos são necessários para criar os elementos visuais de um site, permitindo um tempo rápido para o "primeiro desenho significativo" (first meaningful paint). Colocar o CSS<link>`s no `<head>\` garante que os estilos são carregados e prontos para uso quando o navegador começar a renderizar a página.
|
|
|
|
Esta renderização progressiva é uma métrica em que os sites são medidos na sua pontuação de desempenho. Colocar folhas de estilo perto do final do documento é o que impede a renderização progressiva em muitos navegadores. Alguns navegadores bloqueiam a renderização para evitar ter que repintar elementos da página se seus estilos mudarem. O usuário fica então preso visualizando uma página em branco. Outras vezes, podem ocorrer flashes de conteúdo não estilizado (FOUC), que mostram uma página da web sem a aplicação de estilos.
|
|
|
|
## Colocando `<script>`s logo antes `</body>`
|
|
|
|
`<script>` bloqueia a análise HTML enquanto eles estão sendo baixados e executados, o que pode diminuir a velocidade da sua página. Colocar o `<script>`s na parte inferior permitirá que o HTML seja analisado e exibido ao usuário primeiro.
|
|
|
|
Uma exceção para posicionamento de `<script>`s na parte inferior é quando o script contém `documento.write()`, mas hoje em dia não é uma boa prática usar `document.write()`. Também, colocar `<script>`s na parte inferior significa que o navegador não pode iniciar o download dos scripts até que o documento inteiro seja analisado. Isso garante que seu código que precisa manipular elementos DOM não irá lançar um erro e parar todo o script. Se você precisar colocar `<script>`s no `<head>`, use o atributo `defer`, que alcançará o mesmo efeito de executar o script somente depois que o HTML for analisado, mas o navegador pode expulsar a solicitação de rede antes de baixar o script.
|
|
|
|
Tenha em mente que colocar scripts antes da tag de fechamento `</body>` irá criar a ilusão de que a página carrega mais rápido em um cache vazio (já que os scripts não vão bloquear o download do resto do documento). No entanto, se você tiver algum código que deseja executar durante o carregamento da página, ele só começará a ser executado após o carregamento completo da página. Se você colocar esses scripts na tag \`<head>, eles começariam a ser executados antes, então em um cache carregado a página parece carregar mais rápido.
|
|
|
|
## As tags `<head>` e ` <body>` agora são opcionais
|
|
|
|
Como na especificação HTML5, certas tags HTML como `<head>` e`<body>` são opcionais. O guia de estilo do Google recomenda até a sua remoção para economizar bytes. No entanto esta prática ainda não é amplamente adotada e o ganho de desempenho é provavelmente mínimo e para a maioria dos sites isso não vai importar.
|