Lors d’un article précédent nous avons évoqué des problématiques de performance des pages web liées au chargement des librairies javascript.
Il faut savoir que les différents navigateurs du marché n’ont pas tous la même stratégie de chargement des librairies javascript. Cela peut conduire à dégrader singulièrement les performances globales du chargement de la page et par conséquent mécontenter l’internaute.
Il est notamment particulièrement important de faire attention à l’emplacement des directives de chargement des fonctions javascript dans les pages html. En effet, selon la version du navigateur utilisé, la déclaration des librairies javascript dans l’entête de la page html bloque le chargement des autres ressources, les chargements sont séquentiels, et l’affichage des autres éléments de la page est différé jusqu’à la fin de l’exécution du code javascript.
Prenons l’exemple du chargement de la page d’accueil d’un site internet de jeu en ligne avec un navigateur IE8. Nous voyons clairement que le chargement des javascripts est séquentiel et nécessite, dans notre exemple, environ 5 secondes.
exemple de chargement d’une page web
Par conséquent, si vous ne maîtrisez pas le type de navigateur de l’internaute (ce qui est généralement le cas pour les sites internet), il est conseillé d’éviter d’insérer du code javascript dans la balise <head> du document html. Les solutions de contournement consistent soit à insérer les liens de chargement des librairies en fin de page soit à privilégier un chargement asynchrone des scripts. Pour cette dernière solution, vous pouvez vous appuyer sur certaines librairies qui prennent en charge cette possibilité et la gestion des dépendances entre les scripts telles que LABjs, ControlJs, Headjs, …
Pour aller plus loin, vous trouverez cette adresse http://www.lije-creative.com/javascript-accelerer-chargement-site-internet/ un exemple de mise en œuvre de la librairie ControlJS.
