Optimisez les polices Web pour les métriques Core Web Vitals.
Ce document présente les bonnes pratiques en termes de performances pour les polices. Les polices Web ont un impact sur les performances de différentes manières:
- Affichage du texte retardé:si une police Web n'a pas été chargée, les navigateurs retardent généralement l'affichage du texte. Dans de nombreux cas, cela retarde le First Contentful Paint (FCP). Dans certains cas, cela retarde le Largest Contentful Paint (LCP).
- Déplacements de mise en page:l'échange de polices peut entraîner des déplacements de mise en page et avoir un impact sur le CLS (Cumulative Layout Shift). Ces décalages de mise en page se produisent lorsqu'une police Web et sa police de remplacement occupent des espaces différents sur la page.
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.
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");
}
Il est courant de penser à tort qu'une police est demandée lorsqu'une déclaration @font-face
est rencontrée. C'est faux. À elle seule, la déclaration @font-face
ne déclenche pas le téléchargement de polices. 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>
.
Par conséquent, lorsque vous réfléchissez à l'optimisation des polices, il est important de donner autant d'importance aux feuilles de style qu'aux fichiers de polices 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, 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
La plupart des sites bénéficieraient grandement de l'intégration des déclarations de polices et d'autres styles critiques 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 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 en ligne du CSS essentiel 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 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 à partir d'un site tiers, nous vous recommandons vivement d'utiliser l'indice de ressource preconnect
pour établir une ou plusieurs connexions anticipées avec l'origine tierce.
Les indices de ressources doivent être placés dans le <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 polices 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 dès le 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.
De plus, l'utilisation de preload
comme stratégie de chargement de polices doit également être utilisée avec précaution, car elle contourne certaines des 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 beaucoup plus tard.
Livraison de polices
Une diffusion des polices plus rapide accélère l'affichage du texte. De plus, si une police est envoyée suffisamment tôt, cela peut aider à éliminer les décalages de mise en page résultant du remplacement de police.
Utiliser des polices autogérées
Sur le papier, l'utilisation d'une police auto-hébergée devrait offrir de meilleures performances, car elle élimine la configuration de connexion tierce. En pratique, les différences de performances entre ces deux options sont moins nettes. Par exemple, l'Web Almanac a constaté que les sites utilisant des polices tierces étaient plus rapides à afficher que ceux qui utilisaient 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 que l'optimisation des polices pour les langues CJK peut être particulièrement difficile.
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é des navigateurs, les experts recommandent désormais de n'utiliser que WOFF2:
Nous pensons qu'il est également temps de proclamer : "N'utilisez que WOFF2 et oubliez tout le reste".
Bram Stein, dans l'Almanach Web 2022
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 compatible 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.
Polices 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.
Une police de sous-ensemble inclut une partie plus petite 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 procède comme suit 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 de génération de 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 être particulièrement adaptées au 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 peut pas passer aux polices variables. Les polices variables contiennent de nombreux styles. Elles ont donc généralement une taille de fichier plus importante que les polices non variables individuelles 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 police.
@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 | 0 ms | 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 les performances et l'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 du texte tout en utilisant une police Web: utilisez
font-display: swap
, mais veillez à transmettre la police suffisamment tôt pour qu'elle ne provoque pas 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 changement moins choquant quefont-display: swap
, car le texte lui-même ne semble pas bouger.
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 d'icônes sont plus susceptibles de provoquer des changements de mise en page importants.
De plus, l'utilisation d'une police de remplacement 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.