Optimisation des applications web : gestion du chargement des librairies javascript

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.

performance page web

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.

Publicités

A propos jlerbsc

founder of JavaPerf Consulting Http://www.jperf.com
Cet article a été publié dans performance. Ajoutez ce permalien à vos favoris.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s