Por que geralmente é uma boa ideia posicionar os CSS `<link>` entre `<head></head>` e os JS `<script>` logo antes de `</body>`?
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.