Posicionando <link>
s no <head>
Colocar <link>
s no <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; HTML cria o DOM (Document Object Model) e CSS cria o CSSOM (CSS Object Model). Ambos são necessários para criar os visuais em um site, permitindo um rápido tempo de "primeira pintura significativa". Essa renderização progressiva é uma categoria de otimização em que os sites são medidos em suas pontuações de desempenho. Colocar as folhas de estilo perto da parte inferior do documento é o que proíbe 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 a uma página em branco. Outras vezes, pode haver flashes de conteúdo sem estilo (FOUC), que mostram uma página sem estilo aplicado.
Posicionando <script>
s logo antes de </body>
As tags <script>
bloqueiam a análise de HTML enquanto estão sendo baixadas e executadas, o que pode atrasar sua página. Colocar os scripts na parte inferior permitirá que o HTML seja analisado e exibido para o usuário primeiro.
Uma exceção para o posicionamento de <script>
s na parte inferior é quando seu script contém document.write()
, mas atualmente não é uma boa prática usar document.write()
. Além disso, colocar <script>
s na parte inferior significa que o navegador não pode começar a baixar os scripts até que todo o documento seja analisado. Isso garante que seu código que precisa manipular elementos do DOM não lançará um erro e interromperá 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 poderá baixar o script antes.
Tenha em mente que colocar scripts logo antes da tag </body>
de fechamento criará a ilusão de que a página carrega mais rápido em um cache vazio (já que os scripts não bloquearão o download do restante 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 depois que a página inteira for carregada. Se você colocar esses scripts na tag <head>
, eles começarão a ser executados antes - então, em um cache preparado, a página realmente pareceria carregar mais rápido.
As tags <head>
e <body>
agora são opcionais
De acordo com a especificação HTML5, certas tags HTML como <head>
e <body>
são opcionais. O guia de estilo do Google até recomenda removê-las para economizar bytes. No entanto, essa prática ainda não é amplamente adotada e o ganho de desempenho provavelmente será mínimo e, para a maioria dos sites, provavelmente não fará diferença.