Comment accélérer le chargement des polices web

1. Utilisez le format WOFF2

C’est le format courant le plus léger. Si vous diffusez encore des fichiers TTF ou OTF, c’est le gain le plus facile. Utilisez le générateur de polices web pour les convertir.

2. Supprimez les caractères inutilisés

Beaucoup de polices contiennent des alphabets que votre site n’affiche jamais. Le sous-ensemble de polices ne conserve que les langues que vous choisissez. Vérifiez d’abord la licence de la police, et conservez toutes les langues utilisées sur votre site.

3. Chargez moins de graisses

Chaque graisse et chaque italique représente un fichier supplémentaire. Beaucoup de sites n’ont besoin que du normal et du gras. Recherchez dans votre CSS les graisses que vous n’utilisez plus, puis supprimez-les.

4. Envisagez une police variable

Si vous utilisez trois graisses ou plus, une seule police variable peut être plus légère que plusieurs fichiers statiques. Vous pouvez encore la réduire en limitant sa plage de graisses dans le générateur de polices web.

5. Précharger la police principale

En règle générale, le navigateur ne découvre une police qu’après avoir lu votre CSS. Le préchargement lui permet de commencer plus tôt :

<link rel="preload" href="/fonts/brand-regular.woff2" as="font" type="font/woff2" crossorigin>

Conservez l’attribut crossorigin, même sur votre propre domaine, sans quoi le fichier risque d’être téléchargé deux fois. Ne préchargez que la ou les deux polices utilisées en haut de la page.

6. Définissez font-display

Cette propriété contrôle ce que voient les visiteurs pendant le chargement d’une police. swap affiche immédiatement une police de secours, si bien que votre texte n’est jamais invisible. optional évite un changement tardif de police, mais sur les connexions lentes, les visiteurs peuvent ne pas voir votre police lors de leur première visite.

7. Mettez les polices en cache pendant longtemps

Les fichiers de police changent rarement, laissez donc les navigateurs les conserver. Ajoutez une version ou un hachage au nom du fichier, puis envoyez :

Cache-Control: public, max-age=31536000, immutable

Mesurez le résultat

Analysez votre page avec le test de vitesse de page avant et après, puis comparez le Largest Contentful Paint et le décalage de mise en page.