Les polices web coûtent plus cher qu'il n'y paraît
Trois familles, cinq graisses, deux italiques : la typographie devient le premier poste de requêtes du site, avant même les images.
La maquette est belle. Elle emploie trois familles typographiques, en cinq graisses, avec les italiques. Cela fait dix-huit fichiers à télécharger avant que le texte ne s’affiche correctement.
La typographie est un poste de performance à part entière.
Réduire le nombre de fichiers
Chaque combinaison famille + graisse + style est un fichier distinct. Le premier réflexe utile est d’auditer ce qui est réellement employé dans les styles, et non ce que la maquette prévoyait.
Une famille pour les titres et une pour le texte suffisent à la quasi-totalité des sites. Deux graisses par famille couvrent la plupart des besoins.
Les polices variables
Un fichier variable contient toute la plage de graisses en un seul téléchargement. Là où quatre graisses statiques représentaient quatre fichiers, une police variable en fait un — souvent plus léger que deux statiques.
Le gain est double : moins de requêtes, et la possibilité d’utiliser des graisses intermédiaires sans coût supplémentaire.
Ne charger que les caractères utiles
Un fichier de police complet couvre le cyrillique, le grec, le vietnamien et des jeux d’extensions dont un site français n’utilise rien.
Se limiter au sous-ensemble latin divise le poids par trois ou quatre. Pour le français, il couvre les accents, la ligature œ, les guillemets typographiques et l’espace insécable.
Le texte invisible pendant le chargement
Par défaut, certains navigateurs masquent le texte jusqu’à l’arrivée de la police. Le visiteur regarde une page vide alors que le contenu est déjà là.
La propriété font-display: swap affiche immédiatement une police de substitution, puis
échange. Le texte est lisible tout de suite.
La contrepartie est un léger décalage à l’échange. Il se réduit en choisissant une police de repli aux proportions proches, déclarée dans la pile de substitution.
L’héberger sur son propre domaine
Une police chargée depuis un service tiers ajoute une résolution DNS et une négociation TLS avant le premier octet, et transmet l’adresse IP du visiteur à ce service — ce qui a valu des décisions défavorables au regard du règlement européen.
Servie depuis le domaine du site, elle réutilise une connexion déjà ouverte et ne transmet rien à personne. Le fichier se met en cache pour un an, puisqu’il ne change jamais.
Un détail compte : le préchargement d’une police exige l’attribut crossorigin, y compris pour
un fichier du même domaine. Sans lui, le navigateur télécharge le fichier deux fois.
La question à se poser en amont
Une famille supplémentaire apporte-t-elle une distinction que la hiérarchie, l’espacement et la couleur ne produiraient pas ? La réponse est souvent non, et elle économise plusieurs dizaines de kilo-octets sur chaque première visite.