On appelle scripts bloquants ou en anglais render-blocking script tous les fichiers JavaScript dont le chargement ou bien l’exécution perturbent le rendu d’une page web. Pour mieux comprendre cette définition, il convient de rappeler quelques notions sur le fonctionnement de JavaScript. Par défaut, lorsque l’interpréteur HTML rencontre un fichier JavaScript il s’arrête de réaliser le rendu de la page et passe la main à l’environnement d’exécution JavaScript. Le rendu ne reprend que lorsque l’exécution du script est terminée. C’est un comportement assez logique, JavaScript a en effet la capacité d’agir sur les éléments de la page, il serait donc incohérent de continuer le rendu alors qu’un script est potentiellement en train de l’altérer.
Cet article vous présentera quelques méthodes vous permettant d’éliminer les scripts bloquants de vos pages web ou au moins d’en réduire l’impact sur la satisfaction de vos utilisateurs.
Quel impact sur les performances web ?
Un nombre de scripts bloquants important aura bien souvent tendance à détériorer la satisfaction utilisateur. Aussi importants soient-ils pour le bon fonctionnement de votre page web, leur exécution n’est pas forcement visible par l’utilisateur. En revanche il remarquera facilement que le rendu est bloqué. En effet, le blocage du rendu peut provoquer deux effets néfastes pour la satisfaction de l’utilisateur. D’une part, il est possible que le début d’affichage soit retardé, provoquant de longues secondes d’attente devant une page blanche. D’autre part, le rendu de la page pourra être saccadé, alternant entre phases ou le rendu est fluide et phases ou le rendu est figé. Dans les deux cas, et en se basant sur notre norme de mesure de la satisfaction utilisateur, on est sûr que celle-ci sera détériorée.
Ces phénomènes sont accentués si en plus d’être bloquants, les scripts en question doivent être récupérés sur un domaine externe à votre site. Le rendu sera bloqué pendant la phase de téléchargement en plus de la phase d’exécution. Si ce domaine externe a des problèmes de disponibilité ou bien de performance, votre rendu en sera d’autant plus affecté.
Comment réduire l’impact du JavaScript sur les performances ?
Insérer vos scripts à la fin du document HTML
Comme nous l’avons expliqué précédemment, les éléments d’une page HTML sont interprétés dans leur ordre d’apparition dans le fichier. Par conséquent, si vos scripts sont placés à la fin du document, le rendu sera majoritairement terminé lors de leur exécution. Cela réduira considérablement l’impact de leur effet bloquant sur vos performances. Il est impossible, malheureusement, d’appliquer cette méthode partout. De nombreux scripts auront besoin d’une position particulière pour fonctionner correctement.
Utiliser les attributs async et defer
Les attributs async et defer doivent être placés sur la balise script. Ils ont tous les deux pour fonction de modifier le comportement par défaut de l’interpréteur HTML.
L’attribut async autorise le rendu à continuer pendant que le script est en train d’être téléchargé. Même si les domaines externes sont très lents, il n’y aura pas d’impact sur la progression du rendu ! Cependant, l’exécution arrêtera toujours le rendu et celle-ci démarrera aussi tôt le téléchargement terminé. Il est donc important de noter que l’ordre d’exécution est complètement différent de l’ordre d’apparition des scripts dans le fichier dans ce cas.
L’attribut defer autorise également les scripts à être chargés en parallèle du rendu. Cependant, il diffère d’async sur deux points. Tout d’abord, defer va retarder l’exécution des JavaScript à la fin du rendu, juste avant l’événement DOMContentLoaded. De plus, l’ordre d’exécution des JavaScript sera forcément conservé dans ce cas.
Mettre en place une stratégie lazy-loading
Le lazy-loading est un mode de chargement de script permettant d’effectuer du chargement « si nécessaire ». Voyons son intérêt à travers un exemple. Supposons que votre site contienne un composant visuel nécessitant un script lourd pour fonctionner. Si ce composant est situé en bas de page, il se peut qu’il n’y ait qu’une portion des utilisateurs qui le visualisent. Le lazy-loading va vous permettre de charger les scripts associés à ce composant uniquement si celui-ci entre dans l’écran de l’utilisateur. De cette manière, il n’y a que les utilisateurs intéressés par le composant lourd qui en paieront le prix en terme de temps de chargement. Il n’existe pas d’implémentation par défaut du lazy-loading ce qui rend cette méthode plus coûteuse que les autres à mettre en place. L’API Intersection Observer fournit les méthodes de base pour réussir une implémentation du lazy-loading. Elle a en plus l’avantage d’être reconnue par la majorité des navigateurs récents.
Vous savez maintenant comment réduire l’impact des scripts sur les performances de votre site web. Si vous ne savez pas les identifier, sachez que notre outil d’analyse des performances est capable de détecter les scripts bloquant pour vous ! Vous pouvez également essayer gratuitement notre outil de supervision appYuser afin de visualiser l’impact de vos optimisations sur les performances de votre site web.
Sources :
- Remove Render-Blocking JavaScript – Recommandation PageSpeed Insights par Google