Los archivos JavaScript pueden bloquear el renderizado de tu sitio si no los cargás de forma inteligente. Con async y defer podés mejorar el rendimiento sin dejar de usar tus scripts favoritos.
¿Cuál es el problema con los scripts?
Cuando un navegador encuentra un <script> en tu HTML, por defecto detiene la carga del resto de la página hasta que ese script se descargue, se procese y se ejecute.
Esto se llama render-blocking y puede hacer que tu sitio se vea lento, incluso si el resto del contenido ya está listo.
¿Qué hacen async y defer?
Son dos atributos mágicos que podés agregar al tag <script> para cambiar cómo se cargan y ejecutan los JS:
async – Carga en paralelo y ejecuta en cuanto esté listo
<script src="script.js" async></script>- Ideal para scripts que no dependen de nada (ej: analytics).
- No garantiza el orden si hay varios scripts con
async.
defer – Carga en paralelo pero ejecuta al final del HTML
<script src="script.js" defer></script>- Espera a que todo el HTML esté listo antes de ejecutar.
- Respeta el orden si tenés varios scripts con
defer. - Ideal para scripts que modifican el DOM.
¿Qué opción conviene usar?
| Tipo de script | ¿Usa el DOM? | ¿Depende del orden? | ¿Qué usar? |
|---|---|---|---|
| Google Analytics, Chat, Ads | No | No | async |
| Tu JS principal (DOM, eventos, etc.) | Sí | Sí | defer |
| JS que bloquea algo importante | Sí | Tal vez | Revisar si se puede diferir |
¿Y si los scripts están en línea?
Los scripts inline (escritos directamente en el HTML) no aceptan async ni defer. Pero si los podés mover a un archivo externo, ya podés optimizar cómo se cargan.
¿Cómo saber si tus scripts bloquean?
Pasá tu web por PageSpeed Insights o abrí las DevTools → pestaña "Performance" para ver si tenés JS bloqueando el render.
Conclusión
Con solo agregar async o defer podés mejorar notablemente cómo se comportan tus scripts en la carga inicial. Es una de las formas más fáciles de optimizar sin cambiar ni una línea de tu lógica JavaScript. Más velocidad, sin perder funcionalidad 😎
