Async loading
A
Definition complete
L'async loading (chargement asynchrone) est une technique de performance web permettant de charger des ressources (scripts, images, donnees) sans bloquer le rendu de la page.
Methodes de chargement asynchrone :
- async (attribut) : Le script se telecharge et s'execute des que possible, sans ordre garanti
- defer (attribut) : Le script se telecharge pendant le parsing, s'execute apres
- Lazy loading : Chargement differe des images hors viewport
- Dynamic import : Modules JS charges a la demande (
import())
Le chargement asynchrone ameliore le Time to Interactive (TTI) et les Core Web Vitals.
Exemples pratiques
- async :
<script async src="analytics.js"></script> - defer :
<script defer src="app.js"></script> - Lazy images :
<img loading="lazy" src="photo.jpg"> - Code splitting : Charger les composants React uniquement quand necessaires
A quoi sert Async loading ?
- Accelerer le chargement initial de vos pages web
- Ameliorer les scores Lighthouse et Core Web Vitals
- Reduire le Time to Interactive pour une meilleure UX
- Optimiser le chargement des scripts tiers (analytics, pubs)
Async loading en pratique chez 123web
Chez 123web, nous implementons systematiquement le chargement asynchrone pour optimiser les performances. Scripts, images et modules sont charges intelligemment pour une experience utilisateur fluide.