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.
Les fichiers de polices volumineux peuvent prendre du temps à télécharger et avoir un impact négatif sur le First
Contentful Paint (FCP), tandis qu'une valeur font-display incorrecte peut entraîner
des décalages visuels indésirables.
Avant de parler d'optimisation des polices Web, il peut être utile de savoir comment le navigateur les détecte. Vous pourrez ainsi 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 économiser de la bande passante, le navigateur ne télécharge pas la police Web tant qu'il n'a pas déterminé que la mise en page de la 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"
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'une fois la feuille de style téléchargée.
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 lancer 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 plus tôt lors du chargement de page, et 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 page en intégrant le code CSS bloquant le rendu, y compris les @font-face déclarations, dans l'<head> de votre code HTML à l'aide de l'<style> élément. Dans ce cas, le navigateur détecte les polices Web plus tôt lors du chargement de 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
Après avoir détecté les polices Web et s'être assuré qu'elles sont nécessaires à 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 de téléchargement et de rendu 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 ê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étection et le téléchargement ultérieur 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 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 à partir d'origines différentes.
Vous pouvez éliminer le besoin d'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'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 pour votre site Web.
Utiliser WOFF2, et uniquement WOFF2
WOFF2 est largement compatible avec les navigateurs et offre la meilleure compression, jusqu’à 30% de mieux que WOFF. La taille de fichier réduite permet des temps de téléchargement plus rapides. Le format WOFF2 est souvent le seul nécessaire pour une compatibilité totale avec les navigateurs modernes.
Sous-ensemble de vos polices Web
Les polices Web incluent 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 votre page ne diffuse du contenu que dans une seule langue ou utilise un seul alphabet, vous pouvez réduire la taille de vos polices Web en les sous-ensemble. Pour ce faire, vous devez souvent 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 de diffuser tous les glyphes, votre page peut diffuser un sous-ensemble spécifique pour les 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 à l'aide d'un paramètre de chaîne de requête. Par exemple, l'
https://fonts.googleapis.com/css?family=Roboto&subset=latin URL 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'auto-héberger vos propres polices Web, vous pouvez créer un sous-ensemble de 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 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 nécessaires pour l'expression "Bienvenue", vous pouvez demander ce sous-ensemble via Google Fonts à l'aide de 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 police 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étecté et téléchargé une police Web, il peut la 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 à afficher ou non jusqu’à ce que la police Web
soit complètement 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 le rendu de tout texte qui utilise la police Web spécifiée. Les différents navigateurs se comportent légèrement différemment. Chromium et Firefox bloquent le rendu pendant un maximum de trois secondes avant d'utiliser une police de remplacement. 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 remplacer la police Web spécifiée. Cela vous permet d'afficher immédiatement votre contenu sans attendre le téléchargement de la police Web.
Toutefois, l'inconvénient de swap est qu'il provoque un décalage visible du contenu si la police Web de remplacement et la police Web spécifiée dans votre code CSS varient considérablement en termes de hauteur de ligne, d'approche et d'autres métriques de police.
Cela n'entraîne généralement pas de Cumulative Layout Shift (CLS) plus important que
block (car block nécessite de mettre en page la page en supposant que les polices de remplacement,
même si le texte lui-même n'est pas affiché, les deux sont donc soumis au décalage de contenu
), mais cela peut être plus choquant visuellement.
fallback
La valeur fallback de font-display est un compromis entre block et swap. Contrairement à swap, le navigateur bloque le rendu d'une police, mais remplace le texte de remplacement uniquement pendant une très courte période. Contrairement à block, la période de blocage est extrêmement courte.
L'utilisation de la valeur fallback peut fonctionner correctement sur les réseaux rapides où, si la police Web est téléchargée 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 d'abord après la période de blocage, puis est remplacé lorsque la police 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 dans un délai de 100 millisecondes. Si le chargement d'une police Web prend plus de temps, elle n'est pas utilisée sur la page, et le navigateur utilise la police de remplacement pour la navigation actuelle pendant 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 ultérieures sur la page peuvent utiliser la police Web immédiatement, car elle est déjà téléchargée. font-display: optional évite le décalage visuel observé avec swap, mais certains utilisateurs ne voient pas la police 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 preload directive) ?
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 comprenez 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 de page initiale pour vos utilisateurs : le report du chargement de JavaScript par fractionnement du code. Ce faisant, vous pouvez réduire au maximum la bande passante et la contention du processeur pendant la phase de démarrage d'une page, période pendant laquelle les utilisateurs sont susceptibles d'interagir avec elle.