Comment réduire le nombre de scripts bloquants dans vos pages web ?

Comment réduire le nombre de scripts bloquants dans vos pages web ?

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...