Defer vs Async JavaScript et comment cela affecte les Core Web Vitals
Apprenez quand utiliser async JavaScript et quand utiliser defer pour les meilleurs résultats Core Web Vitals
Defer vs Async JavaScript et comment cela affecte les Core Web Vitals
Dans cet article, je montrerai la différence entre defer et async JavaScript et pourquoi cela affecte les Core Web Vitals
Chaque fois que j'audite les Core Web Vitals d'un client, je constate souvent qu'il y a peu de distinction sur une page entre le blocage de l'analyseur (sync), le JavaScript asynchrone ou différé. C'est dommage car différents scripts ont des timings optimaux différents.
Table of Contents!
En bref :
Le JavaScript 'normal' dans le head de la page est exécuté avant que l'analyse du html ne commence, les scripts async ne bloquent pas le début de l'analyse mais sont exécutés dès qu'ils sont téléchargés. Les scripts deferred sont exécutés après que la page a été analysée.
En général, l'attribut async est un bon choix pour les scripts qui n'ont pas besoin d'interagir avec le DOM, comme les scripts qui chargent des images ou des vidéos. L'attribut defer est un bon choix pour les scripts qui doivent interagir avec le DOM, comme les scripts qui initialisent des widgets ou ajoutent des écouteurs d'événements. Omettez les deux si votre script apporte des modifications massives au viewport visible.
1. JavaScript Synchrone (Sync) :
Par défaut, les JavaScripts dans le head de la page sont des scripts synchrones . Lorsque le code JavaScript est exécuté de manière synchrone, il bloque immédiatement le thread principal du navigateur jusqu'à ce que le script soit entièrement exécuté. Cela signifie que le navigateur doit attendre que le code JavaScript se termine avant de procéder à d'autres tâches, telles que le rendu du DOM. En conséquence, le JavaScript synchrone peut avoir un impact significatif sur la vitesse de la page et la réactivité, en particulier pour les scripts plus volumineux et complexes. Lorsqu'une page contient du JavaScript synchrone, le navigateur ne peut pas charger d'autres ressources ou rendre la page tant que le JavaScript n'est pas exécuté, ce qui entraîne des retards potentiels dans le chargement de la page.
<!DOCTYPE html>
<html>
<head>
<title>Sync JavaScript Example</title>
<script src="script1.js"></script>
<script src="script2.js"></script>
</head>
<body>
<!-- Page content here -->
</body>
</html>
2. JavaScript Asynchrone (Async) :
Le JavaScript asynchrone permet au navigateur de continuer à exécuter d'autres tâches pendant que le script est téléchargé en arrière-plan. En utilisant l'attribut async dans la balise <script>, les développeurs indiquent que le script ne dépend pas du DOM et peut être exécuté indépendépendamment. Le navigateur n'attend pas que le script async finisse de charger avant de continuer le rendu de la page. En conséquence, les scripts async ont le potentiel d'améliorer la vitesse de la page, surtout sur des connexions plus lentes, car ils ne bloquent pas le chemin de rendu critique.
<!DOCTYPE html>
<html>
<head>
<title>Async JavaScript Example</title>
<script src="script1.js" ></script>
<script src="script2.js" ></script>
</head>
<body>
<!-- Page content here -->
</body>
</html>
Il est important de noter que les scripts async peuvent se déclencher dans un ordre imprévisible, car ils s'exécutent dès qu'ils sont disponibles, quel que soit leur ordre dans le document HTML. Si des scripts dépendent les uns des autres, l'utilisation de async peut causer des erreurs de dépendance.
3. JavaScript Différé (Deferred) :
Le JavaScript différé, indiqué par l'attribut defer dans la balise <script>, permet aux scripts d'être téléchargés en arrière-plan pendant que le navigateur continue d'analyser le document HTML. Similaire à async, les scripts différés ne bloquent pas le chemin de rendu critique, menant à un chargement de page plus rapide. Cependant, la différence clé est que les scripts différés maintiennent leur ordre d'exécution, s'exécutant dans l'ordre où ils apparaissent dans le document HTML. Les scripts différés sont exécutés après que le DOM est entièrement analysé et juste avant que l'événement DOMContentLoaded ne soit déclenché.
<!DOCTYPE html>
<html>
<head>
<title>Defer JavaScript Example</title>
<script src="script1.js" ></script>
<script src="script2.js" ></script>
</head>
<body>
<!-- Page content here -->
</body>
</html>
L'utilisation de defer est bénéfique pour les scripts qui dépendent du DOM et doivent être exécutés dans un ordre spécifique, car cela garantit que les éléments DOM nécessaires sont disponibles lorsque le script s'exécute. Cela peut être avantageux pour les scripts qui effectuent une manipulation du DOM ou ont des dépendances sur d'autres scripts.
| Attribut | Quand le script est chargé | Quand le script est exécuté |
|---|---|---|
none | En arrière-plan | Avant la construction du DOM |
async | En arrière-plan | Immédiatement après le chargement |
defer | En arrière-plan | Après que le reste de la page a été analysé, dans l'ordre où il apparaît dans le HTML |
Comment async et defer améliorent-ils la vitesse de la page (Page Speed) ?
Le JavaScript synchrone (Sync) peut ralentir considérablement le chargement de la page et rendre le site web moins réactif, surtout si les scripts sont volumineux ou prennent beaucoup de temps à s'exécuter.
Le JavaScript asynchrone (Async) peut améliorer la vitesse de la page en permettant aux scripts indépendants de se charger en parallèle avec d'autres ressources. Cependant, il faut veiller à gérer correctement les dépendances pour éviter un comportement inattendu.
Le JavaScript différé peut également améliorer la vitesse de la page en ne bloquant pas le chemin de rendu critique. Il garantit que le DOM est prêt avant d'exécuter les scripts qui en dépendent, menant à un ordre d'exécution plus prévisible et contrôlé.
Meilleures pratiques :
- Utilisez asynchrone (async) pour les scripts indépendants qui ne dépendent pas du DOM et peuvent être exécutés dans le désordre.
- Utilisez différé (defer) pour les scripts qui dépendent du DOM et doivent s'exécuter dans un ordre spécifique, surtout lors de la manipulation du DOM.
- Évitez d'utiliser le JavaScript synchrone autant que possible, car il impacte négativement la vitesse de la page et l'expérience utilisateur (user experience).
En utilisant la technique de chargement appropriée pour les fichiers JavaScript, vous pouvez optimiser la vitesse de la page, améliorer l'expérience utilisateur, et assurer des interactions plus fluides sur leurs sites web. Comprendre les différences entre sync, async, et defer et leurs implications sur le chargement de la page est essentiel pour construire des applications web performantes.
Veuillez noter que l'efficacité de l'utilisation des attributs sync, async, ou defer peut varier en fonction du contexte spécifique et du contenu du site web. Des tests réguliers et une analyse des performances sont cruciaux pour affiner la stratégie de chargement de la page et assurer des résultats optimaux pour différents scénarios.
Aller plus loin, charger les scripts à la demande
Async et defer peuvent accélérer une page en ne bloquant pas l'analyseur, mais il est important de noter que 'différer les scripts' ne résoudra pas tous vos problèmes. Par exemple, l'élément Largest Contentful Paint est vulnérable à la concurrence réseau et CPU causée par les scripts différés et async. L 'Interaction to Next Paint est également affectée par les scripts qui s'exécutent tôt pendant le chargement de la page. C'est pourquoi, dans la mesure du possible, vous devriez charger les scripts à la demande pour avoir plus de contrôle sur leur impact sur la performance de la page. Curieux ? Lisez comment nous chargeons les scripts à la demande
Urgent Fix Required?
Google Search Console failing? I offer rapid-response auditing to identify the failure point within 48 hours.
- 48hr Turnaround
- Rapid Response
- Failure Identification
