Polices web : WOFF2 est le 64 % facile, le subsetting fait les 30 restants

Les polices bloquent le rendu et elles sont lourdes. Une seule graisse peut peser plus que toutes les images visibles sans défilement. Deux changements réduisent une police web classique à une fraction de ce qu’un TTF brut envoie, et la plupart des sites ne font ni l’un ni l’autre.

WOFF2 : les 64 % gratuits

WOFF2 est un conteneur de police qui compresse les tables de glyphes avec Brotli et une transformation calibrée pour les données de police. Ce n’est pas une autre typographie : c’est la même police, plus légère, et elle est prise en charge par tous les navigateurs en usage.

Nous avons converti 40 polices réelles (des TTF de Google Fonts) en WOFF2 :

C’est le changement le plus rentable qu’on puisse faire sur une police web, et il ne coûte rien : mêmes glyphes, même rendu, une étape de build. Si vous servez du .ttf ou même du .woff, vous envoyez deux à trois fois plus d’octets pour rien.

Subsetting : les 30 de plus

Voici la partie que presque personne ne fait. Ouvrez le TTF d’une Google Font, et il embarque en général bien plus que le latin : cyrillique, grec, vietnamien, ponctuation étendue, symboles. Un site en anglais télécharge tout ça et n’en affiche rien.

Le subsetting supprime les glyphes qu’une page n’utilisera jamais. Nous avons sous-ensemblé les 40 mêmes polices sur une plage latine (0-2AF plus la ponctuation web courante et l’euro) avec hb-subset :

La dernière ligne mérite un second regard : 22 MB de TTF deviennent environ 1 MB une fois qu’on convertit en WOFF2 et qu’on garde seulement les glyphes qu’une page latine utilise, soit une coupe de 95%. WOFF2 seul a fait passer 22 MB à 7 MB ; le subsetting a fait passer 7 MB à 1 MB. Les deux s’additionnent, et c’est le second qui surprend.

Comment sous-ensembler sans tout casser

Le subsetting est destructif de la seule façon qui compte : les glyphes retirés disparaissent. Faites-le délibérément.

• Ne retirez que ce que vous ne servez pas. Un site latin sous-ensemble sur le latin. Un site multilingue garde les plages qu’il affiche.
• Utilisez unicode-range dans @font-face. Livrez plusieurs sous-ensembles (latin, latin étendu, cyrillique…) et laissez le navigateur ne récupérer que ceux que le texte d’une page touche réellement. C’est exactement comme ça que Google Fonts sert ses polices, et vous pouvez faire pareil avec les vôtres.
• Faites attention au texte généré par les utilisateurs. Si les utilisateurs peuvent taper n’importe quoi (des noms, des emoji, d’autres écritures), un sous-ensemble strictement latin affichera des tofu (□) à la place des glyphes manquants. Gardez un sous-ensemble plus large, ou un repli sur une police système, pour ces surfaces.
• Le hinting est généralement supprimable. Sur les écrans modernes à haute densité, le hinting TrueType apporte peu et coûte des octets ; le retirer réduit encore le fichier, mais testez si vous supportez du Windows basse densité.

Ce que fait Patu avec une police

Envoyez à Patu un TTF, un OTF ou un WOFF, et il renvoie du WOFF2. Passez le texte ou les plages unicode dont la page a besoin, et il sous-ensemble dans la même étape : la voie du 95%, pas juste celle du 64%.

# convert + subset to the glyphs this page actually uses
curl -X POST "https://patu.dev/v1/compress?subset-text=$(cat page.txt)" \
  -H "X-Api-Key: $PATU_KEY" -H "Content-Type: font/ttf" \
  --data-binary @Inter.ttf -o Inter.woff2

La conversion WOFF2 est le changement que tout le monde devrait déjà avoir fait. Le subsetting est celui qui transforme une police d’un poste de poids de page bien réel en une erreur d’arrondi.

Méthode et données : 40 polices réelles (des TTF de Google Fonts) ; WOFF2 via woffify, subsetting via hb-subset sur 0-2AF,20AC,2018-201F,2010-2014. Les réductions sont la médiane par rapport au TTF source ; l’agrégat est la somme des octets des 40 polices.