No se trata sólo de una cuestión estética de limpieza y orden del código, sino que tiene relevancia en el tiempo de carga de la página y en la experiencia del usuario mientras se realiza dicha carga. Muchos estudios determinan que el tiempo medio de carga de una web está en torno a 7 segundos, y todo lo que lo supere hace perder visitantes que se marchan de la página antes de que cargue.
Para entender por qué es preferible colocar uno u otro elemento en una posición concreta, lo primero que hay que entender es cómo se procesa el código HTML.
El parser HTML lee las distintas etiquetas del documento y conforme se las va encontrando las añade al árbol DOM (Modelo de Objetos del Documento), una estructura de datos que permite manipular de modo más sencillo el modelo. También a medida que se crea el árbol DOM, se van renderizando los nodos ya procesados, de modo que al usuario la carga de la página le parezca gradual y no repentina al final.
Por tanto, tenemos el primer factor determinante en el tiempo de carga de una página: el tamaño de su árbol DOM. Resulta obvio que cuanto mayor sea, más tardará la página en cargarse. Y otro aspecto que también cae por su propio peso: los elementos que se encuentren antes en el documento, se dibujarán antes.
Por eso, es conveniente procurar que los elementos principales del contenido se muestren antes, de modo que el usuario tenga acceso a ellos aunque la página continúe a medio cargar. Por ejemplo, si tenemos una página con un título, una noticia simple y un menú muy complejo, lo mejor es situar primero en el HTML los elementos del título y la noticia, y que luego el CSS se encargue de organizarlos visualmente. Así, el visitante podrá empezar a leer el contenido que le interesa en lugar de esperar a que se carguen decenas de enlaces y botones que quizá no llegue a usar.
Referencia y mas info sobre el tema: https://www.genbetadev.com/desarrollo-web/css-arriba-scripts-abajo-y-otras-recomendaciones-para-optmizar-la-carga-de-paginas-web