Optimiser les polices Web pour les métriques Core Web Vitals.
Cet article décrit les bonnes pratiques en matière de performances pour les polices. Les polices Web ont un impact sur les performances de plusieurs façons:
- Affichage retardé du texte:si une police Web n'est pas chargée, les navigateurs retardent généralement l'affichage du texte. Dans de nombreux cas, cela retarde le FCP (First Contentful Paint). Dans certains cas, cela retarde le processus LCP (Largest Contentful Paint).
- Décalages de mise en page:la pratique du changement de police peut entraîner des décalages de mise en page, ce qui peut avoir un impact sur le Cumulative Layout Shift (CLS). Ces décalages de mise en page se produisent lorsqu'une police Web et sa police de remplacement occupent des quantités d'espace différentes sur la page.
Cet article est divisé en trois sections: Chargement des polices, Diffusion 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 généralement des ressources importantes, car sans elles, l'utilisateur risque de ne pas pouvoir afficher le contenu de la page. Ainsi, les bonnes pratiques de chargement des polices visent généralement à s'assurer que les polices se chargent le plus tôt possible. Une attention particulière doit être accordée 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 Durée dans le panneau Réseau des outils pour les développeurs Chrome.
Fonctionnement de @font-face
Avant d'étudier les bonnes pratiques concernant le 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 un élément essentiel de l'utilisation de n'importe quelle police Web. Au minimum, il déclare le nom qui sera 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. Ce n'est pas vrai. En elle-même, la déclaration @font-face ne déclenche pas de téléchargement de police. À 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. Par exemple:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
h1 {
font-family: "Open Sans"
}
En d'autres termes, dans l'exemple ci-dessus, 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, la suppression des feuilles de style CSS inutilisées et le fractionnement de feuilles de style peuvent réduire le nombre de polices chargées par une page.
Déclarations de police intégrées
Pour la plupart des sites, il est particulièrement 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 CSS essentiels peut être une technique plus avancée que tous les sites ne sont pas en mesure d'atteindre. Les avantages en termes de performances sont évidents, mais des processus et des outils de compilation supplémentaires sont nécessaires pour s'assurer que le code CSS nécessaire, et idéalement uniquement le code CSS essentiel, est intégré correctement et que tout code CSS supplémentaire est diffusé sans bloquer l'affichage.
Se préconnecter 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 les 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 ci-dessous 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, n'oubliez pas qu'un fournisseur de polices peut diffuser des feuilles de style et des polices d'origines distinctes. Par exemple, voici comment l'indice de ressource preconnect serait 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 visibles au début du processus de chargement de la page, cela a pour effet de supprimer des ressources du navigateur au lieu de charger 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 se rapprochent de la cause première des polices découvertes tardivement, au lieu de simplement fournir une solution de contournement.
En outre, l'utilisation de preload comme stratégie de chargement de police doit ê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, s'il est utilisé prudemment, ne doit être utilisé 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 s'avérer très efficace, car le navigateur ne déterminera pas si la police est nécessaire bien plus tard.
Distribution des polices
Une diffusion plus rapide des polices permet d'accélérer le rendu du texte. De plus, si une police est livré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. Toutefois, dans la pratique, les différences de performances entre ces deux options sont moins évidentes: par exemple, l'almanach Web a montré que les sites utilisant des polices tierces affichaient un rendu plus rapide que celles 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 ces technologies, il est beaucoup moins probable que les polices auto-hébergées offrent de meilleures performances. Pour en savoir plus, consultez la page Réseaux de diffusion de contenu.
Si vous utilisez une police auto-hébergée, nous vous recommandons d'appliquer également certaines des optimisations de fichier de police que les fournisseurs de polices tiers proposent généralement automatiquement, par exemple le sous-paramètre de police et la compression WOFF2. Les efforts requis pour appliquer ces optimisations dépendront un peu des langues prises en charge par votre site. Sachez en particulier 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, est compatible avec le plus grand nombre de navigateurs et offre la meilleure compression. Étant donné qu'il utilise Brotli, WOFF2 compresse 30% plus efficacement que WOFF, ce qui réduit la quantité de données à télécharger et améliore les performances.
Compte tenu de la compatibilité du navigateur, les experts recommandent désormais d'utiliser uniquement WOFF2:
.En fait, nous pensons qu'il est également temps de proclamer: n'utilisez que WOFF2 et oubliez tout le reste.
<ph type="x-smartling-placeholder"></ph> Bram Stein, issu de l'almanach Web 2022
Cela simplifiera considérablement votre CSS et votre workflow, et évitera le téléchargement accidentel de polices doubles ou incorrectes. WOFF2 est désormais pris en charge partout. Donc, sauf si vous avez besoin de prendre en charge de très anciens navigateurs, utilisez simplement WOFF2. Si cela n'est pas possible, envisagez de ne diffuser aucune police Web sur ces anciens navigateurs. Si vous mettez en place une stratégie de remplacement efficace, ce ne sera pas un problème. Les visiteurs utilisant des navigateurs plus anciens ne verront que vos polices de remplacement.
Polices de sous-ensembles
Les fichiers de police incluent généralement un grand nombre de glyphes pour tous les caractères qu'ils acceptent. Toutefois, vous n'aurez peut-être pas besoin de tous les caractères de votre page et vous pourrez réduire la taille des fichiers de police en créant des sous-ensembles de polices.
Le descripteur unicode-range 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 généralement 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é en conjonction avec la technique de sous-titrage. 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 proposer 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 énormément: les polices latines ont généralement une magnitude de 100 à 1 000 glyphes par police. Les polices CJK peuvent comporter plus de 10 000 caractères. La suppression des glyphes inutilisés peut considérablement réduire la taille du fichier 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;
}
Lors du passage à l'auto-hébergement, il s'agit d'une optimisation qui peut facilement passer à côté et générer localement des fichiers de police plus volumineux.
Il est également possible de créer un sous-ensemble manuel des polices si votre fournisseur de polices le permet, soit par le biais d'une API (Google Fonts prend en charge cette opération en fournissant un paramètre text), soit en modifiant manuellement les fichiers de police, puis en auto-hébergement. Les outils permettant de générer des sous-ensembles de polices incluent subfont et glyphanger. Toutefois, vérifiez la licence des polices que vous utilisez autorisent les sous-paramètres et l'auto-hébergement.
Utiliser moins de polices Web
La police la plus rapide à livrer est une police 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. Comme la police est déjà installée, il n'est pas nécessaire de la télécharger. Les polices système sont particulièrement adaptées au corps du texte.
Pour utiliser la police 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 être utilisée pour remplacer plusieurs fichiers de police. Les polices variables fonctionnent en définissant une "valeur par défaut" et fournissez des axes pour la manipuler. Par exemple, une police variable avec l'axe Weight peut être utilisée pour implémenter des lettres qui nécessitaient auparavant des polices distinctes pour les polices claires, standards, gras et très gras.
Tout le monde ne bénéficiera pas du passage 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 individuelles non variables, qui ne contiennent qu'un seul style. Les sites qui bénéficieront de la plus grande amélioration par rapport à l’utilisation de polices variables sont ceux qui utilisent (et doivent utiliser) divers styles et épaisseurs de police.
Rendu des polices
Lorsqu'une police Web n'a pas encore été chargée, le navigateur est confronté à un dilemme: doit-il attendre l'arrivée de la police Web pour afficher le texte ? Ou doit-il afficher le texte dans une police de remplacement jusqu'à ce que la police Web arrive ?
Les navigateurs gèrent ce scénario différemment. Par défaut, les navigateurs Chromium et Firefox bloquent l'affichage du texte pendant trois secondes maximum si la police Web associée n'est pas chargée. Safari bloque indéfiniment l'affichage du texte.
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 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 afficher le texte lorsque la police Web associée n'est pas chargée. Elle est définie par type de police.
@font-face {
font-family: Roboto, Sans-Serif
src: url(/fonts/roboto.woff) format('woff'),
font-display: swap;
}
Il y a cinq valeurs possibles pour font-display:
| Valeur | Période de blocage | Période d'échange |
|---|---|---|
| Auto | Variable selon le navigateur | Variable 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, elle est affichée dans une police de remplacement invisible, de sorte que le texte ne soit pas visible pour l'utilisateur. Si elle n'est plus disponible à la fin de la période de blocage, elle sera affichée dans la police de remplacement.
- Période d'échange: la période d'échange intervient après la période de blocage. Si la police Web devient disponible pendant la période d'échange, elle est "interdite". po.
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 proposer une approche recommandée, car elle dépend des préférences individuelles, de l'importance de la police Web pour la page et de la marque, et de l'impact d'une police trop tardive lorsqu'elle est échangée.
Pour la plupart des sites, voici les trois stratégies qui s'appliquent le mieux:
Si les performances sont une priorité:utilisez
font-display: optional. Il s'agit de l'option la plus "performante" L'affichage du texte est retardé de 100 ms maximum, et nous avons l'assurance qu'il n'y aura pas de décalage de mise en page lié au changement de police. Cependant, l'inconvénient est que la police web ne sera pas utilisée si elle arrive en retard.Si l'affichage rapide du texte est une priorité, mais que vous voulez tout de même vous assurer que la police Web est utilisée: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 décalage troublant qui survient lorsque la police arrive en retard.Si vous avez pour priorité de vous assurer que le texte s'affiche dans une police Web:utilisez
font-display: block, mais veillez à diffuser la police suffisamment tôt pour réduire le retard du texte. L'inconvénient est que l'affichage initial du texte est retardé. Notez que malgré cet affichage, il peut toujours entraîner un décalage de mise en page, car le texte est en réalité invisible. 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 et donc un décalage. Il peut toutefois s'agir d'un décalage moins bouleversant quefont-display: swap, car le texte lui-même ne sera pas vu se décaler.
Gardez également à l'esprit que ces deux approches peuvent être combinées. Par exemple, utilisez font-display: swap pour le branding et d'autres éléments de page qui se distinguent visuellement. Utilisez font-display: optional pour les polices utilisées dans le corps du texte.
Réduire le décalage entre la police de remplacement et la police Web
Pour réduire l'impact du CLS, vous pouvez utiliser les nouveaux attributs size-adjust. Pour en savoir plus, consultez l'article sur le CSS size-adjust. Il s'agit d'un ajout très récent à notre ensemble d'outils. Il est donc plus avancé et peut être manuel pour le moment. Il s'agit surtout d'une solution à tester et à surveiller afin d'améliorer les outils à l'avenir.
Conclusion
Les polices Web restent un goulot d'étranglement des performances, mais nous disposons d'un nombre croissant d'options pour nous permettre de les optimiser afin de réduire autant que possible ce goulot d'étranglement.