Colocación de <link> en el <head>
Colocar los <link> en el <head> es parte de la especificación adecuada para construir un sitio web optimizado. Cuando una página se carga por primera vez, el HTML y el CSS se analizan simultáneamente; el HTML crea el DOM (Document Object Model) y el CSS crea el CSSOM (CSS Object Model). Ambos son necesarios para crear los elementos visuales en un sitio web, lo que permite un tiempo de 'primera pintura significativa' rápido. Esta renderización progresiva es una categoría de optimización en la que se miden los sitios en sus puntuaciones de rendimiento. Colocar las hojas de estilo cerca del final del documento es lo que prohíbe la renderización progresiva en muchos navegadores. Algunos navegadores bloquean la renderización para evitar tener que volver a pintar elementos de la página si sus estilos cambian. El usuario se queda viendo una página en blanco. Otras veces puede haber destellos de contenido sin estilo (FOUC), que muestran una página web sin estilo aplicado.
Colocación de <script> justo antes de </body>
Las etiquetas <script> bloquean el análisis de HTML mientras se descargan y ejecutan, lo que puede ralentizar tu página. Colocar los scripts en la parte inferior permitirá que el HTML se analice y se muestre al usuario primero.
Una excepción para la posición de los <script> en la parte inferior es cuando tu script contiene document.write(), pero hoy en día no es una buena práctica usar document.write(). Además, colocar los <script> en la parte inferior significa que el navegador no puede comenzar a descargar los scripts hasta que se analice todo el documento. Esto asegura que tu código que necesita manipular elementos del DOM no arrojará un error y detendrá todo el script. Si necesitas colocar <script>s en el <head>, usa el atributo defer, que logrará el mismo efecto de ejecutar el script solo después de que se analice el HTML, pero el navegador puede descargar el script antes.
Ten en cuenta que colocar los scripts justo antes de la etiqueta de cierre </body> creará la ilusión de que la página se carga más rápido en una caché vacía (ya que los scripts no bloquearán la descarga del resto del documento). Sin embargo, si tienes algún código que quieres ejecutar durante la carga de la página, solo comenzará a ejecutarse después de que se haya cargado toda la página. Si colocas esos scripts en la etiqueta <head>, comenzarían a ejecutarse antes, por lo que en una caché preparada la página parecería cargarse más rápido.
Las etiquetas <head> y <body> ahora son opcionales
Según la especificación HTML5, ciertas etiquetas HTML como <head> y <body> son opcionales. La guía de estilo de Google incluso recomienda eliminarlas para ahorrar bytes. Sin embargo, esta práctica aún no está ampliamente adoptada y la ganancia de rendimiento probablemente será mínima y para la mayoría de los sitios no importará.