Volver a la página principal
lunes 10 febrero 2025
8

Mejor ubicación para colocar los <script src=""> en HTML

La ubicación de las etiquetas <script src=""> en un documento HTML puede afectar el rendimiento y la velocidad de carga de la página. Existen dos lugares principales donde se pueden colocar: en la <head> y antes del cierre de </body>.

1. En la <head> (NO recomendado para scripts bloqueantes)

Si colocas los scripts en el <head>, el navegador los descargará y ejecutará antes de renderizar el contenido de la página. Esto puede retrasar la carga de la página, ya que los scripts bloquean el renderizado hasta que se ejecutan.

Ejemplo: 

<head>
    <script src="script.js"></script>
</head>

Cuándo usarlo:

✅ Para scripts críticos, como Google Analytics o configuraciones iniciales.

❌ No es recomendable para scripts grandes que afecten la carga de la página.

2. Antes del cierre de </body> (RECOMENDADO)

La mejor práctica es colocar los scripts justo antes de </body>. Esto permite que el HTML y CSS se carguen primero, mejorando el tiempo de renderizado y la experiencia del usuario.

Ejemplo: 

<body>
    <h1>Hola, mundo</h1>
    <script src="script.js"></script>
</body>

✅ Mejora la velocidad de carga y el rendimiento.

✅ Evita que los scripts bloqueen el renderizado.

3. Uso de async y defer para optimización

Si necesitas cargar scripts en el <head> sin afectar la velocidad, puedes usar los atributos async y defer.

  • async: Descarga y ejecuta el script en paralelo sin esperar a que se cargue el HTML (ideal para scripts independientes).
  • defer: Descarga el script en paralelo pero lo ejecuta solo cuando el HTML ha sido completamente cargado (ideal para scripts que dependen del DOM).

Ejemplo: 

<head>
    <script src="script.js" async></script> <!-- Se ejecuta tan pronto como se descarga -->
    <script src="otro-script.js" defer></script> <!-- Se ejecuta después de cargar el DOM -->
</head>

Conclusión

Ubicación Pros Contras
<head> Carga scripts críticos antes del renderizado Bloquea la carga de la página
</body> (recomendado) Mejora la velocidad de carga y el renderizado Puede retrasar scripts críticos
<head> con async o defer Permite optimización sin bloquear No siempre compatible con todos los scripts

Mejor práctica

Coloca los scripts antes del </body> o usa defer en el <head> para optimizar la carga.

Etiquetas:
html
Compartir:
Creado por:
Author photo

Jorge García

Fullstack developer