Comment utiliser les balises async et defer pour optimiser le chargement de vos pages

Comprendre l’impact du chargement des scripts sur la performance web

Lorsque vous intégrez des fichiers JavaScript dans une page HTML, leur chargement peut bloquer le rendu du contenu. Par défaut, le navigateur interrompt la construction du DOM pour télécharger et exécuter chaque script. Cela ralentit l’affichage et nuit à l’expérience utilisateur. Les attributs async et defer offrent deux solutions pour gérer ce blocage. Leur bonne utilisation est essentielle pour tout développeur soucieux de la vitesse de chargement.

Quelle est la différence entre async et defer ?

Avant d’expliquer comment utiliser les balises async et defer, il faut comprendre leur comportement distinct. Tous deux permettent un téléchargement asynchrone du script, mais leur moment d’exécution diffère.

Le comportement par défaut : le blocage du rendu

Sans attribut, le navigateur télécharge et exécute le script immédiatement, en bloquant le parsing HTML. C’est le mode le plus lent, à éviter pour les scripts non critiques.

L’attribut async : exécution dès que possible

Avec async, le script est téléchargé en parallèle du parsing HTML. Dès que le téléchargement est terminé, le parsing est interrompu pour exécuter le script. Cela signifie que l’ordre d’exécution n’est pas garanti : si plusieurs scripts async sont présents, celui qui se télécharge en premier s’exécute en premier.

L’attribut defer : exécution après le parsing

Avec defer, le script est téléchargé en parallèle, mais son exécution est repoussée après la fin du parsing HTML complet. Les scripts defer sont exécutés dans l’ordre où ils apparaissent dans le document. C’est idéal pour les scripts qui dépendent du DOM ou qui doivent s’exécuter dans un ordre précis.

Quand utiliser async ou defer ? Guide pratique

Le choix dépend du type de script et de son rôle dans la page. Voici un tableau récapitulatif pour vous aider à décider :

Comment implémenter async et defer dans votre code HTML

L’implémentation est simple : il suffit d’ajouter l’attribut dans la balise <script>. Voici des exemples concrets.

Exemple avec async

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

Ce script sera téléchargé sans bloquer le parsing, et exécuté dès son téléchargement terminé.

Exemple avec defer

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

Ici, le script sera exécuté après le parsing complet du HTML, dans l’ordre où il apparaît.

Combinaison avec d’autres scripts

Si vous avez plusieurs scripts, placez ceux avec defer dans l’ordre des dépendances. Les scripts async peuvent être placés n’importe où, mais attention à l’ordre d’exécution.

Les erreurs fréquentes à éviter

Même avec une bonne compréhension, certaines erreurs reviennent souvent. Les voici :

• Utiliser async pour des scripts qui dépendent du DOM : le script peut s’exécuter avant que le DOM ne soit prêt, provoquant des erreurs.
• Mélanger async et defer sans ordre : les scripts async peuvent s’exécuter avant les scripts defer, même s’ils apparaissent après dans le code.
• Oublier l’attribut pour des scripts non critiques : laisser le comportement par défaut bloque le rendu inutilement.
• Utiliser async pour des scripts qui doivent être exécutés dans un ordre précis : l’ordre n’est pas garanti.

Checklist pour optimiser vos scripts avec async et defer

Suivez cette checklist pour vous assurer de bien utiliser ces attributs :

• ☐ Identifier les scripts critiques (ceux qui affectent l’affichage initial) : ils doivent rester sans attribut ou être chargés en tête.
• ☐ Pour les scripts non critiques (analytics, tracking) : utiliser async.
• ☐ Pour les scripts qui interagissent avec le DOM ou ont des dépendances : utiliser defer.
• ☐ Tester l’ordre d’exécution avec plusieurs scripts defer : ils s’exécutent dans l’ordre.
• ☐ Vérifier que les scripts async n’ont pas de dépendances entre eux.
• ☐ Utiliser les outils de développement (onglet Network) pour observer le chargement.

Impact sur le référencement et l’expérience utilisateur

Une page qui se charge rapidement est mieux classée dans les résultats de recherche. Google prend en compte la vitesse de chargement, notamment via les Core Web Vitals. En utilisant correctement async et defer, vous réduisez le temps de blocage du rendu, ce qui améliore le Largest Contentful Paint (LCP) et le First Input Delay (FID). De plus, l’utilisateur voit le contenu plus rapidement, ce qui réduit le taux de rebond.

Questions fréquentes sur async et defer

Puis-je utiliser async et defer ensemble sur la même balise script ?

Non, ce n’est pas recommandé. Si vous utilisez les deux, async prend le pas sur defer dans les navigateurs modernes. Mieux vaut choisir l’un ou l’autre.

Les scripts avec async ou defer sont-ils compatibles avec tous les navigateurs ?

Oui, tous les navigateurs modernes supportent ces attributs. Les très vieux navigateurs (IE9 et antérieurs) peuvent ne pas les supporter, mais cela reste rare.

Dois-je placer les scripts dans le head ou avant la fermeture du body ?

Avec defer, vous pouvez placer les scripts dans le head, car ils seront exécutés après le parsing. Avec async, l’emplacement n’a pas d’importance pour le blocage, mais traditionnellement on les place dans le head ou en fin de body. Pour une performance optimale, placez les scripts non critiques en fin de body.

Recommandations pour une stratégie de chargement efficace

Pour tirer le meilleur parti de ces attributs, voici nos conseils :

• Analysez vos scripts : listez tous les scripts de votre page et classez-les selon leur criticité.
• Utilisez defer par défaut pour la plupart des scripts, car il préserve l’ordre et n’interrompt pas le rendu.
• Réservez async aux scripts vraiment indépendants et non essentiels.
• Testez avec Lighthouse ou PageSpeed Insights pour mesurer l’impact.
• Envisagez le chargement différé (lazy loading) pour les scripts lourds non utilisés immédiatement.

En maîtrisant l’utilisation des balises async et defer, vous améliorez significativement les performances de vos pages web. N’hésitez pas à expérimenter et à mesurer les résultats pour trouver la configuration idéale pour votre projet.

Photo by Artem Beliaikin on Unsplash