manuboss
Le site du quotidien sportif a adopté l'architecture et les technologies du mobile pour refaire sa version de bureau. Une clé, entre autres, une réduction de 50% du temps de chargement.
Sur L’équipe.fr, 70% du trafic organique est réalisé sur mobile. Dans PWA, le site mobile offre une expérience de navigation fluide pendant deux ans. Pour le journal sportif, il était temps de s'attaquer au bureau. Pour cela, début 2019, les équipes ont redessiné les sites mobile et desktop en un seul, en prenant pour référence l'architecture mobile.
Une navigation de bureau comme le mobile
"Nous voulions généraliser ce qui fonctionnait le mieux et ensuite, il valait mieux simplifier le bureau que de compliquer le smartphone", résume Emmanuel Alix, directeur du pôle numérique de L & # 39; Equipe. Désormais, comme pour le smartphone, le menu du site apparaît sur le côté de l'écran du bureau, et non plus de haut en bas et les carrousels d'images ou de vidéos permettent de faire défiler horizontalement.
De plus, le contenu publié sur l’ensemble du site est maintenant conçu pour un petit écran: "Nous ne mettons pas plus de chapo en haut des articles et nos titres sont plus courts et descriptifs.En d’autres termes, moins de jeux de mots, mais plus d’informations sur ce qui va suivre ", a déclaré le directeur du pôle numérique. Sur la page d'accueil et les pages de catégories du site, les images et les vidéos occupent plus d'espace qu'auparavant, sur un design général épuré. Et ils sont toujours accessibles, car ils s’adaptent à la qualité de la connexion. "En 3G, les pixels sont peut-être plus gros mais le surfeur peut toujours suivre les actions de ses joueurs préférés", explique Emmanuel Alix.
Établissement technique
Sur le plan technique, une série d’actions ont été mises en œuvre pour améliorer les performances du site pour ordinateurs de bureau et consolider celles du smartphone.
- URL unique mobile / ordinateur Avant la nouvelle conception, le site de bureau n'était pas réactif. La navigation sur smartphone s’est faite à partir d’un site en .m. "La transition vers un seul sous-domaine n’était pas planifiée en amont", explique Raphaël Dardeau, responsable du développement chez L & # 39; équipe, "cela est devenu évident au cours de la progression du projet". En termes de performance Web, il s'agit d'une avancée notable, puisqu'il n'est plus nécessaire de créer des redirections en fonction du périphérique.
- Nouveau framework JavaScript: Vue.js. Jusqu'à présent, l'équipe utilisait Angular JS, un framework développé par Google. L'adoption de Vue.js a permis une plus grande flexibilité de développement et des performances plus légères et plus efficaces.
- Accueil pré-rendu : le pré-rendu est un impératif dans le référencement pour améliorer le webperf et la lecture de pages contenant beaucoup de javaScript. "Le fait que ce soit" chez nous "nous donne la flexibilité de servir tous nos visiteurs (pas seulement les chenilles), ce qui ne nous permettait pas un service externe", a déclaré Raphaël Dardeau. Son équipe a opté pour un serveur Node.JS sur lequel est installé Puppeteer (une bibliothèque Google Node.JS), qui réalise la capture instantanée HTML de chacune des URL à la demande. JavaScript est ensuite ajouté progressivement pour enrichir la page de données plus fraîches.
- Chargement paresseux (chargement progressif du contenu) et code de fractionnement (chargement progressif des ressources CSS / JS), pour alléger le nombre de ressources chargées sur chaque page à son ouverture. Le code de fractionnement est proposé par Webpack, un compilateur à source ouverte de ressources JavaScript frontales. "Au lieu de charger des fichiers CSS et JS volumineux, qui prennent de l'ampleur au fur et à mesure que l'application évolue, il vous permet d'afficher les ressources par composant, de ne les charger que lorsqu'il est présent sur la page", explique le développeur principal.
- Caractéristiques des commutateurs programmables : Il est courant que les scripts de test A / B s’accumulent sur une page, même au-delà de leur durée de vie. Les pages deviennent lourdes de scripts tiers inutiles mais toujours chargées à chaque ouverture. Cette solution permet de programmer systématiquement une date de fin pour chaque script, évitant ainsi aux développeurs de faire le ménage manuellement.
- PWA de bureau : cette technologie est plus souvent destinée aux smartphones. L’équipe a décidé de permettre aux utilisateurs d’installer également le site sur leur ordinateur, ce qui permet de consulter du contenu en l’absence de connexion.
Résultats en webperf et en interne
Ces actions ont déjà permis d’améliorer les résultats en terme de webperf, comme l’a indiqué Raphaël Dardeau, qui a utilisé l’outil Speed Curve pour effectuer ses mesures. Il annonce un temps de chargement réduit de 40% sur le mobile et de 50% sur le bureau et de 75% du nombre de commandes externes sur le bureau. La vitesse d’interaction avec le site (Time to interactive), selon l’équipe, a diminué de 15% sur le mobile et de 70% sur l’ordinateur et le temps nécessaire au remplissage de l’écran de 25% sur le mobile et 75% sur le bureau.
Cette refonte a également l'avantage de "réduire de moitié le temps de déploiement", se réjouit Raphaël Dardeau. Auparavant, il était nécessaire de développer séparément des solutions pour chaque version du site, une perte de temps et de cohérence que les équipes ne regretteront pas.
