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 aborde les 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, Diffusion des polices et Rendu 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 peut ne pas être en mesure d'afficher le contenu de la page. Par conséquent, les bonnes pratiques pour le chargement des polices visent généralement à s'assurer que les polices sont chargées le plus tôt possible. Il convient d'accorder une attention particulière aux polices chargées à partir de sites tiers, car le téléchargement de ces fichiers de police 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 (Timing) du panneau Network (Réseau) des Outils pour les développeurs Chrome pour en savoir plus.

Onglet "Timing" dans les outils de développement.

Comprendre @font-face

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

La @font-face déclaration est essentielle pour utiliser n'importe quelle police Web. Au minimum, elle 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 lorsqu'une déclaration @font-face est rencontrée. C'est faux. En soi, la déclaration @font-face ne déclenche pas le téléchargement de la police. Une police n'est téléchargée que si elle est référencée par un 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 <h1> élément.

Ainsi, lorsque vous pensez à l'optimisation des polices, il est important d'accorder autant d'attention aux feuilles de style qu'aux fichiers de police eux-mêmes. La modification du contenu ou de la diffusion des feuilles de style peut avoir un impact significatif sur le moment où les polices arrivent. De même, la suppression des CSS inutilisés et la division des feuilles de style peuvent réduire le nombre de polices chargées par une page.

Déclarations de police intégrées

La plupart des sites bénéficieraient grandement de l'intégration des déclarations de police et d'autres styles essentiels dans le <head> du document principal, plutôt que de les inclure dans une feuille de style externe. Cela permet au navigateur de découvrir plus tôt les déclarations de police, 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 CSS essentiels peut être une technique plus avancée que tous les sites ne peuvent pas mettre en œuvre. 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 les CSS nécessaires, et idéalement uniquement les CSS essentiels, sont correctement intégrés et que tous les CSS supplémentaires sont diffusés de manière à ne pas bloquer le rendu.

Préconnectez-vous aux origines tierces essentielles

Si votre site charge des polices à partir d'un site tiers, il est fortement recommandé d'utiliser l'indication de ressource preconnect pour établir des connexions anticipées avec l'origine tierce. Les indications de ressource doivent être placées dans le <head> du document. L'indication de ressource suivante configure une connexion pour charger la feuille de style de la 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 une indication de ressource preconnect distincte 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'indication de ressource preconnect, n'oubliez pas qu'un fournisseur de polices peut diffuser des feuilles de style et des polices à partir d'origines distinctes. Par exemple, voici comment l'indication de ressource preconnect serait utilisée 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 plus directement à la cause première des polices découvertes tardivement, plutôt que de simplement fournir une solution de contournement.

De plus, l'utilisation de preload comme stratégie de chargement des polices doit également être utilisée avec précaution, car elle contourne certaines des stratégies de négociation de contenu intégrées du 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écouvre pas si la police est nécessaire que beaucoup plus tard.

Diffusion des polices

Une diffusion plus rapide des polices permet un rendu de texte plus rapide. De plus, si une police est diffusée suffisamment tôt, cela peut aider à éliminer les décalages de mise en page résultant de l'échange de polices.

Utiliser des polices auto-hébergées

En théorie, l'utilisation d'une police auto-hébergée devrait offrir de meilleures performances, car elle élimine une configuration de connexion tierce. En pratique, les différences de performances entre ces deux options sont moins claires. Par exemple, le Web Almanac a constaté que les sites utilisant des polices tierces avaient 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, il est recommandé d'appliquer également certaines des optimisations de fichiers de police que les fournisseurs de polices tiers fournissent généralement automatiquement. Par exemple, la création de sous-ensembles de polices et la compression WOFF2. L'effort requis pour appliquer ces optimisations dépend en partie des langues prises en charge par votre site. En particulier, sachez que l'optimisation des polices pour les langues chinoises, japonaises et coréennes peut être particulièrement difficile.

Utiliser WOFF2

Parmi les polices modernes, WOFF2 est la plus récente, est compatible avec le plus grand nombre de navigateurs et offre la meilleure compression. Comme il utilise Brotli, WOFF2 compresse 30% mieux que WOFF, ce qui réduit la quantité de données à télécharger et, par conséquent, améliore les performances.

Compte tenu de la compatibilité des navigateurs, les experts recommandent désormais de n'utiliser que WOFF2 :

En fait, nous pensons qu'il est temps de déclarer : n'utilisez que WOFF2 et oubliez tout le reste.

Cela simplifiera considérablement vos CSS et votre workflow, et empêchera également tout téléchargement accidentel de polices en double ou incorrect. WOFF2 est désormais compatible partout. Par conséquent, sauf si vous devez prendre en charge des navigateurs vraiment anciens, utilisez simplement WOFF2. Si vous ne le pouvez pas, envisagez de ne pas diffuser de polices Web sur ces anciens navigateurs. Cela ne posera pas de problème si vous disposez d'une stratégie de remplacement robuste. Les visiteurs utilisant des navigateurs plus anciens verront vos polices de remplacement.

Bram Stein, du Web Almanac 2022

Sous-ensemble de polices

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

Le unicode-range descripteur dans la déclaration @font-face indique au navigateur les 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 police en fonction de la langue utilisée par le contenu de la page.

unicode-range est souvent utilisé conjointement avec la technique de création de sous-ensembles. Un sous-ensemble de polices 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 à tous les utilisateurs, un site peut générer des sous-ensembles de polices distincts pour les caractères latins et cyrilliques.

Le nombre de glyphes par police varie considérablement :

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

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

Certains fournisseurs de polices peuvent fournir automatiquement différentes versions de fichiers de police avec différents sous-ensembles. Par exemple, Google Fonts le fait 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, il s'agit d'une optimisation qui peut être manquée et entraîner des fichiers de police plus volumineux en local.

Vous pouvez créer manuellement des sous-ensembles de polices si votre fournisseur de polices le permet, soit avec une API (Google Fonts le prend en charge en fournissant un paramétre text), soit en modifiant manuellement les fichiers de police, puis en les auto-hébergeant. Les outils permettant de générer des sous-ensembles de polices incluent subfont et glyphanger.

Vérifiez toujours les licences de police pour vous assurer qu'elles autorisent la création de sous-ensembles et l'auto-hébergement.

Utiliser moins de polices Web

La police la plus rapide à diffuser est celle qui n'est pas demandée en premier lieu. 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 selon le système d'exploitation et la version. Comme la police est déjà installée, elle n'a pas besoin d'être téléchargée. Les polices système peuvent être particulièrement adaptées au corps du texte.

Pour utiliser la police système dans vos CSS, listez 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 être utilisée pour remplacer plusieurs fichiers de police. Les polices variables fonctionnent en définissant un style de police "par défaut" et en fournissant "axes" pour manipuler la police. Par exemple, une police variable avec un axe Weight peut être utilisée pour implémenter une lettrage qui nécessiterait auparavant des polices distinctes pour les styles "light", "regular", "bold" et "extra bold".

Le passage aux polices variables ne profite pas à tout le monde. Les polices variables contiennent de nombreux styles et 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

Face à une police Web qui n'a pas encore été chargée, le navigateur est confronté à un dilemme : doit-il différer le rendu du texte jusqu'à ce que la police Web soit arrivée ? 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 basés sur Chromium et Firefox bloquent le rendu du texte pendant un maximum de trois secondes si la police Web associée n'a pas été chargée. Safari bloque le rendu du texte indéfiniment.

Ce comportement peut être configuré à l'aide de l'attribut font-display. Ce choix peut avoir des implications importantes : font-display peut avoir un impact sur le LCP, le 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 police de caractères.

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

Cinq valeurs sont possibles pour font-display :

Valeur Période de blocage Période d'échange
Auto Varie selon le navigateur Varie selon le navigateur
Bloquer 2 à 3 secondes Infini
Échange 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. 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 d'échange : la période d'échange vient après la période de blocage. Si la police Web devient disponible pendant la période d'échange, elle est "échangé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 cela dépend des préférences individuelles, de l'importance de la police Web pour la page et la marque, et de la façon dont une police qui arrive tardivement peut être décalée lorsqu'elle est échangé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" : le rendu du texte n'est pas différé de plus de 100 ms et il est garanti qu'il n'y a pas de décalage de mise en page lié à l'échange de polices. L'inconvénient est que la police Web ne sera pas utilisée si elle arrive tardivement.

  • Afficher rapidement du texte tout en utilisant une police Web : utilisez font-display: swap mais assurez-vous de diffuser la police suffisamment tôt pour qu'elle n'entraîne pas de décalage de mise en page. L'inconvénient de cette option est le décalage décalé lorsque la police arrive tardivement.

  • Le texte est affiché dans une police Web : utilisez font-display: block, mais assurez-vous de diffuser la police suffisamment tôt pour minimiser le délai du texte. L'affichage initial du texte est différé. 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 la 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, d'où un décalage. Ce décalage peut être moins décalé que font-display: swap, car le texte lui-même ne sera pas décalé.

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ône

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

De plus, l'utilisation d'une police de remplacement peut ne pas être pratique. Lorsque cela est possible, remplacez les polices d'icône par des SVG, ce qui est également préférable pour l'accessibilité. Les versions plus récentes des polices d'icône populaires sont généralement compatibles avec les SVG. Pour en savoir plus sur le passage aux SVG, consultez la page de Font Awesome sur les sprites SVG et notre guide sur les 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 size-adjust attributs.

Conclusion

Les polices Web constituent toujours un goulot d'étranglement en termes de performances, mais nous disposons d'un éventail d'options de plus en plus large pour nous permettre de les optimiser afin de réduire ce goulot d'étranglement autant que possible.