Dans les modules précédents, vous avez appris à optimiser les ressources HTML, CSS, JavaScript et multimédias. Dans ce module, découvrez quelques méthodes pour optimiser les polices Web.
Les polices Web peuvent avoir un impact sur les performances des pages au moment du chargement et du rendu.
Le téléchargement de fichiers de police volumineux peut prendre du temps et avoir un impact négatif sur le First Contentful Paint (FCP). De plus, une valeur font-display
incorrecte peut entraîner des décalages de mise en page indésirables qui contribuent au Cumulative Layout Shift (CLS) d'une page.
Avant de parler de l'optimisation des polices Web, il peut être utile de savoir comment le navigateur les découvre. Vous comprendrez ainsi comment le 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 économiser de la bande passante, le navigateur ne télécharge la police Web que lorsqu'il est déterminé que la mise en page de la page actuelle en a besoin.
h1 {
font-family: "Open Sans";
}
Dans l'extrait de code CSS précédent, le navigateur télécharge le fichier de police "Open Sans"
lorsqu'il analyse 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.
Les polices Web sont donc des ressources découvertes tardivement. Toutefois, il existe des moyens d'aider le navigateur à les découvrir plus tôt.
Vous pouvez envoyer une requête anticipée pour les ressources de police Web à l'aide de la directive preload
. La directive preload
permet de découvrir les polices Web dès le début du 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. La directive preload
n'attend pas que la police soit nécessaire 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 détectables plus tôt lors du chargement de la page en insérant le code CSS bloquant le rendu (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écouvre les polices Web plus tôt lors du 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 l'indication preload
, car le navigateur ne télécharge que les polices nécessaires au rendu de la page actuelle. Cela élimine le risque de télécharger des polices inutilisées.
Télécharger
Une fois les polices Web détectées et la nécessité de les utiliser pour la mise en page de la page actuelle confirmée, le navigateur peut les télécharger. Le nombre de polices Web, leur encodage et la taille de leurs fichiers peuvent avoir une incidence importante sur la vitesse de téléchargement et d'affichage d'une police Web 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 peuvent être 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 des polices Web.
Cette surcharge peut être réduite à l'aide de l'indication de ressource preconnect
. En utilisant preconnect
, vous pouvez demander au navigateur d'ouvrir une connexion à l'origine croisée plus tôt que d'habitude :
<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, comme Google Fonts, diffusent des ressources CSS et de police à partir de différentes origines.
Vous pouvez éviter d'avoir recours à une connexion tierce en auto-hébergeant vos polices Web. Dans la plupart des cas, l'auto-hébergement des polices Web est plus rapide que leur téléchargement à partir d'une origine croisée. Si vous prévoyez d'héberger vous-même 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 pour votre site Web.
Utilisez WOFF2 (et uniquement WOFF2)
Le format WOFF2 est largement compatible avec les navigateurs et offre la meilleure compression (jusqu'à 30 % de mieux que WOFF). La taille réduite des fichiers permet de les télécharger plus rapidement. Le format WOFF2 est souvent le seul nécessaire pour une compatibilité totale avec les navigateurs modernes.
Créer des sous-ensembles de vos polices Web
Les polices Web incluent généralement un large éventail de glyphes différents, qui sont nécessaires pour représenter la grande variété de caractères utilisés dans différentes langues. Si votre page ne diffuse du contenu que dans une seule langue ou n'utilise qu'un seul alphabet, vous pouvez réduire la taille de vos polices Web en les subsettant. Pour ce faire, il suffit souvent de spécifier un ou plusieurs 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 de diffuser tous les glyphes, votre page peut diffuser un sous-ensemble spécifique pour les caractères latins. En fonction du 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, comme Google Fonts, proposent des sous-ensembles automatiquement à l'aide 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'avez pas la possibilité d'héberger vous-même vos polices Web, vous pouvez créer un sous-ensemble des polices Web fournies par Google Fonts en spécifiant un paramètre de chaîne de requête text
supplémentaire contenant uniquement les points de code Unicode nécessaires pour votre site Web. Par exemple, si vous avez une police Web d'affichage sur votre site qui n'a besoin que d'un petit nombre de caractères pour la phrase "Bienvenue", vous pouvez demander ce sous-ensemble via Google Fonts en utilisant l'URL suivante : https://fonts.googleapis.com/css?family=Monoton&text=Welcome
. Cela peut réduire considérablement la quantité de données de police Web nécessaires pour une seule typographie sur votre site Web, si un sous-ensemble aussi extrême peut être utile sur votre site Web.
Rendu des polices
Une fois que le navigateur a découvert et téléchargé une typographie Web, il peut l'afficher. Par défaut, le navigateur bloque le rendu de tout texte qui utilise une police Web jusqu'à ce qu'elle soit téléchargée. Vous pouvez ajuster le comportement de rendu du texte du navigateur et configurer le texte qui doit être affiché (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. Le comportement des différents navigateurs est légèrement différent. Chromium et Firefox bloquent le rendu pendant un maximum de trois secondes avant d'utiliser une police de secours. Safari 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 le rendu et affiche immédiatement le texte dans une police de remplacement avant de le remplacer par la police Web spécifiée. Cela vous permet d'afficher votre contenu immédiatement sans attendre le téléchargement de la typographie Web.
Toutefois, l'inconvénient de swap
est qu'il provoque un décalage de 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, d'approche et d'autres métriques de police. Cela peut affecter le CLS de votre site Web si vous ne faites pas attention à utiliser l'indicateur preload
pour charger une ressource de police Web dès que possible ou si vous ne tenez pas compte des autres valeurs font-display
.
fallback
La valeur fallback
pour font-display
est un compromis entre block
et swap
. Contrairement à swap
, le navigateur bloque le rendu d'une police, mais remplace le texte par un texte de substitution uniquement pendant une très courte période. Toutefois, contrairement à block
, la période de blocage est extrêmement courte.
L'utilisation de la valeur fallback
peut être efficace sur les réseaux rapides où, si la police Web se télécharge rapidement, elle est utilisée immédiatement lors du rendu initial de la page. Toutefois, si les réseaux sont lents, le texte de remplacement s'affiche en premier après la période de blocage, puis est remplacé lorsque la typographie Web arrive.
optional
optional
est la valeur font-display
la plus stricte. Elle n'utilise la ressource de police Web que si elle est téléchargée en moins de 100 millisecondes. Si une police Web met plus de temps à se charger, elle n'est pas utilisée sur la page. Le navigateur utilise alors la typographie de remplacement pour la navigation en cours, 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 de page ultérieures peuvent utiliser immédiatement la typographie 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 typographie Web si elle arrive trop tard lors de la navigation initiale sur la page.
Démos 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 récupérée avec une directive preload
) ?
Quel est le seul format (et le plus efficace) nécessaire pour diffuser des polices Web sur tous les navigateurs modernes ?
À suivre : fractionner le code JavaScript
Maintenant que vous avez compris l'optimisation des polices, vous pouvez passer au module suivant, qui aborde un sujet qui a un fort potentiel d'amélioration de la vitesse de chargement initiale des pages pour vos utilisateurs : différer le chargement de JavaScript grâce au fractionnement du code. Vous pouvez ainsi maintenir la contention de la bande passante et du processeur au niveau le plus bas possible pendant la phase de démarrage d'une page, période pendant laquelle les utilisateurs sont très susceptibles d'interagir avec elle.