3

Según entiendo el orden de los css y los js afecta y no se trata sólo de una cuestión estética 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. Dicho ¿Cual es la manera correcta colocarlos arriba y abajo? Realizo esta pregunta por que siento que mi aplicación web esta un poco lenta gracias a los js que le he ido agregado.

Si la pregunta esta mal realizada o no va con esta web, puesto yo mismo la puedo eliminar y si es me disculpan la ignorancia.

3
  • 3
    esto responde parcialmente la pregunta(acerca del js pero no del css) es.stackoverflow.com/questions/25088/…
    – Rene Limon
    el 5 ene. 2017 a las 18:21
  • bueno creo que lo que influye en relentizamiento de un sistema seria el js.
    – bypabloc_
    el 5 ene. 2017 a las 18:23
  • 1
    para verificar que en realidad son los js los que causan el problema intenta quitarlos y hacer una petición a la pagina. Si la página carga mas rápido en comparación a cuando si están, entonces, en efecto son los js los que causan el problema.
    – Rene Limon
    el 5 ene. 2017 a las 18:26

3 respuestas 3

2

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

1

Tu pregunta es algo debatible ya que influye mucho lo que haga la página al momento de iniciar.

En mi experiencia es poner los .css en el <head> y los .js al final del <body> similar a lo siguiente

<head>
<link href="mynew.css" rel="stylesheet" type="text/css" />
</head>
<body>
... mi html
<script src="myJavaScript.js" type="text/javascript"></script>
<body>

ya que los css se cargan al principio para darle la interfaz a la pagina, y la funcionalidad que son los js se agregan al final, ya que muchas veces no se necesita funcionalidad al iniciar, de igual manera al estar de ultimo la carga es más rápida pues muestra la información al usuario, a pesar de no haber cargado la funcionalidad.

También comento que si llegas a necesitar que se ejecute una función al abrir la página puede incluir el js de dicha función en el head.

Espero te sirva de ayuda.

1

Buenas tardes Pablo, todo lo que comentas en tu pregunta tiene relevancia tanto la estetica y orden de codigo y el RENDIMIENTO a la hora de cargar.

Cuando iniciamos en el desarrollo web sabemos que <head> ... </head> tiene un papel relevante para cargar archivos ya que es la primera sección que a carga pero recordando que todo es Asincrono. y luego al final del <body> ... <script src="script.min.js" type="text/javascript /> </body> solemos colocar nuestros script.

Existen mil maneras de hacer las cosas pero todo depende de lo que estemos programando. si nuestra App Web requiere de funcionalidad JS y en el HEAD agregastes muchos archivos a cargar (Css, Fonts, etc.! ) al momento de cargar tus script de funcionalidad se vera algo mermado y tardío al realizar las funciones que debían hacer al cargar la web. si este es tu caso te recomiendo que coloques esos Script en le HEAD.

Consejos:

  1. Usa CDN para cargar Librerias
  2. Minifica tus Script
  3. Usa Preprocesadores Css (Sass, Less, Stylus) y minifica tus Css
  4. Lee sobre Webpack te ayudara Enorme

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.