Faire de la perf sans être déçu
Ce talk est un retour d'experience sur un projet d'amélioration de performance pour un géant de e-commerce du luxe français. Objectif : Faire passer le score Lighthouse en 3G de 2/100 à 70/100. Ambitieux 🧐 ? Et oui... Mais avec une équipe de choc de 3 développeurs à temps plein sur le projet 🧑🏽💻👩🏼💻! Ce talk parlera du gros travail de performance qui a été fait sur un site SSR en NextJS, notamment avec : - 🌳 Une réduction drastique de la taille du bundle d'un facteur 3 grâce à du tree shaking et une chasse aux dépendances dupliquées dans un mono-repo. - 🤖 Une réduction de 4s sur le Time To Interactive grâce au lazy loading de nos pages mais aussi de nos composants React, tout ca sans impacter le SEO . - 💤 Une reduction de moitié du Total Blocking Time grâce à la mise en place d'une solution de Lazy Hydrating. Malgré tous ces efforts et l'enthousiasme de l’équipe, le projet a été marqué par de nombreux moments de deception. Spoiler alert : Nous n'avons pas réussi à atteindre la barre des 70/100 ni même la barre des 20/100 en 3G. Spoiler Alert 2 : En 4G, le score lighthouse est passé de 40 à plus de 95 /100 🎉. Les clients ont remarqué l'énorme amélioration de la performance du site et étaient donc très satisfaits. Si vous aussi vous avez peur d’être déçu sur vos améliorations de performance, ce talk vous donnera de précieux conseils pour savourer au maximum tous vos efforts.Tout ce que vous devriez savoir sur Unicode, UTF-8 et autres
string est l'une des primitives principales en informatique, et ce quelque soit le langage. Pourtant, derrière son semblant de simplicité, se cache une énorme complexité inhérente aux spécifications Unicode. Ce talk a pour objectif de vous présenter ce que sont Unicode, UTF-8.. Afin que vous soyez prêt pour l'internationalisation de vos Apps.Manipulation des pixels d'un canvas : c'est beau mais c'est lent
J'ai une passion pour les cartes et leur esthétique. Avec mon projet maposaic.com, je transforme le canvas d'une carte de Mapbox en une mosaïque en couleur. Cependant, mon algorithme parcourt tous les pixels du canvas, ce qui prend beaucoup de temps : plus de 2 secondes pour faire un rendu de carte sur un écran fullHD. J'ai commencé à explorer l'API WebGL pour accélérer le rendu. Les apprentissages que je voudrais vous partager pendant ce talk : - comment transformer un canvas via l'interface ImageData - performance d'un rendu sur un canvas vs. un rendu SVG - comment améliorer l'expérience utilisateur avec un Worker (sur un projet webpack + react + typescript) - OpenGL/WebGL : comment améliorer la performance de mon site en utilisant l'API WebGL A la fin de ce talk vous connaîtrez les bases qui permettent de modifier un canvas dans un projet web. Vous saurez pourquoi les rendus WebGL sont beaucoup plus performants qu'un algorithme qui itère sur tous les pixels.
