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

CSS ?

• Votre chemin passera forcément par CSS…
• CSS sera le chemin critique

Et pourtant…

Le cercle infernal de CSS

1. On écrit de la CSS…
2. … mal, qui ne scale pas.
3. Il faut en écrire toujours plus… encore et encore…
4. Goto 1

Ce n’est pas nouveau

• Top 5 Mistakes of Massive CSS
  (Nicole Sullivan - 2010)
• 15kb of CSS is all you’ll ever need
  (Philip Ardeljan - 2016)
• CSS and network performance
  (Harry Roberts - 2018)
• Etc.

[…] The knock-on effects of slow CSS are far bigger than most developers realise.

— Harry Roberts (@csswizardry)
August 2, 2019

Disclaimer !

I ♥ performance :)

I ♥ surtout la penser en amont.

Objectifs

Réduire le poids de manière drastique !

Et réduire aussi le nombre de requêtes.

Chez ProtonMail 🥰

Sur la v3… 😧

600ko de CSS 😨. Minifiés. 😱

110ko gzippés. 😥

Et impossibles à manœuvrer. 😫

C’est beaucoup trop !

Disclaimer

• C’est un WIP ¯\_(ツ)_/¯
• Changement global à plusieurs niveaux
• Certains points ne sont pertinents à partir d’une certaine échelle

Historique et contexte

Penchons-nous sur les CSS de v3…

alt="Association de malfaiteurs tueurs de performances"

Sass Nesting inferno

Et ses copains ☢️☢️☢️

#pm_composer { /* ! */
  .composer { /* !! */
    h1 { … }
    .flex { … } /* !!!!! */
    .attachmentBar { /* ALERT: inception level 4 */
      i {
        &.embedded { … }
      }
      .previews {
        .preview-close { … }
        .attachment {
          .fa {
            &.embedded {
            /* kill me. Now. */

Méthode RY

RY = Repeat Yourself

D’autres «copains»

• 1:1 → 1 contenu = 1 style
• Mixins utilisés à répétition
• Etc.

Bref

Penchons-nous sur v4

Comment faire ?

alt="méthodologiser/ranger/organiser/structurer/réutiliser"

Quelques principes

• Décorréler la structure des styles
• Séparer le positionnement d’un composant de son design
• Un comportement revient ? 1 classe atomique.
• Cibler efficacement
• Distinguer les priorités de vos assets

Un exemple

Cibler global et spécifique

[class*="badgeLabel"] {
  // global
}
.badgeLabel-success {
  // spécifique
}

Bref

Bonus stage : SVG

Des icônes, partout !

Sur v3… c’est le bazar

Font-icons/SVG/images/formats/viewboxes

Sur v4 : SVG, le seul et l’unique

Sprites SVG inline

<defs>
  <g id="shape-account">
    <path d="…"/>
  </g>
  <g id="shape-add">
    <path d="…"/>
  </g>
  …

Sprites SVG inline

<svg viewBox="0 0 16 16" role="img" aria-hidden="true" focusable="false">
  <use xlink:href="#shape-account"></use>
</svg>

Sprites SVG

<symbol id="symbol-caret"><path d="…" /></symbol>

<use id="css-caret" xlink:href="#symbol-caret" 
  class="black" />
<use id="css-greater" xlink:href="#symbol-caret"
  class="black rotated-right" />
						

background-image: url(sprite-css.svg#css-caret)

SVG, c’est le pied

• Retina-ready/scalable/skinable
• Moins de requêtes
• Léger (25ko/gzippé pour ~160 icônes)
• Une fois chargé, affichage instantané

Des métriques (v3)

Des métriques (sur v4)

D’autres indicateurs

D’autres indicateurs