Le monde de la performance web était réuni pour un meetup chez Mozilla. Au programme de cette belle soirée : Nicolas Hoizey, Directeur Innovation chez Clever qui nous a proposé les solutions pour faciliter la mise en œuvre des images responsives et Aniss Boumrigua, IT Manager chez Rue du Commerce, qui nous a présenté comment Rue du Commerce a intégré la web performance dans le cadre de la refonte globale de son site.
Les images : un enjeu stratégique pour la webperf !
La technique des compressives images, méthode qui consiste à servir des images deux fois plus grandes faiblement compressées sur des écrans retina, c'est terminé ! Il y a des habitudes qui sont ancrées et celle-ci fait presque office de marronnier dans le milieu du front-end. Idem, il ne s'agit plus de déterminer des tailles d'images de manière arbitraire, mais plutôt de vous pencher sérieusement sur les dimensions les plus couramment utilisées emplacement par emplacement (méthode détaillée dans les slides ci-dessous). Un travail d'artisan qui mérite d'être automatisé. L’intégration HTML se déroule au niveau de la balise img avec une série de nouveaux attributs qui sont détaillés dans cet article >>
Attention la balise
La présentation de Nicolas Hoizey :
Et voici la vidéo de sa présentation :
Rue du commerce, le modèle à suivre ?
Rue du commerce, c'est 25% de part de marché dans le high-tech ! Autant vous dire que la webperf est un enjeu stratégique. Des millisecondes de gagnées se traduisent par une augmentation du taux de transformation. Aniss Boumrigua nous a présenté comment à l'occasion d'une refonte globale ils ont réussi à optimiser drastiquement leur taux de transformation.
La première étape a été de redéfinir une stack technique moderne et mettre en place les conditions nécessaires pour déployer rapidement de nouvelles features. L'objectif était d’optimiser le TTFB, une métrique très chère à notre ami Google et son crawler. Les résultats ont été immédiats. Mais côté front-end, l'utilisateur ne percevait pas cette accélération.
L’équipe se retrousse alors les manches pour passer à la seconde étape, accompagnée cette fois par Fasterize, qui a consisté à optimiser la partie front-end. En six mois, les optimisations ont été déployées une à une et les dizaines de millisecondes sont tombées les unes après les autres comme autant de victoire. Un travail récompensé dans le classement du JDN ! Il ne s'agit pas de vous faire le listing des optimisations mises en palce, mais je vais vous donner quelques points importants cités par Aniss Boumrigua.
- Mettez vous en position d’aller vite, déployez, testez rapidement
- Acquérir un outil de RUM (Real user monitoring) et déterminer les métriques de références à suivre : speed index, start render et TTFB.
- Évangéliser et travailler de concert avec les services marketing, infrastructure. Chaque décision devrait être prise sous le prisme de la webperf.
- Faire un benchmark de la concurrence pour voir les techniques utilisées et reproduire. Un bon conseil, analysez en détail le site de Rue du Commerce 🙂
- En mode test and learn. Mettre en place une optimisation, valider la pertinence et rollbacker si nécessaire.
Une présentation ponctuée par des GIF légendaires !
Et si vous préférez la version filmée,
voici la vidéo :
Vous avez été nombreux ce mercredi soir à partager ce moment de convivialité. Ses précieuses millisecondes à écouter des experts vous donneront certainement un avantage compétitif face à vos concurrents.
Évidemment, je ne vous ai pas tout raconté. La soirée se termine autour du combo pizza / bières, mais surtout de quelques tricks qui s'échangent sous le manteau. Le genre d’information que l'on partage en famille 🙂
Ne ratez pas le prochain meetup, inscrivez-vous pour rester informé.e !
Et vous pouvez aussi nous suivre sur twitter ou LinkedIn, pour bénéficier aussi des astuces de nos experts webperf !