Le JavaScript, langage informatique au même titre que le PHP, s’exécute pour sa part du côté navigateur et non du côté serveur. Agé de plus de 20 ans, ce ‘nouveau ‘ langage fait de plus en plus parler de lui. Avec ou sans framework (React, Angular JS…), il peut permettre entre autres d’afficher un rendu client très rapidement. C’est une technologie efficace et pertinente dans la mesure où les temps de chargement sont de plus en plus considérés comme un axe d’amélioration de l’expérience utilisateur.

Pour autant, les sites en full JavaScript complexifie la tâche des sociétés de monitoring qui ont dû s’adapter afin de mesurer les performances de leurs clients tout en prenant en considération cette évolution technologique. C’est d’ailleurs ce que nous explique Eric HOUZELLE, responsable technique chez Netvigie.

« Nous nous trouvons de plus en plus confrontés à des clients ayant des sites internet en full JS et souhaitant recourir à nos solutions de monitoring afin de mesurer les temps de chargement de leur site internet. Grâce à notre veille technologique et à notre R&D permanente, nous avons pu opérer les changements de méthodologie nécessaires pour nous adapter à ces contraintes et répondre aux besoins de nos clients. Cela a par exemple abouti à l’intégration des nouvelles technologies et fonctionnalités dans le développement de nos solutions » 

Cette société, basée dans les Hauts de France, est spécialisée dans la surveillance des parcours stratégiques depuis 15 ans. Avec plus de 1500 monitorings à son actif, Netvigie accompagne 150 clients du e-commerce, voyage, prêt-à-porter … dans la maitrise de leurs performances.

TOUR D’HORIZON DU JS : LES AVANTAGES ET LES INCONVENIENTS

Le Full JS, bénéfique pour les temps de chargement.

L’un des premiers avantages constatés avec le full JavaScript est l’allégement du côté serveur. Le fait d’exécuter tous les rendus du côté client et non du côté machine comme peut faire le PHP, permet de limiter les sollicitations et donc la surcharge des serveurs.

Autre avantage du JS : sa rapidité. Grâce au full JavaScript, le rendu côté client se fait plus rapidement. Une impression de fluidité peut également être constatée puisque les contenus des pages suivantes sont déjà chargés lors du premier appel du site.

Exemple : prenons le cas d’un site internet Full JS spécialisé dans l’assurance où un internaute souhaite réaliser une simulation pour un contrat d’assurance. A l’affichage de la première page (remplissage des données personnelles), il est fortement probable que l’ensemble des formulaires nécessaires à cette simulation (remplissage du type de véhicule …) aient été chargés en même temps. De ce fait, lorsque l’internaute passe à l’étape suivante, aucune requête au serveur n’est nécessaire du fait des contenus précédemment chargés.

Ce mode de fonctionnement permet d’améliorer les temps de chargement du site. Cela a des effets positifs sur le positionnement des pages dans les moteurs de recherches et sur l’expérience de navigation des internautes.

Pour autant, toute technologie a ses inconvénients, le JS y compris.

Trop de JS tue le JS !

Survenant côté client et non serveur, les erreurs JS sont difficilement détectables. Il est donc compliqué d’avoir une parfaite visibilité sur le rendu.

De ce fait, il est indispensable d’accorder une vigilance supplémentaire à la restitution des pages. Lors du recettage en pré-production, cela implique donc d’intégrer des tests à la fois multi navigateur et multi version afin d’écarter un maximum de risque. Même si dans la théorie les frameworks sont standardisés, dans la réalité, le rendu peut malgré tout différer entre les navigateurs. Les ratés ne sont jamais exclus !

La veille doit aussi être renforcée afin d’anticiper et d’éviter qu’une mise à jour navigateur n’ait des répercussions négatives et impacte le site internet.

En somme, comment être sûr de la restitution d’un site ? Quelles solutions existent pour avoir cette visibilité et assurer un site fonctionnel et performant aux internautes ?

Ce sont exactement les questions que se sont posées les équipes de Netvigie.

DES TECHNOLOGIES POUR SURVEILLER LES PERFORMANCES DES SITES FULL JS !

Surveillance des parcours stratégiques : optez pour la vision navigateur.

Le monitoring synthétique classique s’articule autour de requêtes http. Sur le plan métier, cela consiste (grâce à un scénario utilisateur), à surveiller le bon fonctionnement et les temps de chargement d’une succession d’étapes, retraçant bien souvent un parcours stratégique pour le site internet (parcours d’achat, d’identification à un espace clients …). Sur le plan technique, les robots vont exécuter les requêtes correspondantes auxdites étapes et remonter les différents temps de chargement, réseaux et applicatifs. Grâce à un principe d’assertion, les robots vont détecter que l’exécution de la page s’est déroulée correctement, auquel cas une anomalie est remontée dans l’outil de restitution.

Pour autant, cette technologie ne peut s’appliquer à des sites full JS.

« Nos points de mesures classiques supervisent le bon fonctionnement technique de la plateforme (temps réseaux et applicatifs). Le full JS, s’exécutant côté client, limite donc le périmètre d’intervention de nos sondes. » nous explique Eric.

C’est en réponse à cette problématique que Netvigie a décidé d’intégrer une dimension « navigateur » à ses mesures de performances. En complétant son parc de points de mesures avec des sondes dites Loadview, il est possible d’exécuter ces mêmes parcours stratégiques, cette fois-ci via des navigateurs. De ce fait, les temps de chargement sont toujours mesurés et cette fois-ci les erreurs JS détectées. Des screenshots photos et vidéos sont générés en cas d’anomalie afin que les utilisateurs puissent voir exactement quelle a été l’expérience de navigation de leurs internautes sur le site et de quelle manière le dysfonctionnement s’est matérialisé.

Pour les sites full JS, il est impératif de surveiller leur bon fonctionnement via des scénarios utilisateurs full Loadview. En revanche, pour les sites qui mixent les langages, le recours à une sonde Loadview en plus des points de mesures classiques est recommandé afin d’avoir cette double visibilité technique-navigateur.

Le Real User Monitoring : Comment détecter les erreurs JS grâce à votre trafic ?

Le Real User Monitoring est une autre solution proposée par Netvigie, permettant de détecter les erreurs JS. Plus communément appelé RUM, cette solution a pour vocation première de mesurer les temps de chargement réellement vécus par les internautes. Grâce à un tag, le trafic est capté et les temps de chargement mesurés suivant le contexte de navigation des internautes. Cela comprend entre autres la localisation de l’internaute, le device utilisé, ainsi que le système d’exploitation ou encore le navigateur. Le fait de recenser le navigateur utilisé par chacun des visiteurs permet de remonter les erreurs Javascript. Dès lors, des informations très précises sont communiquées sur la localisation de l’erreur telles que la page concernée ainsi que la stacktrace. La solution permet également de connaître avec précision le type d’erreur et son nombre d’occurrence.

Il est ainsi tout à fait possible de mettre en place une stratégie de correction efficace en se focalisant soit sur un type d’erreur donné, sur les erreurs les plus récurrentes ou encore sur les pages avec le plus de trafic. Grâce à une mesure dans le temps, il est facile de juger de l’efficacité des actions et de la progression du site internet.

Le RUM de Netvigie dispose aussi d’un onglet « Live » permettant de voir en direct les internautes présents sur le site. Dès lors, les temps de chargement et les erreurs JS vécues en direct sont visibles. Ainsi, c’est une fonctionnalité efficace afin de visualiser le comportement de votre plateforme suite à une mise en production par exemple.

EN CONCLUSION

Le JS est un langage informatique efficace pour ce qui est des temps de chargement. Toutefois, il nécessite une attention particulière au risque de dégrader l’expérience de navigation des internautes.

De plus, comme cela a pu être souligné, les contextes de navigation se multiplient et rendent la tâche encore plus complexe. De ce fait, la nécessité d’un outil permettant de surveiller le bon fonctionnement d’un site internet tout en mesurant les performances et détectant les erreur JS prend tout son sens. Les stratégies d’optimisation en seront plus fines et donc plus efficaces.