En tant qu’éditeur de site web, vous avez la main sur son contenu (images, texte...), son architecture, son design, ses différentes fonctions… Et même si vous mettez en place toutes les optimisations et les bonnes pratiques pour une expérience utilisateur optimale, les conditions de navigation de vos internautes ne dépendent pas de vous (niveau de performance selon le type de device et du réseau, notamment).
Explorons l’un des risques que représente JavaScript pour la vitesse de chargement sur les mobiles peu puissants, avec un retour d’expérience de Jean-Pierre Vincent, Consultant expert en performance web.
Performance web : l’épineux problème de la vitesse de chargement sur les mobiles d’entrée de gamme
“L’excès de JavaScript dégrade fortement l’expérience des utilisateurs de sites mobiles, et je constate que personne ne pense à faire un test des performances sur tous les devices - encore moins ceux d’entrée de gamme. Pourtant ce sont les premiers à être bloqués en l'absence d'optimisation du JavaScript”, déplore Jean-Pierre Vincent.
Lors d’un travail d'optimisation de la vitesse de chargement et de l’expérience utilisateur pour un site d’assurances, l’une des priorités a été de s’atteler à l’optimisation du JavaScript. Le bundle (soit l’ensemble des fichiers JavaScript) représentait alors 1,3 Mo à charger (1,82 s avec un mobile Galaxy Note 3 en 4G, par exemple) et 4,2 Mo pour l'exécution (1,29 s d’évaluation + 367 ms d’exécution).
Connaissance client : dis-moi quel est ton device, je te dirai comment tu navigues
Au préalable, le parc mobile des utilisateurs du site a été observé à la loupe pour mieux connaître les contextes de navigation les plus représentatifs.
“Les résultats de cette étude ont montré que, en dehors des 51 % de l'ensemble des utilisateurs qui disposent d’un iPhone ou d’un iPad, 30 % ont un smartphone d’entrée de gamme qui peut même être très vieux. C’est une part du trafic non négligeable pour qui l’expérience de navigation doit être la plus fluide possible !”, ajoute Jean-Pierre Vincent.
A la lumière de ces informations, la mise au régime des fichiers JavaScript s’est déroulée en deux étapes.
JavaScript : opération “Dégraissage et Division”
Phase 1 : dégraisser le bundle JS
L’analyse du bundle a permis d’identifier précisément les points faibles - ou plutôt, les lourdeurs responsables du ralentissement du chargement des pages.
Voici une liste non exhaustive des actions de dégraissage entreprises : les SVG ont été sortis du bundle (et ne sont même jamais chargés sur mobile), le build est passé en mode “production” ce qui déclenche d’autres optimisations dans des librairies comme React, les outils de build et les 10 plus grosses dépendances ont été mises à jour puis optimisés (Babel, Polyfill, coreJS, momentJS, D3, GSAP, Ramda, Request…)...
“Cette option nous a permis de réduire la taille des fichiers qui est alors passée de 3,8 Mo avec un temps d’exécution de 1,17 s, à 973 Kb pour un temps d’exécution de 200 ms sur un téléphone Samsung Galaxy Note 3 ! Les pages pouvaient ainsi se charger plus rapidement, l'impact sur les performances était évident”, commente Jean-Pierre Vincent.
Phase 2 : diviser pour mieux régner
La 2ème étape a consisté à diviser les fichiers pour que ces éléments puisse se charger plus rapidement. Initialement, il y avait un seul bundle par page / route et par module.
En découpant les bundles, chaque page contient dorénavant entre 2 et 4 fois plus de fichiers, mais dont le poids total de tous les élements est 2 à 4 fois moins lourd.
Le temps d’évaluation (parsing) est alors divisé par 2 voire 3, et le code s’exécute d’autant plus tôt. Voici un exemple sur une page React avant/après les optimisations, avec une connexion mobile en Inde. On repère l’affichage du pop-in d’acceptation des cookies qui marque la fin de l’exécution des scripts sur la page : les modules React en arrière plan s’affichent 2 fois plus vite qu’avant (et ce dans tous les pays).
Optimiser votre code et vos JavaScripts en vaut la peine, tant pour le confort des mobinautes que pour vos performances marketing et business.
Pour exemple, voici la variation de CA que l’un de nos clients a pu observer sur son site marchand après l’optimisation du JavaScript, répartie par systèmes d’exploitation. Dans l'image ci-dessous, les barres représentent le CA pendant les soldes pour l’année 2019, et le trait vertical indique le CA réalisé l’année précédente, soit avant les optimisations.
Les performances et l’expérience utilisateur sur les téléphones Android ont été tellement améliorées lors de cette optimisation que le CA a plus que doublé d’une année à l’autre, pour dépasser le chiffre généré sur iOS !
En conclusion, pour procéder à des optimisations efficaces, vous avez besoin de vous poser les questions suivantes en amont : quel type de mobile ? Quelle connexion ?
Et surtout, pensez bien à réaliser le test en fonction des mobiles qui correspondent à ceux de vos utilisateurs, ils ne sont pas toujours équipés des modèles dernier cri offrant les meilleures performances.
Ce cas pratique est extrait d’une présentation de Jean-Pierre Vincent sur la performance web en 2019, disponible ici en pdf (et en vidéo chapitrée). Il y aborde également :
- l’optimisation des polices : formats Eot,Woff, Woff 2, subsetting et hébergement des fonts, stratégie d'affichage ;
- la compression des images et des vidéos : formats (JPG, SVG, PNG, GIF…) et types de compression, chargement à la demande et responsive ;
- les script tiers : tests A/B, dépendances, pubs, trackers… et comment les inclure ;
- HTTP/2 : de la théorie à la pratique, l'utilisation de PUSH et les optimisations possibles.
Pour comprendre en détail l'impact de JavaScript et des scripts tiers sur votre vitesse de chargement,
et comment les manager pour garder un site rapide, découvrez notre étude détaillée :
