Chargement Asynchrone : Définition, async vs defer, Performance

Qu'est-ce que le chargement asynchrone ?

Le chargement asynchrone est la pratique de fetcher des ressources (scripts, stylesheets, images, modules code) sans bloquer le parsing, rendering ou main thread de la page. Bien fait peut raser des secondes du page load — mal fait cause des layout shifts, race conditions et moins bonne UX que le chargement synchrone.

Techniques chargement async

async vs defer

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

Lazy-loading image

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

Dynamic imports pour code splitting

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

Patterns chargement données 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())
]);

Best practices chargement async

• Utiliser defer pour scripts app.
• Utiliser async pour analytics + ads.
• Lazy-load images below-the-fold.
• Eager-load image LCP.
• Code-split routes.
• Promise.all pour fetches concurrents.
• Montrer loading states.
• Gérer erreurs.
• Throttle/debounce ops async coûteuses.

Pièges courants

• async sur code app nécessitant DOM.
• Lazy-load image above-the-fold.
• Awaits séquentiels quand parallèle possible.
• Oublier gestion erreurs sur async.
• Pas de loading state.
• Race conditions.
• Memory leaks de async non annulé.
• Await bloquant dans critical path.

FAQ : chargement asynchrone

async vs defer : lequel utiliser ?

defer pour votre code ; async pour third-party indépendant.

Le lazy-loading fonctionne-t-il sur tous les navigateurs ?

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

Comment dynamic import affecte-t-il la taille du bundle ?

Dramatiquement — code splité en chunks séparés.

Devrais-je lazy-load toutes les images ?

Non — seulement below-the-fold.

Qu'est-ce qu'une race condition en code async ?

Deux ops async finissent dans un ordre inattendu.

Comment annuler un fetch async ?

AbortController.

Différence entre Promise et async/await ?

La même chose — async/await est du syntactic sugar.

Testez l'impact chargement async avec LoadFocus

LoadFocus exécute des audits Lighthouse depuis 25+ régions, mesurant LCP/INP/TBT. Inscrivez-vous sur loadfocus.com/signup.