Le CLS causé par les polices : métriques de repli et font-display

Parmi les causes de décalage visuel pendant le chargement d'une page, les polices arrivent juste derrière les images sans dimensions déclarées et devant les bandeaux insérés par script. Le phénomène est facile à observer : le texte s'affiche d'abord dans une police système, puis la police du site prend le relais, et la mise en page bouge d'un cran parce que les deux ne s'écrivent pas avec les mêmes proportions. Ce mouvement dure quelques dixièmes de seconde et il suffit à dégrader l'indicateur de stabilité visuelle, tout en donnant une impression de site mal fini. Nous détaillons ici le mécanisme précis, les réglages qui le suppriment et la façon de vérifier le résultat sans se fier à une impression.

Comprendre le mécanisme du décalage

La stabilité visuelle est mesurée par un indicateur qui additionne les mouvements d'éléments déjà affichés, pondérés par leur surface. Sa définition et ses seuils sont détaillés dans notre article sur le CLS et sa définition. Ce qui compte ici est que tout mouvement de texte déjà visible entre dans ce calcul, même s'il ne dure qu'un instant.

Deux polices, deux gabarits

Chaque police définit la largeur de chaque caractère, la hauteur des minuscules, celle des majuscules et l'espacement entre les lignes. Ces valeurs varient beaucoup d'une famille à l'autre, y compris entre deux polices d'apparence proche. Un paragraphe écrit dans une police de repli peut occuper cinq lignes alors qu'il en occupera six dans la police finale, ou l'inverse. Au moment du remplacement, tout ce qui se trouve en dessous se déplace de la hauteur d'une ligne. Sur une page contenant plusieurs blocs de texte, ces mouvements s'additionnent. C'est la mécanique complète du problème, et elle est purement géométrique.

Le moment du remplacement

Le navigateur découvre la déclaration de police en lisant la feuille de style, puis il télécharge le fichier correspondant. Pendant ce téléchargement, il doit décider quoi afficher, et son choix dépend d'une instruction que le site peut lui donner. Sans instruction, le comportement par défaut consiste à masquer le texte pendant environ trois secondes, puis à afficher la police de repli si le fichier n'est pas arrivé. Ce comportement supprime le décalage dans les cas rapides et produit une page vide de texte pendant l'attente. Le compromis entre texte invisible et texte qui bouge constitue le cœur du sujet. Il n'existe pas de réponse unique, seulement des arbitrages selon le contexte.

La différence entre invisible et décalé

Un texte invisible pendant une seconde dégrade la mesure du premier affichage de contenu, sans affecter la stabilité visuelle. Un texte affiché puis remplacé dégrade la stabilité visuelle sans affecter le premier affichage. Les deux indicateurs entrent dans les signaux d'expérience, ce qui interdit de simplement déplacer le problème de l'un vers l'autre. La bonne approche consiste à réduire les deux simultanément, en agissant sur le poids du fichier et sur les proportions de la police de repli. Comprendre cette double contrainte évite les optimisations qui améliorent une mesure en dégradant l'autre. C'est l'erreur la plus fréquente sur ce sujet.

Le poids réel des fichiers de police

Une famille complète, avec plusieurs graisses et leurs versions italiques, représente facilement plusieurs centaines de kilooctets. Chaque variante est un fichier distinct, et le navigateur les télécharge selon ce que la page utilise réellement. Réduire ce nombre constitue le levier le plus direct sur la durée du problème. Les techniques de réduction, notamment la limitation aux caractères réellement employés, sont exposées dans notre article sur les polices auto-hébergées, leurs formats et leur préchargement. Une police correctement préparée descend souvent sous les vingt kilooctets par variante. À ce poids, la fenêtre de décalage devient négligeable sur la plupart des connexions.

Le cas des polices distantes

Charger une police depuis un service externe ajoute une résolution de nom, une connexion et une négociation de sécurité avant le moindre octet utile. Ce coût représente souvent plus de temps que le téléchargement lui même sur une connexion mobile. Il allonge donc mécaniquement la fenêtre pendant laquelle le texte s'affiche dans la police de repli. Héberger les fichiers sur le domaine du site supprime ce coût et permet le préchargement. Cette migration est simple et elle constitue presque toujours un gain net. Elle règle également la question du consentement, le service externe recevant l'adresse de chaque visiteur.

Les polices variables

Un fichier de police variable contient toutes les graisses d'une famille dans un seul fichier, ce qui réduit le nombre de requêtes. Son poids dépasse celui d'une variante isolée et il reste inférieur au total des variantes qu'il remplace. L'intérêt devient net dès que le site utilise trois graisses ou plus. Sur un site n'employant qu'une graisse régulière et une graisse grasse, le calcul penche souvent en faveur des fichiers séparés. La décision se prend en comparant les poids réels plutôt que sur un principe. Les deux approches sont parfaitement compatibles avec les techniques présentées ici.

Ajuster les métriques de la police de repli

La technique la plus efficace consiste à rendre la police de repli géométriquement équivalente à la police finale, de sorte que le remplacement ne déplace rien.

Le principe de la substitution ajustée

Les feuilles de style permettent depuis quelques années de déclarer une police locale en modifiant ses proportions. On déclare une famille artificielle, basée sur une police système présente partout, à laquelle on applique un facteur d'échelle et des ajustements de hauteur. Correctement réglée, cette famille occupe exactement la même place que la police finale. Le remplacement devient alors invisible, le texte ne bougeant d'aucun pixel. Cette technique supprime le décalage sans rien changer au chargement lui même. Elle constitue la réponse de référence au problème traité ici.

Les quatre paramètres disponibles

Le premier ajuste la largeur des caractères, ce qui détermine le nombre de mots par ligne et donc le nombre de lignes du paragraphe. Le deuxième ajuste la hauteur au dessus de la ligne de base, le troisième la profondeur en dessous, et le quatrième l'espace additionnel entre les lignes. Ces trois derniers déterminent la hauteur totale occupée par chaque ligne. Régler correctement le premier suffit souvent à supprimer l'essentiel du décalage. Les trois autres affinent le résultat et deviennent utiles sur les titres de grande taille. L'ensemble se déclare en quelques lignes de style.

Comment obtenir les bonnes valeurs

Les valeurs se calculent à partir des métriques internes des deux fichiers de police, informations accessibles avec des outils dédiés. Des générateurs en ligne produisent directement la déclaration à partir du nom de la police finale et de la police système choisie. Cette automatisation évite un travail fastidieux et sujet aux erreurs de calcul. Il reste indispensable de vérifier visuellement le résultat, les générateurs se fondant sur des moyennes. Un texte de test contenant des paragraphes longs et des titres permet ce contrôle. Quelques allers-retours suffisent généralement à converger.

Le choix de la police système

La police de repli doit exister sur tous les systèmes, ce qui limite le choix à quelques familles universellement présentes. Choisir celle dont les proportions se rapprochent le plus de la police finale réduit l'ampleur des ajustements nécessaires. Une police avec empattements se remplace mal par une police sans empattements, même avec des métriques identiques, car la densité visuelle diffère. Les systèmes proposent des familles différentes, ce qui impose de déclarer plusieurs polices de repli avec leurs ajustements respectifs. Cette déclaration multiple alourdit un peu la feuille de style et elle donne un résultat nettement plus régulier. Elle mérite d'être faite au moins pour les deux systèmes majoritaires.

La vérification du résultat

Le contrôle se fait en simulant une connexion lente dans les outils du navigateur et en observant le passage d'une police à l'autre. Un enregistrement image par image révèle le moindre mouvement résiduel. Il faut penser à tester les pages contenant de longs paragraphes, où l'écart de largeur des caractères produit le plus d'effet. Les pages de liste, avec de nombreux titres courts, sont moins révélatrices. Un écart d'une seule ligne sur un article long suffit à dégrader la mesure. Ce test doit être refait après toute modification de la typographie.

Les limites de la technique

L'ajustement fonctionne très bien sur les blocs de texte courant et moins bien sur les mises en page où le texte détermine la largeur d'un conteneur. Un bouton dimensionné par son libellé changera de largeur au remplacement, quelle que soit la finesse du réglage. Les titres composés dans une graisse très large présentent également des écarts résiduels. Ces cas se traitent en réservant l'espace par une largeur minimale déclarée. Ils restent minoritaires et ils méritent d'être identifiés lors de la vérification. Aucune technique ne supprime la totalité du phénomène sur toutes les mises en page.

Choisir le bon comportement de chargement

L'instruction de comportement complète l'ajustement des métriques et son choix dépend du rôle de la police dans la page.

Le comportement par défaut et ses effets

En l'absence d'instruction, le navigateur applique une période de masquage relativement longue, ce qui produit un texte invisible sur les connexions lentes. Ce comportement a été conçu à une époque où le décalage préoccupait davantage que le délai d'affichage. Il ne correspond plus aux priorités actuelles, où le premier affichage de contenu constitue un signal important. Déclarer explicitement une valeur, quelle qu'elle soit, vaut mieux que de laisser le défaut s'appliquer. Les différentes valeurs disponibles et leurs conséquences sont détaillées dans notre article sur font-display et la maîtrise de l'affichage des polices web. Le choix se raisonne famille par famille plutôt que globalement.

La valeur qui affiche immédiatement

Demander l'affichage immédiat dans la police de repli garantit que le texte est lisible dès la première image. C'est le meilleur choix pour le texte courant, à condition que les métriques de repli soient ajustées. Sans cet ajustement, elle produit le décalage maximal et dégrade fortement la stabilité visuelle. La combinaison des deux constitue la configuration de référence pour un site de contenu. Elle donne un premier affichage rapide et une stabilité intacte. C'est vers elle qu'il faut tendre par défaut.

La valeur qui renonce à la police

Une valeur particulière laisse au navigateur une centaine de millisecondes pour charger la police, puis conserve définitivement le repli si le délai est dépassé. La police finale sera utilisée lors des visites suivantes, une fois le fichier en cache. Cette option supprime totalement le décalage et elle accepte que certains visiteurs ne voient jamais la typographie du site. Elle convient aux sites dont le public se connecte majoritairement en mobilité, où la lisibilité prime sur l'identité visuelle. Elle heurte souvent les préférences des équipes créatives. Présenter les mesures avant et après aide à trancher cette discussion.

Les polices d'icônes

Une police contenant des symboles ne peut pas être remplacée par une police système, faute d'équivalence entre les caractères. Afficher le repli produirait des caractères aléatoires à la place des icônes, ce qui est pire qu'un espace vide. Ces polices justifient donc un comportement de masquage pendant l'attente. La meilleure solution reste de remplacer la police d'icônes par des symboles vectoriels intégrés directement dans la page. Cette migration supprime un fichier, un risque d'affichage parasite et un problème d'accessibilité. Elle demande un travail ponctuel dont le bénéfice est durable.

Le préchargement des fichiers

Déclarer explicitement le chargement prioritaire des fichiers de police les fait démarrer avant la lecture complète de la feuille de style. Ce gain se chiffre en centaines de millisecondes sur une page complexe. Il ne doit concerner que les variantes réellement utilisées dans la partie haute de la page, sous peine de retarder d'autres ressources. Précharger cinq fichiers de police est un contresens qui dégrade tout le reste. Une ou deux déclarations bien choisies suffisent. Vérifier dans l'onglet réseau que les fichiers préchargés sont effectivement employés évite les avertissements et le gaspillage.

Le cache et les visites suivantes

Une fois le fichier en cache, le problème disparaît pour ce visiteur pendant toute la durée de conservation. Configurer une durée longue, d'une année par exemple, est possible sans risque puisque le nom du fichier change en cas de modification. Cette configuration ne change rien pour les nouveaux visiteurs, qui restent la cible de tout ce travail. Les mesures de terrain agrègent les deux populations, ce qui explique parfois des valeurs meilleures que celles observées en test. Raisonner sur la première visite reste la bonne discipline. C'est elle qui détermine la première impression.

Mettre en place et mesurer

La démarche complète tient en quelques étapes ordonnées, et elle se mène en une demi journée sur un site de taille moyenne.

Inventorier les polices réellement chargées

L'onglet réseau du navigateur, filtré sur les fichiers de police, révèle presque toujours des variantes inutilisées. Un thème installé charge fréquemment six ou huit fichiers dont deux servent. Supprimer les déclarations inutiles constitue le gain le plus immédiat et le moins risqué. Cet inventaire doit être mené sur plusieurs types de pages, les gabarits n'employant pas les mêmes styles. Il faut également vérifier les extensions, qui ajoutent parfois leur propre typographie. Un site nettoyé passe couramment de huit fichiers à deux.

Rapatrier et alléger les fichiers

Télécharger les fichiers, les limiter aux caractères utiles et les servir depuis le domaine du site divise généralement le poids par trois. Le format compressé moderne doit être privilégié, la prise en charge étant désormais universelle. Cette opération se fait une fois et elle profite à toutes les pages. Elle supprime aussi la dépendance à un service externe, avec les conséquences réglementaires que cela implique. Conserver les fichiers d'origine permet de refaire l'opération si la typographie évolue. Documenter la procédure évite de la réinventer dans deux ans.

Générer et déclarer les métriques de repli

Une fois les fichiers en place, la déclaration de la famille ajustée se génère et se place en tête de la feuille de style. Elle doit être référencée dans la liste des polices de secours, avant les polices génériques. L'ordre de cette liste détermine ce que le navigateur emploiera, et une erreur d'ordre annule tout le bénéfice. Un contrôle visuel avec le fichier de police volontairement bloqué valide la déclaration. Ce test simple mérite d'être conservé comme procédure. Il se refait en trente secondes après chaque évolution.

Mesurer avant et après

La comparaison doit porter sur la même page, avec la même simulation de connexion, avant et après modification. Les outils de laboratoire donnent une valeur immédiate qui suffit à valider la démarche. Les données de terrain confirmeront quelques semaines plus tard, avec le décalage habituel de la fenêtre d'observation. Noter les deux valeurs de laboratoire dans un tableau permet de démontrer le gain sans attendre. Cette trace sert également si une régression apparaît après une mise à jour du thème. La discipline de mesure vaut ici autant que la technique employée.

Vérifier sur les gabarits sensibles

Les pages d'article, avec de longs paragraphes, et les pages de liste, avec de nombreux titres, réagissent différemment. Contrôler au minimum ces deux gabarits, plus la page d'accueil, couvre l'essentiel des cas. Sur un site marchand, la fiche produit mérite une attention particulière en raison des blocs de prix et des boutons. Un tableau de contrôle listant les gabarits vérifiés évite les oublis. Cette liste sert ensuite pour toutes les vérifications de performance. Elle constitue un actif durable pour l'équipe.

Inscrire le contrôle dans la routine

Une mise à jour de thème, l'ajout d'une extension ou un changement de charte peuvent réintroduire une police externe et annuler le travail. Ajouter la vérification des fichiers de police à la liste des contrôles effectués après chaque mise à jour importante évite la régression silencieuse. Un contrôle automatisé, détectant l'apparition d'un domaine externe dans les requêtes, remplit ce rôle sans effort humain. Cette surveillance vaut pour l'ensemble des ressources, pas seulement les polices. Elle se met en place une fois et elle protège durablement. C'est le complément naturel de tout chantier de performance.