PageSpeed Insights et optimisation des polices : Le guide !

Votre site web est peut-être superbe, bien pensé, avec des images magnifiques et un contenu captivant. Pourtant, lorsque vous lancez PageSpeed Insights, la sentence tombe : votre score s’écroule à cause des polices de caractères. C’est frustrant. On a tendance à croire qu’une police de caractères ne peut pas ralentir un site. Après tout, ce n’est que du texte, non ?

• Comprendre comment les polices influencent directement la vitesse d’affichage et le score PageSpeed Insights, afin d’améliorer la visibilité et l’expérience de vos visiteurs.
• Savoir quelles pratiques appliquées aux polices permettent de gagner en performance sans renoncer au design, notamment grâce aux polices variables.
• Pouvoir rendre votre site plus fluide et plus professionnel en quelques optimisations simples, visibles immédiatement sur mobile et sur les connexions lentes.

En réalité, les polices sont l’une des premières sources de blocage du rendu sur un site. Elles peuvent retarder l’affichage du contenu, peser plusieurs centaines de kilo-octets et pénaliser votre valeur LCP, votre note de performance et même votre référencement sur Google. La bonne nouvelle, c’est qu’optimiser les polices peut transformer radicalement votre score, parfois en quelques minutes seulement.

Dans ce chapitre, nous allons vous guider pas à pas. Vous allez comprendre pourquoi PageSpeed Insights surveille attentivement les polices de caractères, comment éviter les erreurs les plus fréquentes, et surtout comment utiliser des polices variables pour accélérer votre site sans sacrifier son design. Préparez-vous, parce que vous allez voir qu’une petite optimisation peut vous faire gagner gros.

Pourquoi PageSpeed Insights s’intéresse autant aux polices

Google PageSpeed Insights évalue la vitesse perçue de votre site. Lorsque quelqu’un arrive dessus, Google mesure si la page s’affiche rapidement et si le texte apparaît immédiatement. Le problème, c’est que les polices personnalisées ne font pas partie du navigateur. Elles doivent être téléchargées chaque fois qu’un visiteur arrive pour la première fois.

Cela signifie que tant que la police n’est pas prête, le navigateur se retrouve dans un dilemme. Afficher un texte avec une police de secours qui risque de faire “sauter” la mise en page ensuite, ou attendre que la police soit chargée avant d’afficher le texte. Dans les deux cas, PageSpeed Insights détecte un souci.

Vous avez peut-être déjà vu ces mentions dans votre rapport PageSpeed :

• Texte masqué pendant le chargement de la police
• Préchargez vos polices
• Servez des polices optimisées pour le web
• Évitez les ressources bloquant le rendu

Cela montre que les polices ont un impact direct sur les métriques clés comme le FID, le CLS ou encore le LCP.

Pour résumer simplement : une police mal optimisée = du contenu invisible = une expérience frustrante = une mauvaise note sur PageSpeed Insights.

Les polices web : un poids souvent invisible

On ne s’en rend pas toujours compte, mais les polices peuvent être énormes. Un fichier TTF ou OTF classique contient parfois :

• Toutes les graisses (thin, regular, bold, extra-bold, etc.)
• Toute la table Unicode du monde : alphabets arabes, chinois, symboles, accents, etc.

C’est un peu comme télécharger une encyclopédie alors que vous avez juste besoin de trois pages.

J’ai déjà vu un site qui utilisait une police de 400 Ko… pour afficher un seul mot dans une bannière. L’effet était joli, oui, mais le visiteur a dû attendre une seconde entière avant de voir le slogan. Imaginez cela sur une connexion mobile moyenne.

Ce genre de situation est très courant, surtout lorsque l’on utilise des polices provenant de banques de fonts sans réfléchir au format.

Les formats de polices : lesquels utiliser aujourd’hui

Pendant longtemps, on utilisait OTF ou TTF. Mais sur le web, ces formats ne sont pas optimisés. Ils consomment plus de bande passante, et prennent plus de temps à s’afficher.

Aujourd’hui, PageSpeed Insights recommande :

• Le WOFF
• Surtout le WOFF2, qui est le format le plus léger

Par exemple, une police 200 Ko en TTF peut descendre sous les 50 Ko en WOFF2. Et ce n’est pas un petit gain : sur un site web, 150 Ko de gagnés sur l’une des toutes premières ressources, c’est énorme.

Le rôle crucial de la stratégie d’affichage de la police

Même si votre police met du temps à charger, il y a une solution pour que le texte s’affiche immédiatement : la propriété CSS font-display.

Voici comment elle fonctionne simplement :

font-display: auto;

Le navigateur décide… souvent au détriment de votre score.

font-display: block;

Le texte attend la police → PageSpeed hurle.

• font-display: swap;

Le texte s’affiche immédiatement avec une police temporaire, puis se met à jour quand la vraie police arrive.

Pour PageSpeed Insights, la meilleure solution est donc :

@font-face {
  font-family: "MaPolice";
  src: url("mapolice.woff2") format("woff2");
  font-display: swap;
}

Résultat :

• Plus jamais de texte invisible pendant 2 secondes.
• Votre visiteur voit directement du contenu.
• Votre score PageSpeed remonte.

Quand faut-il précharger une police

PageSpeed Insights insiste aussi sur le préchargement des polices, avec ce message bien connu : Préchargez les polices pour améliorer le LCP.

Précharger signifie que vous demandez au navigateur de télécharger les polices en priorité. C’est utile pour les polices nécessaires au dessus de la ligne de flottaison, c’est-à-dire les zones que l’on voit dès l’arrivée sur la page.

Exemple à mettre dans le head de votre page :

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

Attention toutefois, on ne précharge pas toutes les polices. Seulement celles visibles immédiatement. Sinon, vous gaspillez de la ressource pour rien.

Le problème des multiples styles de polices

Prenons un exemple concret : Vous utilisez la police Open Sans en regular, bold et italic.

Votre site doit donc télécharger trois fichiers. Sur mobile, c’est un monde. Et parfois bien plus si la police contient d’autres variantes. C’est ici que les polices variables changent la vie.

Les polices variables : la révolution pour les performances

Une police variable, c’est une police qui contient plusieurs styles dans un seul fichier :

• Elle gère toutes les graisses (100 → 900)
• Elle peut inclure l’italique
• Elle permet de lisser les transitions

Vous remplacez plusieurs fichiers de polices par un unique fichier optimisé, souvent plus léger que la somme des fichiers séparés.

Résultat typique sur PageSpeed Insights :

Avant :

• 3 polices téléchargées = 300 Ko
• Texte invisible au début
• CLS élevé

Après :

• 1 seule police variable = 80 Ko
• Affichage immédiat
• CLS parfait
• Score dans le vert

Cela peut améliorer votre vitesse de manière spectaculaire, sans changer une seule lettre visible à l’écran.

Pourquoi Google adore les polices variables

D’abord parce qu’elles réduisent les requêtes, ce qui accélère le TTFB et le FCP. Ensuite parce qu’elles sont presque toujours en WOFF2. Enfin parce qu’elles permettent un chargement plus progressif, mieux géré par les navigateurs modernes.

Et qui dit navigateur heureux dit PageSpeed Insights heureux.

Exemple concret avec CSS

@font-face {
  font-family: "InterVariable";
  src: url("/fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

Vous avez maintenant toutes les graisses dans un seul fichier. Besoin d’un titre plus épais ? Pas de besoin d’une nouvelle police, juste un weight différent :

h1 {
  font-weight: 800;
}
p {
  font-weight: 400;
}

Simple, rapide, performant.

Optimiser les polices Google Fonts pour un meilleur score PageSpeed Insights

Beaucoup de sites utilisent Google Fonts, car c’est simple, gratuit, et la bibliothèque propose des milliers de polices. Mais PageSpeed Insights, qui est pour de chez Google, pointe souvent du doigt ce service car :

• Le chargement dépend d’un domaine externe
• Plusieurs requêtes CSS et font partent en cascade
• Les fichiers ne sont pas toujours adaptés à vos besoins

En clair, vous dépendez des serveurs de Google, et parfois, ils prennent du temps à répondre. La bonne approche consiste donc à reprendre la main.

La meilleure optimisation pour Google Fonts se fait en auto-hébergeant les polices, c’est-à-dire en les téléchargeant et en les stockant sur votre propre hébergement. Ainsi, elles se trouvent sur le même domaine que votre site, plus besoin d’attendre un serveur externe. PageSpeed Insights adore cela.

Comment auto-héberger les polices Google Fonts

Voici le scénario le plus courant, vous allez sur fonts.google.com et vous sélectionnez une police, par exemple Roboto.

Si vous la chargez de cette manière :

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

C’est rapide à installer, mais pas optimal. La démarche recommandée :

• Télécharger les fichiers WOFF2 depuis Google Fonts
• Les placer dans votre dossier /fonts
• Les déclarer dans votre propre CSS

Cela ressemble à ceci :

@font-face {
  font-family: "Roboto";
  src: url("/fonts/roboto-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("/fonts/roboto-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

Si vous avez choisi une police variable, une seule déclaration peut suffire. Vous gagnez du poids, du temps, et un score PageSpeed Insights nettement meilleur.

Le subsetting : réduire la police à l’essentiel

Et si l’on pouvait encore réduire la taille du fichier ? Souvent, une police contient tous les alphabets du monde. Une vraie tour de Babel qui ne vous sert à rien.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

La technique du subsetting consiste à conserver uniquement les caractères dont vous avez réellement besoin. Par exemple, pour un site français, vous n’avez pas besoin des caractères grecs ou russes.

Il existe des outils gratuits pour faire cela : FontTools, Glyphhanger, ou des services en ligne dédiés. Vous choisissez :

• Uniquement les lettres latines
• Les chiffres
• Les accents essentiels

Votre fichier de police se transforme d’un poids lourd en athlète olympique.

Par exemple :

• Avant subsetting : 160 Ko
• Après subsetting : 36 Ko

C’est un gain énorme sur la métrique LCP.

Choisir intelligemment la police de secours

Rappelez-vous : lorsque vous utilisez font-display: swap, le navigateur affiche une police temporaire. Si cette police n’a pas la même largeur que votre police finale, la mise en page saute au moment du remplacement.

C’est ce qu’on appelle le CLS, le décalage de mise en page, et cela peut massacrer votre score PageSpeed Insights.

La solution consiste à définir une police fallback proche visuellement de votre police principale. Par exemple :

• Roboto → Arial
• Inter → Helvetica
• Open Sans → Verdana

Ainsi, la transition se fera en douceur, presque imperceptible.

Dans votre CSS :

body {
  font-family: "InterVariable", Helvetica, Arial, sans-serif;
}

Votre texte reste lisible immédiatement, et le CLS ne bouge pas.

Le self-hosting : le choix du contrôle total

Comme vous l’avez vu, héberger vos polices directement sur votre site améliore :

• La rapidité de chargement
• La stabilité du CLS
• Le score PageSpeed Insights
• La confidentialité des visiteurs

C’est aussi une sécurité. Imaginez que les serveurs Google plantent, ou qu’un pare-feu bloque leurs requêtes. Votre site serait sans police. Alors que si tout est chez vous, rien ne peut vous arrêter.

Cette solution est donc idéale dès que l’on vise des performances optimales, à plus forte raison pour un site professionnel.

Le rôle du cache dans l’optimisation des polices

Même si vos fichiers de police sont optimisés, le navigateur doit les télécharger une première fois. Ensuite, il peut les conserver en cache pour ne plus jamais les recharger sur les pages suivantes.

Vous devez donc vous assurer que vos polices ont une durée de cache longue, par exemple :

Cache-Control: max-age=31536000

Expire dans un an

Cela permet à chaque visiteur de ne télécharger la police qu’une seule fois, ce qui améliore la navigation globale sur votre site.

La plupart des hébergeurs permettent de régler cela via le fichier .htaccess ou l’interface de configuration CDN si vous en utilisez un.

Le preload et son importance dans PageSpeed Insights

Nous avons déjà abordé le preload. Mais il faut comprendre que PageSpeed Insights surveille la façon dont vous priorisez les ressources critiques.

Une police utilisée dans un menu, un bouton, un titre de page doit être chargée en premier. Sinon, le navigateur doit attendre inutilement. Le preload indique clairement :

« Ceci est important, télécharge-le maintenant. »

Cela réduit le temps du Largest Contentful Paint, une métrique clé du rapport PageSpeed Insights. Mais attention à ne pas en abuser. On ne précharge que les polices visibles immédiatement. Le reste se chargera naturellement via CSS.

Techniques avancées : Font-Loading API

Si vous voulez aller encore plus loin, il existe la Font Loading API, une méthode JavaScript qui vous donne un contrôle complet sur le chargement des polices.

Elle permet de :

• Déclencher le chargement seulement après l’affichage du contenu essentiel
• Éviter les sauts visuels
• Afficher une barre de progression ou un style personnalisé

Exemple basique :

document.fonts.load("1em Roboto").then(function() {
  document.body.classList.add("police-chargee");
});

Tant que la police n’est pas prête, la classe police-chargee n’est pas appliquée, et le site peut utiliser la police de secours. C’est une méthode plus avancée, mais très puissante sur les pages complexes.

Ce qu’il faut éviter absolument

• Utiliser des fichiers OTF ou TTF sur le web
• Charger trop de graisses ou styles différents
• Importer des polices non utilisées dans votre design
• Laisser la police bloquer l’affichage du contenu
• Dépendre uniquement de Google Fonts en externe

Ce sont les erreurs les plus fréquentes, et elles peuvent ruiner votre score PageSpeed Insights même si tout le reste est parfaitement optimisé.

La checklist pour optimiser les polices selon PageSpeed Insights

Vous avez maintenant tous les éléments, mais récapitulons sous forme de démarche logique. Cela vous permettra de suivre une méthode simple à chaque nouveau projet web.

D’abord, choisissez vos polices avec modération. Une seule police principale et éventuellement une police décorative pour les titres. Définissez exactement les graisses dont vous avez besoin et rien d’autre. Ensuite, téléchargez la version optimisée de votre police, en WOFF2 si possible, et auto-hébergez-la directement sur votre serveur. Évitez les appels externes inutiles qui nuisent à votre score PageSpeed Insights.

Si votre police existe en version variable, privilégiez cette option. Remplacer six fichiers par un seul vous fera gagner un temps considérable. Puis, appliquez font-display: swap dans votre @font-face pour garantir un affichage immédiat du texte, même si la police n’est pas encore prête. Vous améliorez ainsi le ressenti de vitesse sans effort supplémentaire.

Pensez également à préciser des polices de secours proches visuellement de la police finale afin de limiter les décalages d’affichage. Et si vous avez besoin d’une optimisation maximale, effectuez un subsetting de la police pour supprimer tous les caractères inutiles. Vous pouvez aussi ajouter un preload ciblé pour les polices critiques situées dans la zone visible dès l’arrivée sur le site.

Enfin, configurez un cache longue durée afin que les visiteurs réguliers ou les personnes naviguant sur plusieurs pages n’aient pas à retélécharger les polices. Une fois tout cela en place, votre score PageSpeed Insights s’améliorera nettement. Vous pourrez même constater un avant-après spectaculaire en seulement quelques minutes.

Comment tester efficacement vos optimisations

Une erreur très fréquente consiste à tester vos changements uniquement sur ordinateur. Pourtant, PageSpeed Insights se concentre en priorité sur l’expérience mobile. C’est donc sur le mobile que vous devez observer l’efficacité de vos optimisations.

Après chaque modification, rechargez totalement votre page et purgez le cache. Puis, relancez une analyse PageSpeed Insights. Surveillez notamment les métriques LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) et FID/INP (réactivité). Une amélioration de ces trois scores indique que vos polices sont désormais parfaitement gérées.

Il peut aussi être intéressant de naviguer sur votre site avec une connexion lente simulée. Vous comprendrez immédiatement la différence entre une police mal optimisée et une police maîtrisée. Le but n’est pas seulement d’obtenir un bon score, mais aussi d’offrir une expérience fluide à tous vos visiteurs, peu importe leur appareil ou leur réseau.

Le lien entre police, UX et référencement

On a parfois tendance à voir PageSpeed Insights comme une sorte d’examinateur pointilleux. On veut obtenir 90 ou plus, juste pour la satisfaction personnelle. Mais l’enjeu est bien plus profond. Un chargement rapide améliore l’UX, c’est-à-dire l’expérience utilisateur.

Un internaute qui lit votre contenu sans attendre, qui voit immédiatement le texte, même avant les images, se sent rassuré. Le site paraît sérieux, professionnel, agréable. À l’inverse, un écran blanc pendant deux secondes peut suffire à pousser quelqu’un à repartir.

Ce ressenti positif influe sur votre référencement. Google privilégie les sites qui affichent rapidement du contenu visible. Le moteur de recherche sait que si les visiteurs restent, c’est que la page est utile et que l’expérience est plaisante.

Optimiser une police n’est donc pas une simple prouesse technique. C’est un geste pour votre audience et pour l’essor de votre site.

Un peu d’émotion : la beauté sans la lenteur

On entend parfois que pour qu’un site soit rapide, il doit être triste graphiquement. Qu’il faut sacrifier les belles polices pour garder les basiques. C’est totalement faux. Les polices variables sont là pour nous le prouver. Elles permettent de garder une identité visuelle forte tout en restant dans les clous des exigences de PageSpeed Insights.

Imaginez un titre bien mis en scène, une typographie élégante et travaillée, qui se charge aussi vite qu’une simple police système. C’est possible. La performance n’est pas l’ennemie du design, elle en est l’alliée. Lorsque technique et esthétique se complètent, vous obtenez un site qui plait, qui vit, et surtout qui convertit.

Maîtriser vos polices, c’est maîtriser votre vitesse

Vous venez de découvrir que l’optimisation des polices ne se limite pas à choisir un joli style sur une bibliothèque en ligne. Une police de caractères peut ralentir un site, bloquer l’affichage du contenu, augmenter les décalages visuels et faire chuter votre score PageSpeed Insights. La bonne nouvelle, c’est que quelques bonnes pratiques suffisent pour renverser la situation.

Vous savez désormais comment sélectionner le bon format, pourquoi auto-héberger vos polices est préférable, comment alléger encore leurs ressources avec le subsetting, et surtout comment tirer pleinement parti des polices variables pour allier performance et créativité. Vous avez aussi compris que les métriques de PageSpeed Insights ne sont pas de simples chiffres, mais une mesure réelle de la fluidité offerte à votre audience.

Au final, optimiser vos polices, c’est faire gagner du temps à vos visiteurs, améliorer votre visibilité dans les moteurs de recherche et valoriser la qualité de votre site. L’étape suivante est simple : mettez en pratique ces conseils et observez l’impact direct sur la perception de vos utilisateurs. Votre site n’en sera que plus rapide, plus agréable et plus vivant. Et qui sait, peut-être qu’un jour, vous aussi, on vous offrira un café pour avoir rendu un site web nettement meilleur.

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr