Carga Asíncrona: Definición, async vs defer, Performance

¿Qué es carga asíncrona?

La carga asíncrona es la práctica de fetchear recursos (scripts, stylesheets, imágenes, módulos código) sin bloquear el parsing, rendering o main thread de la página. Hecho bien puede afeitar segundos del page load — hecho mal causa layout shifts, race conditions y peor UX que la carga síncrona.

Técnicas carga async

async vs defer

<script src="app.js"></script>
<script async src="analytics.js"></script>
<script defer src="app.js"></script>

Lazy-loading imagen

<img src="hero.jpg" loading="eager" width="1200" height="600">
<img src="footer.jpg" loading="lazy" width="800" height="200">

Dynamic imports para code splitting

button.addEventListener('click', async () => {
  const { openModal } = await import('./modal');
  openModal();
});

Patterns carga datos async

async function loadUsers() {
  const res = await fetch('/api/users');
  return res.json();
}

const [users, posts] = await Promise.all([
  fetch('/api/users').then(r => r.json()),
  fetch('/api/posts').then(r => r.json())
]);

Mejores prácticas carga async

• Usar defer para scripts app.
• Usar async para analytics + ads.
• Lazy-load imágenes below-the-fold.
• Eager-load imagen LCP.
• Code-split routes.
• Promise.all para fetches concurrentes.
• Mostrar loading states.
• Manejar errores.
• Throttle/debounce ops async expensive.

Pitfalls comunes

• async en código app que necesita DOM.
• Lazy-load imagen above-the-fold.
• Awaits secuenciales cuando paralelo posible.
• Olvidar manejo errores en async.
• Sin loading state.
• Race conditions.
• Memory leaks de async no cancelado.
• Await bloqueante en critical path.

FAQ: carga asíncrona

¿async vs defer: cuál usar?

defer para tu código; async para third-party independiente.

¿Funciona lazy-loading en todos los navegadores?

Native loading="lazy": ~95%+.

¿Cómo afecta dynamic import al tamaño bundle?

Dramáticamente — código se splitea en chunks separados.

¿Debería lazy-load todas las imágenes?

No — solo below-the-fold.

¿Qué es race condition en código async?

Dos ops async terminan en orden inesperado.

¿Cómo cancelo un fetch async?

AbortController.

¿Diferencia entre Promise y async/await?

La misma cosa — async/await es syntactic sugar.

Testea impacto carga async con LoadFocus

LoadFocus corre auditorías Lighthouse desde 25+ regiones, midiendo LCP/INP/TBT. Regístrate en loadfocus.com/signup.