Dans les modules précédents, vous avez appris à optimiser le code HTML, CSS, JavaScript et les ressources multimédias. Dans ce module, vous allez découvrir des méthodes permettant d'optimiser les polices Web.
Les polices Web peuvent avoir un impact sur les performances des pages au moment du chargement et de l'affichage.
Le téléchargement des fichiers de police volumineux peut prendre un certain temps et affecter négativement la valeur First Contentful Paint (FCP), tandis que la mauvaise valeur font-display peut entraîner des décalages de mise en page indésirables qui contribuent au CLS (Cumulative Layout Shift) d'une page.
Avant d'optimiser les polices Web, il peut être utile de savoir comment elles sont détectées par le navigateur, afin de comprendre comment CSS empêche la récupération de polices Web inutiles dans certaines situations.
Discovery
Les polices Web d'une page sont définies dans une feuille de style à l'aide d'une déclaration @font-face:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
L'extrait de code précédent définit un font-family nommé "Open Sans" et indique au navigateur où trouver la ressource de police Web correspondante. Pour préserver la bande passante, le navigateur ne télécharge la police Web qu'une fois qu'il a déterminé que la mise en page actuelle en a besoin.
h1 {
font-family: "Open Sans";
}
Dans l'extrait CSS précédent, le navigateur télécharge le fichier de police "Open Sans" lors de l'analyse d'un élément <h1> dans le code HTML de la page.
preload
Si vos déclarations @font-face sont définies dans une feuille de style externe, le navigateur ne peut commencer à les télécharger qu'après avoir téléchargé la feuille de style.
Cela rend les polices Web découvertes tardivement, mais il existe des moyens d'aider le navigateur à les détecter plus tôt.
Vous pouvez lancer une demande anticipée de ressources de police Web à l'aide de la directive preload. La directive preload rend les polices Web visibles dès le chargement de la page. Le navigateur commence immédiatement à les télécharger sans attendre la fin du téléchargement et de l'analyse de la feuille de style. L'instruction preload n'attend pas que la police soit requise sur la page.
<!-- The `crossorigin` attribute is required for fonts—even
self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
Déclarations @font-face intégrées
Vous pouvez rendre les polices visibles plus tôt lors du chargement de la page en incorporant le code CSS qui bloque l'affichage, y compris les déclarations @font-face, dans le <head> de votre code HTML à l'aide de l'élément <style>. Dans ce cas, le navigateur détecte les polices Web plus tôt dans le chargement de la page, car il n'a pas besoin d'attendre le téléchargement d'une feuille de style externe.
L'intégration des déclarations @font-face présente un avantage par rapport à l'utilisation de la suggestion preload, car le navigateur ne télécharge que les polices nécessaires pour afficher la page actuelle. Vous éliminez ainsi le risque de télécharger des polices inutilisées.
Télécharger
Après avoir découvert les polices Web et s'être assuré qu'elles sont nécessaires dans la mise en page de la page actuelle, le navigateur peut les télécharger. Le nombre de polices Web, leur encodage et leur taille de fichier peuvent avoir un impact significatif sur la vitesse à laquelle une police Web est téléchargée et affichée par le navigateur.
Auto-héberger vos polices Web
Les polices Web peuvent être diffusées via des services tiers, tels que Google Fonts, ou auto-hébergées sur votre origine. Lorsque vous utilisez un service tiers, votre page Web doit ouvrir une connexion au domaine du fournisseur avant de pouvoir commencer à télécharger les polices Web nécessaires. Cela peut retarder la découverte et le téléchargement ultérieur des polices Web.
Cette surcharge peut être réduite à l'aide de l'indice de ressource preconnect. En utilisant preconnect, vous pouvez demander au navigateur d'ouvrir une connexion multi-origine plus tôt que ce qu'il ferait habituellement:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
L'extrait de code HTML précédent indique au navigateur d'établir une connexion à fonts.googleapis.com et une connexion CORS à fonts.gstatic.com. Certains fournisseurs de polices, tels que Google Fonts, diffusent des ressources CSS et de police d'origines différentes.
Vous pouvez éliminer le besoin d'une connexion tierce en auto-hébergant vos polices Web. Dans la plupart des cas, l'auto-hébergement de polices Web est plus rapide que leur téléchargement depuis plusieurs origines. Si vous prévoyez d'auto-héberger des polices Web, vérifiez que votre site utilise un réseau de diffusion de contenu (CDN), HTTP/2 ou HTTP/3, et qu'il définit les en-têtes de mise en cache appropriés pour les polices Web dont vous avez besoin.
Utiliser WOFF2 et WOFF2 uniquement
WOFF2 bénéficie de la compatibilité avec un grand navigateur et de la meilleure compression, jusqu'à 30% supérieure à WOFF. La taille réduite des fichiers permet de réduire les temps de téléchargement. Le format WOFF2 est souvent le seul nécessaire à une compatibilité totale avec les navigateurs récents.
Créer des sous-ensembles de polices Web
Les polices Web comprennent généralement un large éventail de glyphes différents, nécessaires pour représenter la grande variété de caractères utilisés dans différentes langues. Si le contenu de votre page n'est disponible que dans une seule langue ou s'il n'utilise qu'un seul alphabet, vous pouvez réduire la taille de vos polices Web à l'aide de sous-paramètres. Pour ce faire, vous devez spécifier un nombre ou une plage de points de code Unicode.
Un sous-ensemble est un ensemble réduit de glyphes inclus dans le fichier de police Web d'origine. Par exemple, au lieu d'afficher tous les glyphes, votre page peut afficher un sous-ensemble spécifique de caractères latins. Selon le sous-ensemble nécessaire, la suppression de glyphes peut réduire considérablement la taille d'un fichier de police.
Certains fournisseurs de polices Web, tels que Google Fonts, proposent automatiquement des sous-ensembles via l'utilisation d'un paramètre de chaîne de requête. Par exemple, l'URL https://fonts.googleapis.com/css?family=Roboto&subset=latin diffuse une feuille de style avec la police Web Roboto qui n'utilise que l'alphabet latin.
Si vous avez décidé d'auto-héberger vos polices Web, l'étape suivante consiste à générer et à héberger vous-même ces sous-ensembles à l'aide d'outils tels que glyphanger ou subfont.
Toutefois, si vous n'êtes pas en mesure d'héberger vos propres polices Web, vous pouvez sous-définir les polices Web fournies par Google Fonts en spécifiant un paramètre de chaîne de requête text supplémentaire ne contenant que les points de code Unicode nécessaires à votre site Web. Par exemple, si votre site comporte une police Web display qui n'a besoin que du petit nombre de caractères nécessaires pour le terme "Welcome", vous pouvez demander ce sous-ensemble via Google Fonts via l'URL suivante : https://fonts.googleapis.com/css?family=Monoton&text=Welcome. Cela peut réduire de manière significative la quantité de données de police Web nécessaire pour une seule police de caractères sur votre site Web, si un sous-paramètre extrême peut être utile sur votre site.
Rendu des polices
Une fois que le navigateur a détecté et téléchargé une police Web, celle-ci peut être affichée. Par défaut, le navigateur bloque l'affichage du texte utilisant une police Web jusqu'à ce qu'il soit téléchargé. Vous pouvez ajuster le comportement d'affichage du texte dans le navigateur et définir le texte à afficher ou non jusqu'à ce que la police Web soit entièrement chargée à l'aide de la propriété CSS font-display.
block
La valeur par défaut de font-display est block. Avec block, le navigateur bloque l'affichage de tout texte utilisant la police Web spécifiée. Chaque navigateur diffère légèrement. Chromium et Firefox bloquent l'affichage pendant trois secondes maximum avant d'utiliser une création de remplacement. Safari se bloque indéfiniment jusqu'à ce que la police Web soit chargée.
swap
swap est la valeur font-display la plus utilisée. swap ne bloque pas l'affichage et affiche le texte immédiatement dans une création de remplacement avant de basculer dans la police Web spécifiée. Vous pouvez ainsi afficher votre contenu immédiatement, sans attendre le téléchargement de la police Web.
Cependant, swap présente un inconvénient : cela entraîne un décalage de la mise en page si la police Web de remplacement et la police Web spécifiée dans votre CSS varient considérablement en termes de hauteur de ligne, de crénage et d'autres métriques de police. Cela peut affecter le CLS de votre site Web si vous ne prenez pas soin d'utiliser l'indice preload pour charger une ressource de police Web dès que possible, ou si vous ne prenez pas en compte d'autres valeurs font-display.
fallback
La valeur fallback pour font-display correspond à un compromis entre block et swap. Contrairement à swap, le navigateur bloque l'affichage d'une police, mais ne remplace le texte de remplacement que pendant une très courte période. Cependant, contrairement à block, la période de blocage est extrêmement courte.
La valeur fallback peut fonctionner correctement sur les réseaux rapides où, si la police Web se télécharge rapidement, elle correspond à la police utilisée immédiatement sur le rendu initial de la page. Toutefois, si les réseaux sont lents, le texte de remplacement s'affiche d'abord une fois la période de blocage écoulée, puis est remplacé lorsque la police Web est disponible.
optional
optional est la valeur font-display la plus stricte et n'utilise la ressource de police Web que si elle est téléchargée en 100 millisecondes. Si une police Web prend plus de temps à se charger, elle n'est pas utilisée sur la page. Le navigateur utilise alors la police de remplacement pour la navigation actuelle, tandis que la police Web est téléchargée en arrière-plan et placée dans le cache du navigateur.
Par conséquent, les navigations suivantes sur les pages peuvent utiliser immédiatement la police Web, car elle est déjà téléchargée. font-display: optional évite le décalage de mise en page observé avec swap, mais certains utilisateurs ne voient pas la police Web si elle arrive trop tard lors de la navigation initiale sur les pages.
Démonstrations de polices
Tester vos connaissances
Quand le navigateur télécharge-t-il une ressource de police Web (en supposant qu'elle n'est pas extraite avec une directive preload) ?
Quel est le seul format (et le plus efficace) nécessaire pour diffuser des polices Web sur tous les navigateurs récents ?
À suivre: JavaScript de division du code
Maintenant que vous savez comment optimiser les polices, vous pouvez passer au module suivant, qui traite d'un sujet susceptible d'améliorer la vitesse de chargement initiale des pages pour vos utilisateurs, et qui consiste à différer le chargement de JavaScript via le fractionnement du code. Ainsi, vous pouvez réduire au maximum les conflits au niveau de la bande passante et du processeur pendant la phase de démarrage d'une page, période au cours de laquelle les utilisateurs sont très susceptibles d'interagir avec elle.