Optimiser le chargement des polices web

Une police web complète, avec toutes ses variantes stylistiques et l’intégralité de ses glyphes, peut peser plusieurs mégaoctets et ralentir l’affichage de vos pages. Or les polices comptent parmi les ressources les plus piégeuses : le navigateur ne les télécharge qu’une fois l’arborescence de rendu construite, c’est-à-dire après le DOM et le CSSOM. Résultat, la requête part tard et le texte peut rester invisible pendant que le fichier arrive.

Ce comportement a un impact direct sur vos indicateurs de performance, donc sur votre SEO. Un téléchargement de police trop lent dégrade le First Contentful Paint (le moment où le premier contenu s’affiche), tandis qu’une bascule mal gérée entre police de secours et police définitive provoque des décalages visuels qui pénalisent le Cumulative Layout Shift. Optimiser le chargement des polices, c’est donc gagner sur la vitesse perçue et sur la stabilité visuelle, deux critères que Google valorise et que l’on travaille aussi en optimisant le CLS.

Le chargement des polices est dit paresseux : le navigateur ne sait quelles ressources de police récupérer qu’après avoir combiné les arborescences DOM et CSSOM pour produire l’arborescence de rendu. Les requêtes de police partent donc bien après les autres ressources critiques, un phénomène que le chemin critique de rendu aide à comprendre.

Il se crée alors une course entre la première peinture du contenu et l’arrivée du fichier de police. Si la police gagne, tout va bien. Si elle perd, le navigateur affiche la mise en page mais omet le texte : c’est le problème du texte invisible. Deux leviers permettent de reprendre la main : précharger la police pour la demander plus tôt, et indiquer au navigateur comment se comporter en attendant grâce à font-display.

Quand vous connaissez à l’avance l’URL d’une police critique, la directive preload déclenche sa requête dès le début du chemin de rendu critique, sans attendre la création du CSSOM. La police est ainsi disponible bien plus tôt.

Deux précautions sont indispensables. D’abord, l’attribut crossorigin est obligatoire, même pour une police auto-hébergée, car les polices sont traitées comme des ressources CORS. Ensuite, n’abusez pas du preload : précharger trop de fichiers détourne la bande passante d’autres ressources critiques et peut télécharger des polices inutiles à la page courante.

Le preload augmente les chances que la police soit prête, mais ne garantit rien. La propriété CSS font-display indique au navigateur quoi faire tant que la police n’est pas chargée. Elle découpe la durée de vie du téléchargement en trois périodes : une période de blocage (le texte concerné reste invisible), une période de remplacement (une police de secours s’affiche), puis une période de défaillance (la police est considérée comme échouée et la police de secours reste). Selon la valeur choisie, vous privilégiez la fidélité typographique ou la disponibilité immédiate du texte.

Les polices sont des ressources statiques, rarement modifiées : elles se prêtent parfaitement à une mise en cache de longue durée. Servez-les avec un en-tête de cache adapté et un jeton de revalidation (ETag) afin de permettre leur réutilisation efficace entre vos pages. Une fois la police téléchargée lors de la première visite, les navigations suivantes l’utilisent immédiatement, ce qui supprime l’attente ; pour aller plus loin, voyez comment optimiser les polices web. Si votre site emploie un service worker, une stratégie de cache prioritaire pour les polices convient à la plupart des cas.