Une police web est un fichier que le navigateur doit télécharger avant de dessiner le texte comme sur la maquette. Chaque graisse, chaque style italique et chaque alphabet en plus ajoute une requête et des kilo-octets sur le chemin critique. On peut garder l’identité visuelle avec beaucoup moins de fichiers : un format unique, les graisses vraiment utilisées, un jeu de caractères réduit, et une consigne claire pendant que le fichier arrive.
Moins de fichiers, en WOFF2
Comptez les graisses présentes dans les CSS, pas celles du dossier « au cas où ». Un site qui n’emploie que le régulier et le gras n’a pas à charger le light, le medium et le black. L’italique est un second fichier s’il est réellement utilisé dans le contenu.
Servez ces fichiers en WOFF2. Déclarez-les avec @font-face, font-weight explicite, et font-style. Évitez les faux gras synthétiques si vous tenez à la graisse dessinée par la fonderie : ils évitent un fichier, mais ce n’est plus la même police.
Une police variable réunit plusieurs graisses dans un seul fichier. Elle est intéressante quand vous utilisez vraiment plusieurs poids. Si vous n’en utilisez qu’un, le fichier variable est souvent plus lourd que la graisse seule. Comparez les octets, ne partez pas du principe que « variable » est toujours plus léger.
Le sous-ensemble (subset) retire les caractères inutiles. Un site en français n’a pas besoin de l’alphabet complet d’une police prévue pour dix écritures. Gardez latin et les accents utilisés. Un sous-ensemble trop agressif affiche des rectangles dès qu’un nom propre ou une citation sort du jeu prévu : testez sur un texte réel, pas sur « Hello ».
Le texte doit rester lisible pendant le chargement
font-display: swap affiche immédiatement la police de repli, puis bascule. Le lecteur n’attend pas le fichier pour lire. L’inconvénient est un possible décalage de mise en page au moment du bascule, si la police de repli n’a pas les mêmes largeurs. On le réduit en choisissant une repli métriquement proche et, si besoin, en ajustant size-adjust et les propriétés associées sur cette repli.
font-display: optional va plus loin : si le fichier n’est pas là tout de suite, le navigateur peut garder la repli pour cette visite. C’est adapté à une police décorative non indispensable. Ce l’est moins pour le texte de corps si la marque exige la police dès la première seconde. block, à l’inverse, laisse le texte invisible un moment. Sur une connexion lente, ce blanc est précisément ce qu’on cherche à éviter. Le choix se fait par usage : corps en swap, ornement en optional.
Hébergez les fichiers sur votre domaine quand vous le pouvez. Une police chez un tiers ajoute une connexion, et parfois un échange de cache opaque. Si vous restez sur un service tiers, une préconnexion vers son origine limite le coût du DNS et du TLS, sans dispenser de réduire le nombre de graisses.
Un seul préchargement
<link rel="preload" as="font" type="font/woff2" crossorigin> sur le fichier du texte visible en haut de page. L’attribut crossorigin est obligatoire pour une police, même sur le même site : sans lui, le navigateur télécharge le fichier deux fois, une fois pour le preload et une fois pour le CSS.
Ne préchargez pas l’image principale et cinq polices. Le préchargement dit « ceci est prioritaire ». Si tout est prioritaire, l’image qui porte le plus grand affichage attend, et le LCP s’allonge. Le détail des causes est dans l’article page lente. Les mesures de terrain et de laboratoire, elles, ne se lisent pas de la même façon : voir RUM et labo.
Vérifiez dans l’onglet réseau qu’une seule requête part pour chaque fichier annoncé, en 200, avec un cache long et un nom versionné. Un 404 de police est invisible pour beaucoup de lecteurs (la repli prend le relais) et bien visible dans le poids de la mise en page. SiteGarde peut surveiller l’URL du fichier de police comme n’importe quelle ressource critique, si ce fichier est stable. Il ne choisit pas les graisses à la place de la feuille de styles.