Le JavaScript téléchargé, puis jamais exécuté
Une part notable du code chargé par un site sert à des fonctionnalités absentes de la page consultée. Il est pourtant analysé et compilé à chaque visite.
Une page de contact charge le code du carrousel, celui de la carte interactive et celui du panier. Aucun des trois n’a de raison de s’exécuter là.
Le navigateur les télécharge quand même, les analyse et les compile. Sur un téléphone d’entrée de gamme, ce travail est le premier poste de lenteur.
Le poids n’est pas le coût principal
Un fichier de 200 Ko se télécharge en une seconde sur un réseau correct. Il occupe le processeur bien plus longtemps, parce que l’analyse et la compilation coûtent davantage que le transfert — et cet écart se creuse à mesure que l’appareil est modeste.
C’est pourquoi comparer des tailles de fichiers renseigne mal. Ce qui compte est le temps pendant lequel le fil principal est occupé et l’interface ne répond pas.
Mesurer ce qui est réellement utilisé
Les outils de développement des navigateurs indiquent, pour chaque fichier, la part du code effectivement exécutée pendant le chargement d’une page.
Les résultats sont régulièrement supérieurs à 60 % de code inutilisé sur une page donnée. Ce chiffre est le point de départ le plus honnête d’un chantier de performance.
Découper par page
Le remède principal consiste à ne charger que ce dont la page a besoin. Un site statique est bien placé pour cela : le script de la page d’accueil n’a pas à être servi sur la page de contact.
Sur un site à socle unique, un découpage automatique par route produit le même effet, à condition de ne pas tout regrouper dans un fichier commun par commodité.
Charger à la demande
Une carte interactive, un lecteur vidéo, un éditeur de texte riche : ces composants sont lourds et n’ont pas à être chargés avant que l’utilisateur en ait besoin.
Un espace réservé cliquable, qui déclenche le chargement au premier contact, supprime le coût pour la majorité des visiteurs qui ne s’en serviront jamais. La contrepartie est un léger délai pour ceux qui s’en servent — un arbitrage presque toujours favorable.
La question à poser avant d’ajouter une bibliothèque
Le besoin est-il couvert par le navigateur lui-même ? Beaucoup de dépendances répandues ont été introduites à une époque où la réponse était non, et sont conservées par habitude.
Les animations au défilement, le défilement fluide, la sélection d’éléments, les requêtes réseau, la gestion des dates : tout cela existe nativement aujourd’hui. Retirer une dépendance supprime son poids, son temps d’exécution, sa surface d’attaque et sa maintenance.