Lequipe.fr, c’est 1,5 milliards de pages vues chaque mois, et entre 2 et 3 millions de visiteurs uniques par jour. L’optimisation des temps de chargement requiert un travail constant.
En effet, comme pour un site e-commerce, un média se doit de capter et fidéliser ses lecteur.rice.s, et cela passe évidemment par une UX fluide et un site rapide. Alors, comment évangéliser sur la question des temps de chargement en interne ? Nous avons échangé avec François Boury, Directeur Technique Internet de lequipe.fr, qui nous explique l’organisation déployée et les outils adoptés pour sensibiliser à l’importance des temps de chargement.
Comment travaillent les équipes techniques pour garantir des temps de chargement rapides sur lequipe.fr ?
François Boury : Lequipe.fr est un site à fort trafic : beaucoup de visiteurs, un besoin de bande passante conséquent, de nombreux sites média concurrents… L’ensemble des équipes IT est concerné par les temps de chargement, côté Front-End comme Back-End. Pour chaque développement, nous nous demandons si celui-ci est efficace et économe, c’est un réflexe installé.
Nous mettons en œuvre des bonnes pratiques qui font leurs preuves : utiliser un CDN, minifier et compresser les CSS, les JS et les images… Chaque octet économisé compte.
Je considère que c’est vraiment le rôle des développeur.se.s d’avoir ces notions en tête, car la maîtrise de frameworks JS tout comme la maîtrise de la webperf font partie intégrante de leurs missions.
Nous avons fait le choix de ne pas dédier une équipe en particulier à la webperf, tout simplement parce que ce sujet est porté par toute la DSI. Chaque membre de l’équipe est formé à la webperf et suit les bonnes pratiques, ainsi que des formations régulièrement dispensées par des intervenants experts.
Afin d’assurer une continuité dans la transmission des connaissances et des compétences, nous procédons à des Code Reviews qui font l’objet de feed-backs partagés, et nous maintenons notre documentation à jour en interne sur les bonnes pratiques webperf.
Etes-vous passés par une phase de réorganisation pour intégrer la webperf dans les habitudes de travail des équipes IT ?
F.B. : Mon objectif est de faire en sorte que chaque développeur.se ait à l’esprit la webperf et les bons réflexes. Ainsi, nous n’avons pas procédé à une réorganisation des équipes techniques, ce sont plutôt des connaissances et une expertise que nous diffusons et que nous partageons depuis plusieurs années maintenant. Cette démarche porte ses fruits, car de ce fait, le temps passé sur les optimisations webperf finit par devenir relativement marginal.
Par exemple, toute nouvelle mise en ligne déclenche un WebPageTest qui donne un résumé des points d’optimisation, et l’ensemble des développeur.se.s Front en est informé pour vérifier ce qui peut être amélioré. La webperf fait aussi partie des critères pris en compte dès l’amont du développement de nouveaux produits.
Etant donné que le travail de la webperf doit être constant pour profiter d’effets pérennes, comment faites-vous pour monitorer vos temps de chargement en continu ?
Comme des entreprises se dotent de “Social Rooms”, nous avons disposé un écran dans nos locaux qui indique en continu les temps de chargement des versions desktop et mobile de notre site. Il affiche les indicateurs clé aussi bien pour les équipes techniques que pour les équipes métier, ce qui contribue à l’évangélisation en interne.
A ce propos, comment vous coordonnez-vous avec les autres équipes ?
F. B. : Tout comme nous formons les équipes techniques, nous sensibilisons les équipes produit et marketing à l’importance de la webperf. L’émulation entre les sites médias est forte, et nous devons tous.tes être consciente.e.s qu’un site rapide et performant permet de se positionner face à la concurrence avec un produit de qualité.
C’est pourquoi nous avons aussi fait de la pédagogie en interne sur la notion de budget performance, que nous partageons d’ailleurs avec les équipes métier. Nous avons par exemple des fonts spéciales qui ont un certain poids, et comme nous sommes obligé.e.s de les utiliser par souci de cohérence entre l’édition papier, le site et la TV, nous devons le prendre en compte dans les optimisations que nous déployons.
En externe, si des ressources doivent être ajoutées sur le site, nous pouvons décider de ne pas les déployer si elles sont trop lourdes. Pour les Third Parties, tout nouveau partenaire doit garantir que ses scripts peuvent être chargés en asynchrone, que les JS respectent certaines normes, ne pas dépasser une taille maximum pour les cookies… Cela nous assure que ces Third Parties ne vont pas dégrader nos performances et ces contraintes sont généralement bien perçues.
Nous avons travaillé sur la refonte du site mobile en Progressive Web App en 2017, dont les performances nous servent de point de départ pour travailler sur la version future.
A l’avenir, notre objectif est évidemment d’améliorer encore les temps de chargement, en nous dotant entre autres d’un nouveau framework JS, d’une nouvelle architecture et en poussant toujours plus loin les optimisations :
- passage d’Angular à Vue.js qui est plus léger
- utilisation du code splitting pour ne charger sur une page que le CSS et JS nécessaire
- prerendering pour les moteurs mais aussi pour les internautes
- adaptation de la qualité des images et filtrage de certains scripts JS en fonction de la qualité de connexion
Grâce à ces bonnes pratiques, nous espérons gagner 1 seconde de Speed Index !
Vous souhaitez en savoir plus sur les leviers d'amélioration de vos temps de chargement ?
Téléchargez notre livre blanc :
