Scripts en HTML: El mejor sitio dónde Incluirlos
En este tutorial aprenderás cuál es el mejor lugar en el que puedes incluir los scripts en HTML. Esto es algo que ya hemos visto cuando hemos creado una plantilla básica HTML, pero aquí verás una explicación más detallada.
Hace un tiempo no era recomendable colocar las etiquetas <script> en la sección <head> de los documentos HTML. La mejor práctica consistía en situar las etiquetas <script> que incluyen código JavaScript justo antes la etiqueta de cierre </body>.
Esto es debido a que los navegadores cargan el código HTML desde la parte superior de los documentos hasta el fondo. Lo primero que se carga es la cabecera <head> y seguidamente el body <body> y todo lo que contiene en su interior. Si incluyes los scrips en la sección head, la carga del archivo JavaScript referenciado bloqueará el análisis del código HTML posterior hasta que el script se haya cargado y ejecutado. Esto puede ocasionar también problemas.
- Si el código JavaScript de alguno de tus scripts altera el código HTML nada más cargarse, no ocurrirán dichos cambios y puede que se produzcan errores, ya que el código HTML todavía no se habrá cargado.
- Por otro lado, el tiempo de carga de tu página puede que sea considerablemente largo es el tamaño de tus archivos JavaScript es demasiado grande. A mayor cantidad de código JavaScript, mayores serán los tiempos de carga. Sin embargo, si optas por incluir los archivos JavaScript justo antes de la etiqueta
</body>, la parte más importante de la página ya se habrá renderizado cuando se carguen estos archivos.
Incluyendo los Scripts en HTML justo al final del documento, darás un valioso tiempo al navegador para que cargue el código HTML antes de que cargue el código JavaScript, evitando errores y acelerando los tiempo de respuesta. Además, mejorarás tu puntuación en la herramienta Google Page Insights.
Sin embargo, el uso de los atributos async o defer eliminan la mayor parte de estos problemas derivados de la carga de scripts en la cabecera, ya que se descargarán de forma asíncrona. Es decir, el análisis de código HTML sucede a la vez que se descargan los scripts. Para más información acerca de estos atributos, consulta cómo cargar scripts con async y defer.
Esta es la recomendación general para incluir los scripts en HTML:
- Si usas los atributos
asyncodefer, incluye los scripts en el head. - Si no usas los atributos
asyncodefer, incluye los scripts antes de la etiqueta de cierre</body>.
Seguramente te estés preguntando que por qué no ves errores cuando llevas toda la vida incluyendo los scripts en la cabecera sin usar async / defer. Muy sencillo; cuando incluyes scripts como jQuery, sueles usar una función que espera a que todo el código HTML se haya cargado antes de ejecutar ciertas funciones. Se trata de la función $("document").ready. Aquí tienes un ejemplo:
$("document").ready(function(){
// Aquí va tu código
});La función ready esperará a que el documento esté listo, tal y como su nombre indica. Muchos otros scripts incluyen funciones similares. Decir que, aunque esto en teoría funciona, afectará enormemente al rendimiento de tu página, traduciéndose en un menor número de visitas desde Google.
Espero que esta pequeña guía sobre donde incluir los Scripts en HTML os haya sido útil.
Acerca del Autor