Une page d'accueil cinquante fois plus légère en mots

PageToVid parle quatre langues, et les textes de son interface vivent dans 56 groupes de traductions : erreurs, navigation, tarifs, éditeur, bibliothèque d'animations et bien d'autres. La première version du site, quand il n'y avait qu'une douzaine de groupes, les donnait tous à chaque page. À cette taille, c'était un choix raisonnable.

Le site a grandi, et chaque nouvelle fonctionnalité a ajouté son groupe. La page d'accueil a fini par transporter 139 Ko de traductions, en grande partie pour l'éditeur, le tableau de bord et d'autres écrans qu'un premier visiteur n'ouvre jamais. Rien ne semblait faux ; les pages étaient simplement plus lourdes que nécessaire.

Désormais, chaque partie du site ne reçoit que ce qu'elle lit. La couche commune transporte une courte liste, comme les erreurs, la navigation et la barre d'adresse, soit 2,6 Ko. Chaque section du site, de l'éditeur aux pages d'animations, ajoute les groupes dont elle a besoin grâce à une petite enveloppe ClientMessages.

Il y a une subtilité. Dans la bibliothèque de traduction que nous utilisons, la liste d'une section remplace la liste commune au lieu de s'y ajouter : chaque liste doit donc inclure tout ce que lit sa section. Tenir cela à la main serait fragile. Un nouveau test parcourt donc les imports de chaque route et échoue dans deux cas : un composant qui lit des mots que sa route n'envoie pas, et une route qui envoie des mots que rien ne lit.

La même revue a repéré un fichier plus gros qui voyageait plus loin que nécessaire. Notre bibliothèque d'animations possède un catalogue complet de modèles, d'environ 1,5 Mo. Un petit utilitaire de l'éditeur et des pages d'animation n'en utilisait que quelques lignes d'exemple, mais l'importer envoyait tout le catalogue au navigateur.

L'utilitaire lit désormais un petit fichier généré qui ne contient que ces lignes, reconstruit à chaque changement du catalogue. La page de détail d'une animation ne charge son lecteur d'aperçu qu'au besoin, et seul le texte de votre langue atteint les pages d'animations. Un test sur le code envoyé au navigateur empêche le catalogue de revenir. Dans le même esprit, le code d'achat ne se charge plus que sur les pages où l'on achète.

Le reste du travail visait à en faire moins à chaque requête :

• pendant la fabrication de votre film, sa page consulte un résumé léger (étape, durée estimée, nombre de scènes) plutôt que le projet entier, et consulte moins souvent après une minute ou quand l'onglet est en arrière-plan ;
• la page de visionnage d'un film lit le film une fois par visite, et non une fois par composant ;
• la galerie et la vitrine de l'accueil restent prêtes pendant dix minutes ;
• les vignettes de la galerie se chargent directement depuis le stockage, avec leur taille connue d'avance, au fil du défilement ;
• icônes, sons et images de vitrine sont mis en cache un jour ;
• les connexions d'assistants inactives se ferment après 20 secondes au lieu de rester ouvertes ;
• les recherches les plus lentes en base ont gagné des index.

Les clips vidéo IA restent aussi sur la version rapide de leur modèle quand ils ont besoin d'un second essai, et un appel qui dépasse son délai une fois est simplement relancé.

Rien de tout cela ne change une seule image de votre film. Vous le remarquez ailleurs : la galerie des vidéos et l'accueil s'ouvrent plus vite sur un téléphone, la page du film reste légère pendant l'attente, et une visite demande moins aux serveurs qui la servent.

Sur un site où chaque page est calculée à neuf pour chaque visiteur, cela compte plus qu'il n'y paraît. Des pages plus légères, ce sont moins de démarrages à froid, des réponses plus rapides et une première impression plus fluide.

Ce n'était pas un problème difficile. C'était un réglage choisi quand l'application était petite, que personne n'avait de raison de revoir pendant qu'elle passait d'une douzaine de groupes de mots à 56.

La leçon que nous gardons : un budget de taille a besoin d'un test, pas d'une bonne mémoire. Les deux nouvelles suites de tests font échouer la compilation le jour où quelqu'un importe un gros fichier dans un petit bouton, ou oublie d'envoyer à une section les mots dont elle a besoin.