Reduce the weight of a mail client UI via CSS / SVG

par Nicolas Hoffmann, édition 2019

Check the slides (fr) See the video (fr)

I’m currently working on the v4 of ProtonMail. The present version is not always easy to operate: the technical debt is inevitable (and performance debt as well), so are heavy CSS and lack of consistency…

Revamping is an ideal opportunity to rethink the CSS architecture and take the right decisions to improve performance: significant earnings requires groundwork, and some choices that may appear as trivial could reveal themselves powerful when it’s about scaling and thinking about going worldwide.

I’m sharing feedback about this long term work, tips such as SVG (because the most efficient requests are the ones… we don’t run:)), and more especially the way to conceive CSS architecture to drastically reduce its weight, in order to consider performance budget or critical CSS with perfect equanimity.

You haven’t heard the last from HTML/CSS developpers!


Nicolas Hoffmann

Presented in French by Nicolas Hoffmann Front-End Developer, ProtonMail

Nicolas is a soldier who has been pacificaly moving up to the front(-end) over more than 15 years. He’s been working in a Swiss web agency for about 10 years, and he’s currently working as a quark on UI and CSS among other things… at ProtonMail.

Head of the OpenWeb group, speaker at events such as Paris-Web, Codeurs en Seine, Sud Web… He’s also the editor of the micro-framework CSS Röcssti, Opquast certified Quality Expert, editor of scripts available via the Van11y project – with some ARIA inside –, and he published more than 50 articles about CSS conception, security, Web quality… He’s sometimes kindly nicknamed “the Web quality Swiss-German”, due to his great score at the Opquast certification. And maybe you won’t believe it, but he considers this nickname as a compliment!