Les polices web jouent un rôle clé dans l’identité visuelle d’un site, mais elles peuvent aussi ralentir considérablement le temps de chargement. Une mauvaise optimisation des polices entraîne des Flash of Invisible Text (FOIT) ou Flash of Unstyled Text (FOUT), nuisant à l’expérience utilisateur et au référencement. Ce guide vous explique comment optimiser le chargement des polices web pour allier design et performance.
Table des matières:
Pourquoi le chargement des polices web impacte-t-il les performances ?
Chaque police web ajoute une requête HTTP supplémentaire et un fichier à télécharger. Les polices non optimisées peuvent peser plusieurs centaines de kilooctets, bloquant le rendu du texte tant qu’elles ne sont pas chargées. Google et les utilisateurs pénalisent les sites lents : un délai d’une seconde supplémentaire peut réduire les conversions de 20 %. L’optimisation des polices est donc cruciale pour le Core Web Vitals, notamment le Largest Contentful Paint (LCP).
Les bases de l’optimisation des polices web
Choisir le bon format de fichier
Privilégiez les formats modernes comme WOFF2, qui offre un meilleur taux de compression que WOFF ou TTF. WOFF2 est supporté par tous les navigateurs récents et réduit la taille des fichiers jusqu’à 30 % par rapport à WOFF. Évitez les formats obsolètes comme EOT ou SVG pour les polices.
Limiter le nombre de polices et de graisses
Chaque police et chaque graisse (regular, bold, italic) ajoute un fichier à charger. Utilisez au maximum deux familles de polices et deux à trois graisses par projet. Par exemple, une police pour les titres et une pour le corps de texte, avec regular et bold suffisent souvent.
Utiliser la propriété font-display
La propriété CSS font-display contrôle le comportement d’affichage des polices pendant le chargement. Les valeurs possibles sont :
- swap : affiche immédiatement une police de secours, puis échange lorsque la police personnalisée est chargée. Évite le FOIT mais peut provoquer un FOUT.
- block : cache le texte jusqu’au chargement de la police (FOIT). Déconseillé.
- fallback : compromis entre swap et block.
- optional : la police n’est chargée que si le navigateur le juge utile, idéal pour les connexions lentes.
Pour la plupart des sites, font-display: swap est recommandé pour garantir que le texte reste lisible.
Techniques avancées d’optimisation
Subsetting : ne charger que les caractères nécessaires
Le subsetting consiste à supprimer les glyphes inutiles (comme les caractères cyrilliques si votre site est en français). Vous pouvez réduire la taille d’une police de 50 à 90 %. Des outils comme Font Squirrel, Glyphhanger ou Google Fonts (via l’option &text=) permettent de générer des subsets.
Préchargement des polices avec
Le préchargement indique au navigateur de télécharger la police dès que possible, avant même que le CSS ne soit analysé. Ajoutez cette balise dans le <head> :
<link rel="preload" href="police.woff2" as="font" type="font/woff2" crossorigin>Attention : le préchargement ne doit être utilisé que pour les polices critiques, sinon il peut gaspiller la bande passante.
Mise en cache efficace
Définissez des en-têtes de cache agressifs pour les fichiers de polices, par exemple Cache-Control: public, max-age=31536000, immutable. Les polices changent rarement, une mise en cache d’un an est appropriée. Utilisez un CDN pour servir les polices plus rapidement.
Hébergement local vs Google Fonts
Héberger vos polices localement réduit les dépendances externes et évite les requêtes DNS supplémentaires. Les polices Google peuvent être auto-hébergées grâce à des outils comme google-webfonts-helper. Cela améliore la confidentialité et la vitesse.
Outils pour auditer et optimiser les polices
| Outil | Utilité |
|---|---|
| Google PageSpeed Insights | Identifie les polices bloquant le rendu |
| WebPageTest | Analyse détaillée du chargement |
| Font Squirrel | Génération de subsets et conversion WOFF2 |
| Glyphhanger | Subsetting automatisé en ligne de commande |
| Chrome DevTools | Inspecte le chargement des polices |
Erreurs courantes à éviter
- Utiliser trop de polices différentes : multiplie les requêtes et ralentit le site.
- Ignorer font-display : par défaut, les navigateurs utilisent
block(FOIT). - Ne pas compresser les polices : servez toujours WOFF2 si possible.
- Oublier l’attribut crossorigin : nécessaire pour le préchargement des polices provenant d’un domaine différent.
- Précharger toutes les polices : ne préchargez que les polices critiques pour le premier rendu.
Checklist pour optimiser le chargement des polices web
- [ ] Utiliser WOFF2 pour toutes les polices.
- [ ] Limiter à 2 familles de polices et 3 graisses maximum.
- [ ] Ajouter
font-display: swapdans le CSS. - [ ] Générer des subsets pour ne conserver que les caractères utilisés.
- [ ] Précharger la police principale avec
rel=preload. - [ ] Mettre en cache les polices pour un an.
- [ ] Héberger localement si possible.
- [ ] Tester avec PageSpeed Insights et WebPageTest.
Questions fréquentes sur l’optimisation des polices web
Qu’est-ce que le FOIT et le FOUT ?
Le FOIT (Flash of Invisible Text) se produit lorsque le texte reste invisible tant que la police n’est pas chargée. Le FOUT (Flash of Unstyled Text) affiche une police de secours avant le chargement. font-display: swap privilégie le FOUT pour une meilleure expérience.
Google Fonts ralentit-il mon site ?
Oui, si elles ne sont pas optimisées. Utilisez le paramètre display=swap dans l’URL Google Fonts et hébergez les polices localement pour réduire les requêtes.
Comment réduire la taille d’une police web ?
Utilisez le subsetting, convertissez en WOFF2, et supprimez les graisses inutiles. Certains outils permettent de compresser davantage.
Faut-il précharger toutes les polices ?
Non, préchargez uniquement la police utilisée pour le contenu visible au-dessus de la ligne de flottaison. Les autres polices peuvent être chargées normalement.
Quel est l’impact des polices sur le Core Web Vitals ?
Les polices non optimisées augmentent le LCP (Largest Contentful Paint) et le FID (First Input Delay) à cause du blocage du rendu. Une optimisation améliore ces métriques.
Puis-je utiliser des polices système pour éviter ce problème ?
Oui, les polices système (Arial, Helvetica, etc.) sont déjà installées sur l’appareil et ne nécessitent aucun téléchargement. C’est la solution la plus rapide, mais moins personnalisable.
Recommandations finales pour un chargement optimal
L’optimisation des polices web est un équilibre entre design et performance. Commencez par auditer votre site avec PageSpeed Insights, puis appliquez les techniques de base : choisir WOFF2, limiter le nombre de polices, utiliser font-display: swap. Pour aller plus loin, implémentez le subsetting et le préchargement. Testez chaque modification pour mesurer l’impact réel. En suivant ces conseils, vous améliorerez la vitesse de votre site, l’expérience utilisateur et votre référencement naturel.
