Article

Async et Defer en JavaScript : Optimiser le Chargement de vos Scripts

Vues: 674Catégorie: programmation

BZHWEBCREATON le 4 décembre 2024Modifier le 22 janvier 2025

La rapidité de chargement d’une page web est un élément crucial pour offrir une impression positive à vos visiteurs et pour être bien référencé par Google.
En effet, Google évalue la qualité d’un site internet à l’aide de robots d’indexation (appelés crawlers en anglais) qui parcourent le web. Si une page met trop de temps à charger, Google pénalisera votre référencement naturel (SEO - Search Engine Optimization). En d’autres termes, votre site n’apparaîtra pas dans les premiers résultats de recherche (top SERP).

Vous pouvez mesurer la performance d’une page internet grâce à l’outil dédié de Google : PageSpeed Insights.
JavaScript est un langage de programmation qui permet d’exécuter du code sur votre site web. La manière dont ces scripts sont chargés et exécutés peut avoir un impact significatif sur les performances de votre site.

Nous allons voir dans cet article les deux attributs async et defer pour la <script>. Ces deux outils puissants permettent de contrôler le chargement et l’exécution des scripts de manière plus efficace.

Comprendre ces attributs peut considérablement améliorer le temps de chargement et l’ expérience utilisateur de votre site.

Comprendre le Problème

Par défaut, lorsque vous incluez un script avec la balise <script> dans une de vos pages HTML, votre navigateur internet (Firefox, Google Chrome, etc.) met en pause le rendu de la page pour télécharger et exécuter le script.

Pourquoi ?

Typiquement, les scripts sont placés dans l’entête de votre site internet, à l’intérieur de la balise <head>, donc avant votre contenu. Étant donné que la lecture et l’exécution du code HTML se font de haut en bas de manière séquentielle, les scripts seront exécutés en premier. Vous comprenez bien qu’en fonction de la nature du script (volumineux, échange avec le serveur, etc.), cela peut entraîner des retards dans le rendu de la page. Vous ne voulez pas laisser une mauvaise impression à vos visiteurs avec une page incomplète. Cela impactera négativement votre référencement naturel.

<head>
   <title>BZH WEB CREATION – Concepteur de sites internet</title>
   <script src="script.js"></script>
</head>

Présentation de l’Attribut defer

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

L’attribut defer permet d’exécuter le script après que le DOM (Document Object Model), soit la structure de la page HTML, devienne entièrement disponible.
À ce stade, ni les images, les styles CSS ou les autres ressources ne sont chargées. Plus précisément, defer se déclenche juste avant l’événement DOMContentLoaded. L’intérêt de defer est double. Le script se charge en parallèle sans ralentir le rendu de votre page. Et le script peut agir sur les éléments du DOM (boutons, etc.) sans avoir à s’inquiéter du chargement des images ou du CSS qui arrivera après DOMContentLoaded.

À titre d’information, cet événement correspond à l’événement load. Le script se charge en parallèle sans ralentir le rendu de votre page. Nous verrons que contrairement à async, l’ordre des scripts est préservé.
L’intérêt pour cette balise est à nuancer. En effet, les navigateurs web sont de plus en plus performants et disposent de techniques pour optimiser ce genre de choses.

Présentation de l’Attribut async

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

Passons maintenant à l’attribut async. Celui-ci est le diminutif d’ asynchrone. Quelque chose d’asynchrone est avant tout un état non bloquant. Pour donner un exemple de la vie courante, imaginez que vous attendez un coup de téléphone.
Mais au lieu d’attendre sans rien faire, vous faites d’autres choses. Dans notre cas, cela signifie que notre script s’exécutera dès que possible.

Tout comme defer, l’attribut async ne bloque pas le rendu de la page. Cependant, contrairement à defer, il ne respecte pas l’ordre d’apparition dans le code HTML. Cela signifie que si votre script dépend d’un autre pour fonctionner, selon le moment où il s’exécutera, cela pourra provoquer des erreurs.

Quand utiliser l’un plutôt que l’autre ?

Les deux attributs ont en commun de ne pas bloquer le rendu de votre site. Cependant, ils diffèrent sur le moment où ils seront réellement exécutés. L’attribut defer doit être utilisé lorsqu’il y a une dépendance entre des scripts, car il respecte l’ordre d’exécution.
Quant à l’attribut async, étant donné qu’il ne respecte pas cet ordre, il doit être utilisé uniquement si le script est indépendant et si l’exécution à un moment précis n’est pas importante.

Une Autre Technique avec des Effets Similaires à defer

Une autre technique, qui produit des effets similaires à l’attribut defer, était couramment utilisée il y a plusieurs années. Elle consistait à placer les balises <script> tout en bas de la page, juste avant la balise de fermeture </body>.

Cependant, cette méthode est de moins en moins utilisée aujourd’hui. En partie parce que l’attribut defer reste plus performant : le script s’exécutera plus rapidement tout en respectant l’ordre.

A lire aussi : Déployer le headless CMS Strapi 5 sur le CPanel de O2Switch

Conclusion

J’espère que ce court article vous aura donné une bonne idée de ce que sont les attributs async et defer. En espérant qu’il vous permettra d’améliorer la rapidité de votre site internet.