Bonnes pratiques concernant les polices

Optimisez les polices Web pour les métriques Core Web Vitals.

Katie Hempenius
Katie Hempenius
X
Barry Pollard

Ce document traite des bonnes pratiques en matière de performances pour les polices. Les polices Web ont un impact sur les performances de différentes manières:

Ce document comporte trois sections: Chargement des polices, Livraison des polices et Affichage des polices. Chaque section explique le fonctionnement de cet aspect particulier du cycle de vie des polices et fournit les bonnes pratiques correspondantes.

Chargement des polices

Les polices sont des ressources importantes. Sans elles, l'utilisateur risque de ne pas pouvoir afficher le contenu de la page. Par conséquent, les bonnes pratiques de chargement des polices consistent généralement à s'assurer qu'elles sont chargées le plus tôt possible. Les polices chargées à partir de sites tiers doivent faire l'objet d'une attention particulière, car le téléchargement de ces fichiers de polices nécessite des configurations de connexion distinctes.

Si vous ne savez pas si les polices de votre page sont demandées à temps, consultez l'onglet Timing (Temps) du panneau Network (Réseau) dans les outils pour les développeurs Chrome pour en savoir plus.

Onglet "Timing" (Temps) dans DevTools.

Comprendre @font-face

Avant de découvrir les bonnes pratiques de chargement des polices, il est important de comprendre le fonctionnement de @font-face et son impact sur le chargement des polices.

La déclaration @font-face est essentielle pour travailler avec n'importe quelle police Web. Au minimum, il déclare le nom utilisé pour faire référence à la police et indique l'emplacement du fichier de police correspondant.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

Une idée fausse courante est qu'une police est demandée en cas de déclaration @font-face. C'est faux. À elle seule, la déclaration @font-face ne déclenche pas le téléchargement de polices. À la place, une police n'est téléchargée que si elle est référencée par le style utilisé sur la page. Exemple :

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
  font-family: "Open Sans"
}

Dans cet exemple, Open Sans ne serait téléchargé que si la page contenait un élément <h1>.

Ainsi, lorsque vous envisagez d'optimiser les polices, il est important de tenir compte des feuilles de style tout autant que les fichiers de polices eux-mêmes. La modification du contenu ou de l'affichage des feuilles de style peut avoir un impact significatif sur le moment où les polices arrivent. De même, supprimer les CSS inutilisés et diviser les feuilles de style peut réduire le nombre de polices chargées par une page.

Déclarations de polices intégrées

Pour la plupart des sites, il est fortement utile d'intégrer des déclarations de police et d'autres styles essentiels dans la propriété <head> du document principal plutôt que de les inclure dans une feuille de style externe. Cela permet au navigateur de découvrir les déclarations de police plus tôt, car il n'a pas besoin d'attendre le téléchargement de la feuille de style externe.

<head>
  <style>
    @font-face {
        font-family: "Open Sans";
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    }

    body {
        font-family: "Open Sans";
    }

    ...etc.

  </style>
</head>

L'intégration des ressources CSS essentielles peut constituer une technique plus avancée que tous les sites. Les avantages en termes de performances sont clairs, mais cela nécessite des processus et des outils de compilation supplémentaires pour s'assurer que le CSS nécessaire, et idéalement uniquement le CSS critique, est correctement intégré et que tout CSS supplémentaire est fourni de manière non bloquante pour le rendu.

Préconnectez-vous aux origines tierces critiques.

Si votre site charge des polices d'un site tiers, nous vous recommandons vivement d'utiliser l'indice de ressource preconnect pour établir une ou plusieurs premières connexions avec l'origine tierce. Les optimisations de ressource doivent être placées dans la section <head> du document. L'indice de ressource suivant configure une connexion pour charger la feuille de style de police.

<head>
  <link rel="preconnect" href="https://fonts.com">
</head>

Pour préconnecter la connexion utilisée pour télécharger le fichier de police, ajoutez un indice de ressource preconnect distinct qui utilise l'attribut crossorigin. Contrairement aux feuilles de style, les fichiers de police doivent être envoyés via une connexion CORS.

<head>
  <link rel="preconnect" href="https://fonts.com">
  <link rel="preconnect" href="https://fonts.com" crossorigin>
</head>

Lorsque vous utilisez l'indice de ressource preconnect, gardez à l'esprit qu'un fournisseur de polices peut diffuser des feuilles de style et des polices à partir d'origines distinctes. Par exemple, voici comment l'indice de ressource preconnect est utilisé pour Google Fonts.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

Soyez prudent lorsque vous utilisez preload pour charger des polices

Bien que preload soit très efficace pour rendre les polices détectables au début du processus de chargement de la page, cela se fait au détriment des ressources du navigateur pour le chargement d'autres ressources.

L'intégration des déclarations de police et l'ajustement des feuilles de style peuvent être une approche plus efficace. Ces ajustements permettent de s'attaquer à la cause première des polices découvertes tardivement, plutôt que de simplement proposer un correctif.

En outre, l'utilisation de preload comme stratégie de chargement de police doit également être utilisée avec précaution, car elle contourne certaines stratégies de négociation de contenu intégrées au navigateur. Par exemple, preload ignore les déclarations unicode-range et, si elle est utilisée avec prudence, ne doit être utilisée que pour charger un seul format de police.

Toutefois, lorsque vous utilisez des feuilles de style externes, le préchargement des polices les plus importantes peut être très efficace, car le navigateur ne découvrira pas si la police est nécessaire avant bien plus tard.

Distribution des polices

Une diffusion des polices plus rapide accélère l'affichage du texte. De plus, si une police est publiée suffisamment tôt, cela peut aider à éliminer les décalages de mise en page résultant du changement de police.

Utiliser des polices auto-hébergées

Sur le papier, l'utilisation d'une police auto-hébergée devrait offrir de meilleures performances, car elle élimine la configuration des connexions tierces. En pratique, les différences de performances entre ces deux options sont moins nettes. Par exemple, l'almanach Web a révélé que les sites utilisant des polices tierces affichaient un rendu plus rapide que les polices utilisant des polices propriétaires.

Si vous envisagez d'utiliser des polices auto-hébergées, vérifiez que votre site utilise un réseau de diffusion de contenu (CDN) et HTTP/2. Sans l'utilisation de ces technologies, il est beaucoup moins probable que les polices auto-hébergées offrent de meilleures performances.

Si vous utilisez une police auto-hébergée, nous vous recommandons également d'appliquer certaines des optimisations de fichiers de polices que les fournisseurs de polices tiers fournissent généralement automatiquement. Par exemple, le sous-ensemble de polices et la compression WOFF2. L'effort requis pour appliquer ces optimisations dépend dans une certaine mesure des langues prises en charge par votre site. En particulier, sachez qu'il peut être particulièrement difficile d'optimiser les polices pour les langues CJK.

Utiliser WOFF2

Parmi les polices modernes, WOFF2 est la plus récente, la plus compatible avec les navigateurs et la plus compressée. Comme il utilise Brotli, WOFF2 compresse 30% mieux que WOFF, ce qui réduit le nombre de données à télécharger et améliore donc les performances.

Compte tenu de la compatibilité du navigateur, les experts recommandent désormais d'utiliser uniquement WOFF2:

Nous pensons qu'il est également temps de proclamer : "N'utilisez que WOFF2 et oubliez tout le reste".

Cela simplifiera considérablement votre CSS et votre workflow, et évitera tout téléchargement accidentel de polices en double ou incorrect. WOFF2 est désormais pris en charge partout. Par conséquent, sauf si vous devez prendre en charge des navigateurs très anciens, utilisez simplement WOFF2. Si vous ne pouvez pas, envisagez de ne pas diffuser de polices Web sur ces anciens navigateurs. Ce ne sera pas un problème si vous avez mis en place une stratégie de remplacement robuste. Les visiteurs qui utilisent d'anciens navigateurs verront vos polices de remplacement.

Bram Stein, dans l'Almanach Web 2022

Polices de sous-ensembles

Les fichiers de polices incluent généralement un grand nombre de glyphes pour tous les différents caractères qu'ils prennent en charge. Toutefois, vous n'avez peut-être pas besoin de tous les caractères sur votre page et vous pouvez réduire la taille des fichiers de polices en sous-ensembles.

Le descripteur unicode-range dans la déclaration @font-face informe le navigateur des caractères pour lesquels une police peut être utilisée.

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    unicode-range: U+0025-00FF;
}

Un fichier de police est téléchargé si la page contient un ou plusieurs caractères correspondant à la plage Unicode. unicode-range est couramment utilisé pour diffuser différents fichiers de polices en fonction de la langue utilisée dans le contenu de la page.

unicode-range est souvent utilisé conjointement avec la technique de sous-ensemble. Un sous-ensemble de police inclut une plus petite partie des glyphes contenus dans le fichier de police d'origine. Par exemple, au lieu de diffuser tous les caractères auprès de tous les utilisateurs, un site peut générer des polices de sous-ensembles distinctes pour les caractères latins et cyrilliques.

Le nombre de glyphes par police varie considérablement:

  • Les polices latines comptent généralement entre 100 et 1 000 glyphes par police.
  • Les polices CJK peuvent comporter plus de 10 000 caractères.

La suppression des glyphes inutilisés peut réduire considérablement la taille d'une police.

Certains fournisseurs de polices peuvent fournir automatiquement différentes versions de fichiers de polices avec différents sous-ensembles. Par exemple, Google Fonts effectue cette opération par défaut:

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Lorsque vous passez à l'auto-hébergement, cette optimisation peut être manquée et entraîner des fichiers de polices plus volumineux en local.

Vous pouvez créer manuellement un sous-ensemble de polices si votre fournisseur de polices le permet, soit à l'aide d'une API (Google Fonts le permet en fournissant un paramètre text), soit en modifiant manuellement les fichiers de polices, puis en les hébergeant vous-même. Les outils permettant de générer des sous-ensembles de polices incluent subfont et glyphanger.

Vérifiez toujours les licences de polices pour vous assurer qu'elles autorisent le sous-ensemble et l'auto-hébergement.

Utiliser moins de polices Web

La police la plus rapide à diffuser est celle qui n'est pas demandée au départ. Les polices système et les polices variables sont deux façons de réduire potentiellement le nombre de polices Web utilisées sur votre site.

Une police système est la police par défaut utilisée par l'interface utilisateur de l'appareil d'un utilisateur. Les polices système varient généralement en fonction du système d'exploitation et de la version. Étant donné que la police est déjà installée, il n'est pas nécessaire de la télécharger. Les polices système peuvent particulièrement bien fonctionner pour le corps du texte.

Pour utiliser la police du système dans votre CSS, indiquez system-ui comme famille de polices :

font-family: system-ui

L'idée derrière les polices variables est qu'une seule police variable peut remplacer plusieurs fichiers de polices. Les polices variables fonctionnent en définissant un style de police "par défaut" et en fournissant des "axes" pour manipuler la police. Par exemple, une police variable avec un axe Weight peut être utilisée pour implémenter des caractères qui nécessitaient auparavant des polices distinctes pour les styles léger, normal, gras et extra-gras.

Tout le monde ne profite pas à passer aux polices variables. Les polices variables contiennent de nombreux styles. Elles ont donc généralement des tailles de fichier plus importantes que les polices individuelles non variables, qui ne contiennent qu'un seul style. Les sites qui bénéficieront le plus de l'utilisation de polices variables sont ceux qui utilisent (et doivent utiliser) différents styles et épaisseurs de police.

Rendu des polices

Lorsqu'il est confronté à une police Web qui n'a pas encore été chargée, le navigateur se trouve face à un dilemme: doit-il attendre que la police Web soit arrivée avant d'afficher le texte ? Ou doit-il afficher le texte dans une police de remplacement jusqu'à ce que la police Web arrive ?

Les différents navigateurs gèrent ce scénario différemment. Par défaut, les navigateurs Firefox et Chromium bloquent l'affichage du texte pendant trois secondes maximum si la police Web associée n'a pas été chargée. Safari bloque l'affichage du texte indéfiniment.

Ce comportement peut être configuré à l'aide de l'attribut font-display. Ce choix peut avoir des conséquences importantes: font-display peut avoir un impact sur la LCP, la FCP et la stabilité de la mise en page.

Choisir une stratégie font-display appropriée

font-display indique au navigateur comment procéder au rendu du texte lorsque la police Web associée n'a pas été chargée. Il est défini par font-face.

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}

font-display peut prendre cinq valeurs :

Valeur Période de blocage Période de swap
Auto Varie selon le navigateur Varie selon le navigateur
Bloquer 2 à 3 secondes Infini
Intervertir 0ms Infini
Action de remplacement 100ms 3 secondes
Facultatif 100ms Aucun
  • Période de blocage: la période de blocage commence lorsque le navigateur demande une police Web. Pendant la période de blocage, si la police Web n'est pas disponible, la police est affichée dans une police de remplacement invisible, et le texte est donc invisible pour l'utilisateur. Si la police n'est pas disponible à la fin de la période de blocage, elle est affichée dans la police de remplacement.
  • Période de swap : la période de swap suit la période de blocage. Si la police Web devient disponible pendant la période de remplacement, elle est "remplacée".

Les stratégies font-display reflètent différents points de vue sur le compromis entre performances et esthétique. Il est donc difficile de recommander une approche, car elle dépend des préférences individuelles, de l'importance de la police Web pour la page et la marque, et de l'impact d'une police tardive lorsqu'elle est remplacée.

Pour la plupart des sites, voici les trois stratégies les plus applicables, en fonction de votre priorité absolue:

  • Performances: utilisez font-display: optional. Il s'agit de l'approche la plus "performante" : l'affichage du texte n'est pas retardé plus de 100 ms et il est garanti qu'il n'y a pas de décalage de mise en page lié au changement de police. L'inconvénient est que la police Web ne sera pas utilisée si elle arrive en retard.

  • Afficher rapidement le texte tout en utilisant une police Web: utilisez font-display: swap, mais assurez-vous de diffuser la police suffisamment tôt pour ne pas provoquer de décalage de mise en page. L'inconvénient de cette option est le changement brusque lorsque la police arrive en retard.

  • Le texte est affiché dans une police Web: utilisez font-display: block, mais veillez à envoyer la police suffisamment tôt pour réduire le délai du texte. L'affichage du texte initial est retardé. Malgré ce délai, cela peut toujours entraîner un décalage de mise en page, car le texte est en fait dessiné de manière invisible, et l'espace de police de remplacement est donc utilisé pour réserver l'espace. Une fois la police Web chargée, cela peut nécessiter un espace différent, ce qui entraîne un décalage. Il peut s'agir d'un décalage moins gênant que font-display: swap, car le texte lui-même ne sera pas vu se décaler.

N'oubliez pas que ces deux approches peuvent être combinées: par exemple, utilisez font-display: swap pour le branding et d'autres éléments de page visuellement distinctifs. Utilisez font-display: optional pour les polices utilisées dans le corps du texte.

Polices d'icônes

Les stratégies font-display qui fonctionnent bien pour les polices Web classiques ne fonctionnent pas aussi bien pour les polices d'icônes. La police de remplacement d'une police d'icônes est généralement très différente de la police d'icônes, et ses caractères peuvent avoir une signification complètement différente. Par conséquent, les polices des icônes sont plus susceptibles de provoquer des décalages de mise en page importants.

De plus, l'utilisation d'une police de secours peut s'avérer peu pratique. Si possible, remplacez les polices d'icônes par des SVG, ce qui est également plus adapté à l'accessibilité. Les versions plus récentes des polices d'icônes populaires sont généralement compatibles avec le format SVG. Pour en savoir plus sur la transition vers les SVG, consultez Font Awesome et Icônes Material.

Réduire le décalage entre votre police de remplacement et votre police Web

Pour réduire l'impact du CLS, vous pouvez utiliser les attributs size-adjust.

Conclusion

Les polices Web restent un goulot d'étranglement des performances, mais nous disposons d'un éventail d'options de plus en plus vaste pour les optimiser et réduire ce goulot d'étranglement autant que possible.