Quand votre navigateur charge une page, il télécharge d'abord le HTML, puis parse le CSS. C'est seulement à ce moment-là qu'il découvre qu'il a besoin de quatre fichiers de police de 60 KB chacun. Pendant 200 à 600 millisecondes, il affiche soit rien (Flash of Invisible Text), soit la police système (Flash of Unstyled Text). Sur 3G ou un mobile lent, ça représente 2 à 3 secondes supplémentaires — et chaque seconde ajoutée fait perdre environ 7 % de conversions selon les études Google.

La bonne nouvelle : optimiser ses polices prend littéralement dix minutes et reste invisible à l'œil. Voici la méthode complète.

Mesurez d'abord, optimisez ensuite

Avant de toucher quoi que ce soit, ouvrez l'onglet Network de DevTools (Chrome ou Firefox), filtrez sur Font, et rechargez la page. Vous voyez la taille totale de chaque fichier de police et le temps de chargement. C'est votre baseline.

Lancez aussi PageSpeed Insights. Regardez deux métriques :

  • FCP (First Contentful Paint) — le moment où quelque chose apparaît à l'écran
  • CLS (Cumulative Layout Shift) — si elle est supérieure à 0,1, c'est probablement à cause du flash de police qui décale tout au moment du swap

Solution 1 — Limiter les variantes

La règle : ne chargez que ce que vous utilisez vraiment. Si votre site utilise regular pour le body, bold pour les titres et semibold pour les CTAs, vous avez besoin de trois fichiers, pas neuf (regular / medium / semibold / bold / black × italique / non-italique).

Google Fonts vous laisse choisir précisément au moment de construire l'URL d'import. Au lieu de charger toute la famille variable :

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

Précisez exactement les poids dont vous avez besoin :

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

Économie typique sur une famille classique : 200 KB → 60 KB.

Solution 2 — Preload les polices critiques

Le navigateur découvre les polices au moment où il parse le CSS, donc relativement tard dans la chaîne. Vous pouvez lui dire à l'avance que tel fichier sera nécessaire :

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

À placer dans le <head>, avant le <link rel="stylesheet">. Ne preload que les polices qui s'affichent above the fold (visibles sans scroll). Inutile de préemptivement charger une police qui ne sert que dans le footer — vous gaspilleriez de la bande passante critique.

Solution 3 — font-display: swap

Par défaut, beaucoup de navigateurs font du FOIT (Flash of Invisible Text) : le texte est invisible tant que la police custom n'est pas téléchargée. C'est terrible pour la perception de vitesse — l'utilisateur voit une page blanche pendant 400 ms.

Ajoutez ceci dans votre déclaration @font-face :

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter.woff2') format('woff2');
  font-display: swap;
}

La directive swap dit au navigateur : « affiche immédiatement avec la police de fallback (système), puis remplace par la police custom dès qu'elle arrive. » Texte visible dès la première frame.

Google Fonts ajoute &display=swap automatiquement à l'URL maintenant. Vérifiez quand même que c'est bien présent.

Solution 4 — Self-host plutôt que Google Fonts

Avant 2020, Google Fonts via CDN était presque toujours plus rapide grâce au cache partagé entre sites (un visiteur qui avait déjà téléchargé Roboto sur un autre site n'avait pas à le retélécharger sur le vôtre). Depuis Chrome 86 (octobre 2020), le cache HTTP est partitionné par origine — fini le cache partagé.

Aujourd'hui, self-host est presque toujours plus rapide. Vous téléchargez les fichiers .woff2 depuis google-webfonts-helper, vous les hébergez dans /fonts/ de votre site, et vous déclarez avec @font-face. Bonus : pas de DNS lookup vers fonts.googleapis.com, pas de risque de panne CDN tierce, et conformité RGPD améliorée (aucun transfert de données vers Google).

Solution 5 — Variable fonts

Au lieu de charger plusieurs fichiers (regular / medium / semibold / bold), une police variable est un seul fichier qui contient toutes les graisses interpolées. Inter Variable, par exemple, fait environ 140 KB pour tous les poids et italiques confondus.

Comparaison concrète :

  • Inter classique, 4 graisses statiques : 240 KB
  • Inter Variable : 140 KB (et vous avez accès à tous les poids entre 100 et 900)

Cherchez « [nom de police] variable » sur Google Fonts. Si elle existe, prenez-la — bénéfice immédiat sur le poids, et flexibilité totale sur les graisses utilisables.

La checklist 10 minutes

  1. Ouvrir DevTools → onglet Network → filtre Font → mesurer la baseline
  2. Réduire la liste de poids à 2 ou 3 maximum
  3. Ajouter font-display: swap (ou &display=swap dans l'URL Google Fonts)
  4. Preload les 1 ou 2 polices visibles above the fold
  5. Basculer sur la version variable si elle existe
  6. Re-mesurer : vous devriez avoir gagné 30 à 60 % sur le poids des fonts et 200 à 500 ms sur le First Contentful Paint

Pourquoi ça mérite ces 10 minutes

Les polices sont la partie cachée d'un site rapide. Travailler dessus dix minutes peut faire gagner autant qu'optimiser des images pendant des heures. Et c'est invisible à l'œil nu — les visiteurs sentent que le site est « fluide » sans savoir pourquoi. Cette fluidité augmente la conversion, réduit le taux de rebond, et améliore le score Core Web Vitals que Google utilise comme signal de classement depuis 2021.

Si votre site rame et que vous voulez qu'on regarde ensemble, on fait des audits performance gratuits — un mail à hello@studiosilex.fr suffit pour démarrer.