L'Equipe part du mobile pour améliorer les performances sur desktop
Sur L'Equipe.fr, 70% du trafic organique est réalisé sur mobile. Passé en PWA, le site mobile offre une expérience de navigation fluide depuis deux ans. Pour le quotidien sportif, il était temps de s'attaquer au desktop. Pour cela, début 2019, les équipes ont refondu les sites mobile et desktop en un seul, en prenant comme référence l'architecture du mobile.
Une navigation desktop à l'image du mobile
"Nous avons voulu généraliser ce qui fonctionnait le mieux. Et puis il valait mieux simplifier le desktop que compliquer le smartphone", résume Emmanuel Alix, directeur du pôle numérique de L'Equipe. Désormais, à l'instar du smartphone, le menu du site surgit sur le côté de l'écran sur le desktop, et non plus du haut vers le bas et des carrousels d'images ou de vidéos permettent de scroller à l'horizontal.
En outre, le contenu publié sur l'ensemble du site est désormais pensé pour un petit écran : "Nous ne mettons plus de chapô en haut des articles et nos titres sont plus courts et descriptifs. Autrement dit, moins de jeux de mots, mais plus d'informations sur ce qui va suivre", précise le directeur du pôle numérique. Sur la home page et les pages catégorie du site, images et vidéos occupent davantage d'espace qu'auparavant, sur un design général épuré. Et elles demeurent toujours accessibles, puisqu'elles s'adaptent à la qualité de la connexion. Résultat, en 3G, les pixels sont peut-être plus gros mais l'internaute peut toujours voir les vidéos qui l'intéressent.
Mise en place technique
Sur le plan technique, une série d'actions ont été mises en œuvre pour améliorer les performances du site desktop et consolider celles du smartphone.
- URL unique mobile/ordinateur : avant la refonte, le site desktop n'était pas responsive. La navigation sur smartphone se faisait depuis un site en .m. "Le passage à un seul sous-domaine n'a pas été planifié en amont, relate Raphaël Dardeau, responsable des développements chez L'Equipe. Il s'est imposé comme une évidence au cours de l'avancée du projet". En termes de webperf, c'est un progrès notable, puisqu'il n'est plus nécessaire de créer des redirections selon le device.
- Nouveau framework JavaScript : Vue.js. Jusqu'à présent, L'Equipe utilisait Angular JS, un framework développé par Google. L'adoption de Vue.js a permis d'acquérir davantage de flexibilité dans le développement et une exécution plus légère et plus performante.
- Pre-rendering maison : le pre-rendering est un impératif en référencement naturel pour améliorer la webperf et la lecture des pages contenant beaucoup de javaScript. "Le fait qu'il soit "maison" nous donne la souplesse nécessaire pour le servir à tous nos visiteurs (plus seulement aux crawlers), ce que ne nous permettait pas un service externe", commente Raphaël Dardeau. Son équipe a opté pour un serveur Node.JS sur lequel est installé Puppeteer (une librairie Node.JS de Google), qui réalise le snapshot HTML de chacune des URLs sur demande. Le JavaScript s'ajoute ensuite progressivement pour enrichir la page de données plus fraîches.
- Lazyloading (chargement progressif des contenus) et code splitting (chargement progressif des ressources CSS/JS), pour alléger le nombre de ressources chargées sur chaque page à son ouverture. Le code splitting est proposé par Webpack, un compilateur open-source de ressources JavaScript front-end. "Au lieu d'avoir de gros fichiers CSS et JS à charger, qui grossissent progressivement à mesure que l'application évolue, il permet d'éclater les ressources par composant, pour ne les charger que quand ce dernier est présent sur la page", explique le lead developper.
- Features switch programmable : il est fréquent que les scripts d'A/B testing s'accumulent sur une page, même au-delà de leur période de vie. Les pages s'alourdissent de scripts tiers inutiles mais toujours chargés à chaque ouverture. Cette solution permet de systématiquement programmer une date de fin pour chaque script, évitant ainsi aux développeurs de devoir faire régulièrement le ménage manuellement.
- Desktop PWA : cette technologie est plus souvent destinée aux smartphones. L'Equipe a décidé de permettre aux utilisateurs d'installer aussi le site sur leur ordinateur, ce qui permet de consulter des contenus en l'absence de connexion.
Résultats en webperf et en interne
Ces actions ont d'ores et déjà permis d'améliorer les résultats en termes de webperf, comme l'indique Raphaël Dardeau, qui a utilisé l'outil Speed Curve pour faire ses mesures. Il annonce un temps de chargement réduit de 40% sur mobile et 50% sur desktop et une diminution de 75% du nombre de commandes externes sur desktop. La vitesse d'interaction avec le site (Time to interactive), toujours selon L'Equipe, a baissé de 15% sur mobile et 70% sur ordinateur et le temps nécessaire pour le remplissage de l'écran de 25% sur le mobile et 75% sur le desktop.
Cette refonte a aussi eu l'avantage de "diviser par deux le temps de déploiement", se réjouit Raphaël Dardeau. Auparavant, il fallait en effet développer séparément les solutions pour chaque version du site, une perte de temps et de cohérence que les équipes ne vont pas regretter.