Diminuer le poids d’une interface d’un client mail via CSS / SVG

par Nicolas Hoffmann, édition 2019

Consulter le support Voir la vidéo

Je travaille actuellement sur la v4 de ProtonMail. L’existant n’est pas toujours facile à manœuvrer : une inévitable dette technique (et donc de performance), des CSS lourdes, un manque d’uniformité, etc.

L’occasion d’une refonte est parfaite pour repenser l’architecture des CSS et prendre les bonnes décisions pour préparer la performance future : les gains substantiels se préparent au long cours, des choix qui peuvent sembler anecdotiques se révèlent très efficaces quand on doit « scaler » et penser internationalisation.

Je vous propose un retour d’expérience sur ce travail au long cours, des astuces notamment avec SVG (les requêtes les plus performantes sont celles… que l’on ne fait pas :) ), et principalement une manière d’architecturer CSS qui permet d’en réduire drastiquement le poids. Et donc d’envisager sereinement des notions sympathiques comme le budget de performance, les critical CSS, etc.

L’intégrateur n’a pas dit son dernier mot !


Nicolas Hoffmann

Présenté par Nicolas Hoffmann Front-End Developer, ProtonMail

Nicolas est un soldat monté pacifiquement au front (-end) depuis plus de 15 ans, qui a bossé en web agency en Suisse pendant une dizaine d’année, et qui travaille actuellement entre autres sur l’UI et CSS en tant que quark… chez ProtonMail.

Directeur du collectif OpenWeb, conférencier à des événements comme Paris-Web, Codeurs en Seine, Sud Web, etc., aussi auteur du micro-framework CSS Röcssti, certifié Expert qualité Opquast, également auteur de scripts accessibles via le projet Van11y - avec de l’ARIA dedans - et de plus d’une cinquantaine d’articles sur la conception de CSS, la sécurité, la qualité Web, etc., il est parfois délicatement surnommé « le Suisse-Allemand de la qualité Web » à cause d’un bon score à la certification Opquast. Le pire, c’est qu’il prend ce surnom comme un compliment.