Defer vs Async JavaScript y cómo afecta a los Core Web Vitals
Aprende cuándo usar async JavaScript y cuándo usar defer para los mejores resultados de Core Web Vitals
Defer vs Async JavaScript y cómo afecta a los Core Web Vitals
En este artículo mostraré la diferencia entre defer vs async JavaScript y por qué esto afecta a los Core Web Vitals
Cada vez que audito los Core Web Vitals de un cliente, a menudo encuentro que hay poca distinción en una página entre el bloqueo del analizador (sync), JavaScript asíncrono o diferido (deferred). Es una lástima porque diferentes scripts tienen diferentes tiempos óptimos.
Table of Contents!
En resumen:
El JavaScript 'normal' en el head de la página se ejecuta antes de que comience el análisis del html, los scripts async no bloquean el inicio del análisis pero se ejecutan tan pronto como se descargan. Los scripts deferred se ejecutan después de que la página ha sido analizada.
En general, el atributo async es una buena opción para scripts que no necesitan interactuar con el DOM, como scripts que cargan imágenes o videos. El atributo defer es una buena opción para scripts que necesitan interactuar con el DOM, como scripts que inicializan widgets o agregan escuchas de eventos. Omita ambos si su script realiza cambios masivos en el viewport visible.
1. JavaScript Síncrono (Sync):
Por defecto, los JavaScripts en el head de la página son scripts síncronos. Cuando el código JavaScript se ejecuta sincrónicamente, bloquea inmediatamente el hilo principal del navegador hasta que el script se ejecuta por completo. Esto significa que el navegador debe esperar a que el código JavaScript termine antes de continuar con otras tareas, como renderizar el DOM. Como resultado, el JavaScript síncrono puede impactar significativamente la velocidad de la página y la capacidad de respuesta, especialmente para scripts más grandes y complejos. Cuando una página contiene JavaScript síncrono, el navegador no puede cargar otros recursos o renderizar la página hasta que se ejecute el JavaScript, lo que lleva a posibles retrasos en la carga de la página.
<!DOCTYPE html>
<html>
<head>
<title>Sync JavaScript Example</title>
<script src="script1.js"></script>
<script src="script2.js"></script>
</head>
<body>
<!-- Page content here -->
</body>
</html>
2. JavaScript Asíncrono (Async):
El JavaScript asíncrono permite al navegador continuar ejecutando otras tareas mientras el script se descarga en segundo plano. Al usar el atributo async en la etiqueta <script>, los desarrolladores indican que el script no depende del DOM y puede ejecutarse de forma independiente. El navegador no espera a que el script async termine de cargarse antes de continuar con el renderizado de la página. Como resultado, los scripts async tienen el potencial de mejorar la velocidad de la página, especialmente en conexiones más lentas, ya que no bloquean la ruta crítica de renderizado.
<!DOCTYPE html>
<html>
<head>
<title>Async JavaScript Example</title>
<script src="script1.js" ></script>
<script src="script2.js" ></script>
</head>
<body>
<!-- Page content here -->
</body>
</html>
Es importante tener en cuenta que los scripts async pueden dispararse en un orden impredecible, ya que se ejecutan tan pronto como están disponibles, independientemente de su orden en el documento HTML. Si los scripts dependen unos de otros, usar async puede causar errores de dependencia.
3. JavaScript Diferido (Deferred):
El JavaScript diferido, indicado por el atributo defer en la etiqueta <script>, permite que los scripts se descarguen en segundo plano mientras el navegador continúa analizando el documento HTML. De manera similar a async, los scripts deferred no bloquean la ruta crítica de renderizado, lo que lleva a una carga de página más rápida. Sin embargo, la diferencia clave es que los scripts deferred mantienen su orden de ejecución, ejecutándose en el orden en que aparecen en el documento HTML. Los scripts deferred se ejecutan después de que el DOM está completamente analizado y justo antes de que se dispare el evento DOMContentLoaded.
<!DOCTYPE html>
<html>
<head>
<title>Defer JavaScript Example</title>
<script src="script1.js" ></script>
<script src="script2.js" ></script>
</head>
<body>
<!-- Page content here -->
</body>
</html>
El uso de defer es beneficioso para scripts que dependen del DOM y necesitan ejecutarse en un orden específico, ya que asegura que los elementos del DOM necesarios estén disponibles cuando se ejecuta el script. Esto puede ser ventajoso para scripts que realizan manipulación del DOM o tienen dependencias de otros scripts.
| Atributo | Cuándo se carga el script | Cuándo se ejecuta el script |
|---|---|---|
none | En segundo plano | Antes de construir el DOM |
async | En segundo plano | Inmediatamente después de cargar |
defer | En segundo plano | Después de que el resto de la página ha sido analizada, en el orden en que aparece en el HTML |
¿Cómo mejoran async y defer la velocidad de la página?
El JavaScript síncrono (Sync) puede ralentizar significativamente la carga de la página y hacer que el sitio web responda menos, especialmente si los scripts son grandes o tardan mucho en ejecutarse.
El JavaScript asíncrono (Async) puede mejorar la velocidad de la página al permitir que scripts independientes se carguen en paralelo con otros recursos. Sin embargo, se debe tener cuidado al administrar las dependencias correctamente para evitar comportamientos inesperados.
El JavaScript diferido también puede mejorar la velocidad de la página al no bloquear la ruta crítica de renderizado. Asegura que el DOM esté listo antes de ejecutar scripts que dependen de él, lo que lleva a un orden de ejecución más predecible y controlado.
Mejores Prácticas:
- Use asíncrono (async) para scripts independientes que no dependen del DOM y pueden ejecutarse fuera de orden.
- Use diferido (defer) para scripts que dependen del DOM y necesitan ejecutarse en un orden específico, especialmente al realizar manipulación del DOM.
- Evite usar JavaScript síncrono siempre que sea posible, ya que impacta negativamente la velocidad de la página y la experiencia del usuario.
Al usar la técnica de carga adecuada para archivos JavaScript, puede optimizar la velocidad de la página, mejorar la experiencia del usuario y asegurar interacciones más fluidas en sus sitios web. Entender las diferencias entre sync, async y defer y sus implicaciones en la carga de la página es esencial para construir aplicaciones web de alto rendimiento.
Tenga en cuenta que la efectividad del uso de atributos sync, async o defer puede variar según el contexto específico y el contenido del sitio web. Las pruebas regulares y el análisis de rendimiento son cruciales para ajustar la estrategia de carga de la página y asegurar resultados óptimos para diferentes escenarios.
Llevándolo un paso más allá, cargar scripts bajo demanda
Async y defer pueden acelerar una página al no bloquear el analizador, pero es importante notar que 'diferir scripts' no resolverá todos sus problemas. Por ejemplo, el elemento largest contentful paint es vulnerable a la competencia de red y CPU causada por scripts deferred y async. El interaction to next paint también se ve afectado por scripts que se ejecutan temprano durante la carga de la página. Por eso, siempre que sea posible, debe cargar scripts bajo demanda para tener más control sobre su impacto en el rendimiento de la página. ¿Curioso? Lea cómo cargamos scripts bajo demanda
Find out what is actually slow.
I map your critical rendering path using real field data. You get a clear answer on what blocks LCP, what causes INP spikes, and where layout shifts originate.
Book a Deep Dive
