Suport technique et veille technologique

LinuxFr.org : les journaux  -  OUI-Léger : une extension Firefox pour rendre le site oui.sncf plus léger

 -  Juillet 2019 - 

Sommaire

• Quelques chiffres préliminaires
• Une première tentative… suspendue
• Ça va bloquer sec
• Surprise ! Une attente inutile
• Une extension Firefox pour rectifier tout ça
• Que fait l’extension ?
• Résultats
• Futur
• Liens
• Mais, pourquoi ne pas utiliser l’application mobile fournie par OUI.sncf ?
• Conclusion

Je prends régulièrement les trains de la SNCF, la Société Nationale des Chemins de fer Français. Cela m’amène à acheter des billets sur le site OUI.sncf (anciennement voyage-sncf.com).

Ça fait longtemps que je suis gêné par la lourdeur du site. La page d’accueil met bien 10 secondes à se charger, et le processus complet d’achat de billet prend plusieurs minutes sur un ordinateur classique, et ne parlons même pas de la situation sur le téléphone. Le site consomme également énormément de bande passante. Sur mon forfait 50 Mio, c’est au moins certainement un cinquième du quota qui part pour un seul achat de billet.

Quelques chiffres préliminaires

Sur un profil Firefox tout neuf, le site fait, ce soir, 229 requêtes, transfère 4.62 Mio, 10.73 Mio compressés, l’évènement load de la page a lieu au bout de 8,80 secondes.

Sur mon profil Firefox habituel, en bloquant le pistage (fonctionnalité de Firefox) et le pistage et les pubs avec uBlock Origin, et avec Decentraleyes qui charge peut-être certains scripts depuis le disque plutôt que les CDN, c’est un peu mieux : j’arrive à

• 94 requêtes, 3,21 Mio transférés, 8 Mio non compressés si je bloque tout téléchargement de script depuis les CDNs avec Decentraleyes.
• 120 requêtes, 3.97 Mio transférés, 9,41 Mio non compressés sinon sans ce blocage.

On peut faire mieux que ça.

Une première tentative… suspendue

J’avais commencé à recréer un formulaire très léger pour remplacer au moins la page d’accueil oui.sncf. J’avais bien avancé, et j’ai même un système de suggestions des gares plus pratique et plus rapide que sur le site original.

Mais prendre en charge toutes les fonctionnalités du site demanderait beaucoup de travail. J’ai donc trouvé une autre stratégie : tentons de rendre le site lui-même plus léger.

Ça va bloquer sec

J’ai donc passé un peu de temps à étudier les requêtes du site, et voir lesquelles on peut bloquer sans casser les fonctionnalités essentielles du site. Les plus impatients pourront consulter la liste des URL qu’on peut bloquer ici : https://gitlab.com/raphj/oui-leger/blob/master/background.js

En résumé :

• Le script qui gère le chat avec le robot, qui prend un tas de place en bas de l’écran et dont je me sers pas.
• Un tas d’images (des publicités pour la plupart), de polices web, des CSS plus ou moins inutiles
• Des scripts lourds, qui, s’ils sont bloqués, casse les fonctionnalités de connexion, déconnexion et panier et la barre en haut du site. Pour contourner le problème, j’ajoute un lien en bas de la page vers l’espace client, dans lequel je désactive ce blocage, et je masque la barre.
• Plein de requêtes de pistage.
• Des scripts qui n’ont pas l’air d’être utilisés lors de l’achat d’un billet
• Un script de reconnaissance de voix (rogervoice) : je ne savais même pas qu’il y avait une telle fonctionnalité sur oui.sncf.

Une des plus grosses ressources, v2-train-standalone.xxx.js, un bon script de 260 Kio compressé, 1,04 Mio non compressés, n’est malheureusement pas blocable : Ça a l’air d’être une concaténation de pleins de scripts qui contient la logique du formulaire, qui ne fonctionnera pas sans.

Surprise ! Une attente inutile

Lors de la recherche d’un billet depuis la page d’accueil (mais pas quand on modifie la recherche, on est envoyé à une adresse du style https://www.oui.sncf/proposition/outward/train?wishId=xxx&interstitial. Cette page affiche un mot « Recherche en cours » pendant une dizaine de secondes, puis on est redirigés vers https://www.oui.sncf/proposition/outward/train?wishId=xxx, qui affiche les résultats de la recherche. Surprise ! Si on va directement à cette dernière adresse, ça marche aussi. Autant dire que le seul but de cette page est certainement d’afficher la publicité qu’elle contient assez longtemps.

Perso, attendre 10 secondes pour rien ne me fait pas rêver.

Une extension Firefox pour rectifier tout ça

J’ai donc appris comment faire une WebExtension, le standard actuel compatible avec la plupart des navigateurs pour faire des extensions, et comment utiliser l’API webRequest qui permet de faire du blocage et de la redirection de requêtes (utilisé par les bloqueurs de publicité), dans l’optique d’alléger un peu le site.

Les avantages sont :

• un achat de billets plus écolo ;
• un achat de billets moins coûteux en bande passante ;
• un achat de billets moins coûteux en temps ;
• un achat de billets moins pénible ;
• des pages plus propres, plus simples, moins encombrés visuellement (oui, j’ai foiré mon anaphore).

Que des avantages.

Que fait l’extension ?

Sur ordinateur de bureau comme sur Firefox mobile :

• Elle bloque les requêtes qu’il est possible de bloquer sans casser la fonctionnalité d’achat de billets de train. Je n’ai rien testé d’autre pour le moment.
• Elle supprime l’attente inutile évoquée plus tôt
• Elle supprime les ombres et les animations, qui sont sources de lourdeurs visuelles et qui donnent l’impression que l’interface est lente.
• Elle rajoute des liens en bas des pages du site pour qu’il garde son utilité

Résultats

La page d’accueil, bien épurée et ne contenant plus que le formulaire de recherche et rien d’autre, ne fait plus que 16 requêtes, transfère 482,28 Kio, 1,64 Mio non compressés. La page met moins de 5 secondes à se charger complètement (oui, l’extension n’est pas magique non plus, parser et exécuter 1 / 2 Mio de Javascript, ce n’est en général pas trivial). Le temps gagné lors de l’achat d’un billet est beaucoup plus petit, et est enfin dominé par la saisie du code de la carte bancaire, qui n’est pas enregistré dans l’espace client.

Futur

J’espère que cette extension intéressera certaines personnes. Je vais probablement manquer énormément de temps pour m’occuper vraiment de l’extension, alors les contributions seront appréciées.

Voilà les choses qu’il y a à faire.

• L’extension a besoin d’une icône.
• J’aimerais intégrer le système de suggestions que j’avais écrit. Il se souvient des recherches précédentes, met les requêtes correspondantes en cache pour ne pas avoir à les refaire. Cela permet une réactivité plus grande, et si vous avez le malheur d’aller à une gare qui s’appelle Saint-Machin-Truc-Muche, vous pouvez taper “S” plutôt que « Saint-Machin-Tr » pour retrouver la gare dans les suggestions dès la deuxième recherche. Il faut trouver le moyen de désactiver le système de suggestion du site, en vérifiant qu’aucune fonctionnalité essentielle est perdue
• Il faudrait vérifier que l’extension ne casse pas des choses qui n’ont pas encore été testées (recherches de vol, de bus). En principe c’est bon, les choses sont assez séparées techniquement sur le site.
• J’attends avec impatience vos idées et vos retours !

Liens

• Page de l’extension sur AMO : https://addons.mozilla.org/en-US/firefox/addon/oui-light/
• Code source de l’extension, sous licence GPLv3+ : https://gitlab.com/raphj/oui-leger

Attention : l’extension est dans un état expérimental et elle est toute fraîche. Je ne suis pas responsable si elle casse des trucs. Si elle mange votre maison, je n’y peux rien. Elle change l’apparence de oui.sncf de façon substantielle : ça plaît, ou ça déplaît.

Suggestions : extension à compléter avec la fonctionnalité anti pistage de Firefox (ça bloque les accès à Facebook), uBlock Origin et les listes concernant la vie privée activées (je ne traite pas ce que bloque déjà uBlock Origin), et Decentraleyes, qui récupère certains scripts en local au lieu de les retélécharger depuis les CDNs.

Mais, pourquoi ne pas utiliser l’application mobile fournie par OUI.sncf ?

On m’a dit qu’elle était très pratique, mais je n’ai pas trouvé la version GNU/Linux qui fonctionnerait sur mon ordinateur classique, ni son code source. Pas de code source, pas d’installation, comme on dit par chez nous, d’après le proverbe bien connu (et sa variante locale, « code source manquant ? Fous le camp ! », ou la maxime correspondante, « Mauvaise licence, méfiance »). En plus, elle affiche de la pub à ce qu’il paraît.

Et puis, si on doit installer une application pour acheter un billet de train, ou va le monde ? :-)

Et c’est moins rigolo, bien entendu.

Conclusion

Écrire une extension simple pour Firefox, ce n’est finalement pas très compliqué. Je ferai peut-être ça plus souvent.

Amusez-vous bien !

Commentaires : voir le flux atom ouvrir dans le navigateur

par raphj