En Dónde Incluir los Scripts en HTML

htmljQuery

En este tutorial aprenderás cuál es el mejor lugar en el que puedes incluir los scripts dentro de tus documentos 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.

  1. 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.
  2. 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 archivos JavaScript 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:

  • Si usas los atributos async o defer, incluye los scripts en el head.
  • Si no usas los atributos async o defer, 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 os haya sido útil.


Avatar de Edu Lazaro

Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado esta guía. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirla en Twitter 😊

Si quieres conocer mis proyectos, sígueme en Twitter.

1 comentario en “En Dónde Incluir los Scripts en HTML

  1. Hola Edu,

    ¿Qué opinas sobre cargar scripts de terceros en el head como Google Tag Manager? ¿Es necesario que este script este en el head? ¿Si se colocara justo antes de la etiqueta de cierre del body podría suponer alguna perdida en datos de anaítica?

    Muchas gracias y felicidades por tu blog! Es muy muy útil.

Responder a Antonio Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

“- Hey, Doc. No tenemos suficiente carretera para ir a 140/h km. - ¿Carretera? A donde vamos, no necesitaremos carreteras.”