Optimiser les polices Web

Dans les modules précédents, vous avez appris à optimiser HTML, CSS, JavaScript, et des ressources multimédias. Dans ce module, vous découvrirez quelques méthodes d'optimisation et les polices de caractères.

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 affecte négativement les premiers Contentful Paint (FCP), alors qu'une valeur font-display incorrecte pourrait entraîner des décalages de mise en page indésirables qui contribuent au Cumulative Layout Shift d'une page (CLS).

Avant d'aborder l'optimisation des polices Web, il faut savoir comment elles sont découvertes le navigateur peut être utile, pour que vous compreniez 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'un @font-face déclaration:

@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 élément font-family nommé "Open Sans", et indique au navigateur où trouver la ressource de police Web correspondante. Pour économiser bande passante, le navigateur ne télécharge pas la police Web tant qu'elle n'a pas été déterminée 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". car 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, ne peut commencer à les télécharger qu'après avoir téléchargé la feuille de style. Les polices Web sont ainsi des ressources découvertes tardivement, mais il existe des moyens d'aider pour détecter les polices Web plus tôt.

Vous pouvez lancer une demande anticipée de ressources de police Web à l'aide de preload. directive. La directive preload permet de rendre les polices Web visibles dès le début et le navigateur commence immédiatement à les télécharger pour que le téléchargement et l'analyse de la feuille de style se terminent. 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 visibles plus tôt lors du chargement de la page en intégrant les fichiers CSS qui bloquent 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écouvre les polices Web plus tôt dans le chargement de la page, car il n'est pas nécessaire d'attendre qu'une feuille de style à télécharger.

<ph type="x-smartling-placeholder">

L'intégration des déclarations @font-face présente un avantage par rapport à l'utilisation de preload. Conseil, étant donné que le navigateur ne télécharge que les polices nécessaires pour afficher la version actuelle . Cela élimine le risque de télécharger des polices inutilisées.

<ph type="x-smartling-placeholder">

Télécharger

Après avoir découvert les polices Web et vérifié qu'elles sont nécessaires au fonctionnement de la page actuelle le navigateur peut les télécharger. Le nombre de polices Web, leur encodage et la taille de leur fichier peut influer de manière significative sur la rapidité avec laquelle une police Web téléchargée et affichée par le navigateur.

Auto-héberger vos polices Web

Les polices Web peuvent être diffusées par le biais de services tiers, tels que Google Fonts. peuvent être auto-hébergées sur votre origine. Lorsque vous utilisez un service tiers, doit ouvrir une connexion au domaine du fournisseur pour pouvoir démarrer télécharger les polices Web nécessaires. Cela peut retarder la découverte et les le téléchargement de polices Web.

Cette surcharge peut être réduite à l'aide de l'indice de ressource preconnect. En utilisant preconnect, vous pouvez indiquer au navigateur d'ouvrir une connexion à l'origine plus tôt que d'habitude le navigateur:

<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 suggère au navigateur d'établir une connexion avec fonts.googleapis.com et une connexion CORS à fonts.gstatic.com. Un peu les fournisseurs de polices, tels que Google Fonts, diffusent des ressources CSS et de police origines.

Vous pouvez éliminer le recours à une connexion tierce grâce à l'auto-hébergement de votre polices Web. Dans la plupart des cas, l'auto-hébergement des polices Web est plus rapide que leur téléchargement. d'une multi-origine. Si vous envisagez d'utiliser des polices Web auto-hébergées, vérifiez que votre site utilise un réseau de diffusion de contenu (CDN), HTTP/2 ou HTTP/3, et définit le paramètre les en-têtes de mise en cache corrects pour les polices web dont vous avez besoin pour votre site web.

Utiliser WOFF2 et WOFF2 uniquement

WOFF2 bénéficie d'une compatibilité étendue avec les navigateurs et d'une meilleure compression, allant jusqu'à 30% en plus que WOFF. La taille réduite du fichier permet d'accélérer les temps de téléchargement. Le WOFF2 est souvent le seul requis pour bénéficier d'une compatibilité totale avec les technologies des navigateurs.

<ph type="x-smartling-placeholder">

Créer des sous-ensembles de 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 affiche le contenu dans une seule langue ou dans un seul alphabet, vous pouvez réduire la taille de vos polices Web à l’aide de sous-paramètres. Cela est souvent le cas en en spécifiant un nombre ou une plage de points de code Unicode ;

Un sous-ensemble est un ensemble réduit de glyphes qui étaient inclus dans la version originale du Web fichier de police. Par exemple, au lieu de diffuser tous les glyphes, votre page peut afficher une un sous-ensemble spécifique pour les caractères latins. Selon le sous-ensemble requis, la suppression peuvent 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 un 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ébergez ces sous-ensembles vous-même à l'aide d'outils tels que glyphanger ou subfont.

Toutefois, si vous n'avez pas la capacité d'héberger vos propres polices Web, vous pouvez sous-ensemble des polices Web fournies par Google Fonts en spécifiant un text supplémentaire paramètre de chaîne de requête ne contenant que les points de code Unicode nécessaires pour votre site Web. Par exemple, si votre site utilise une police Web display requiert un petit nombre de caractères pour l'expression « Bienvenue », vous pouvez demandez ce sous-ensemble via Google Fonts à l'adresse suivante: https://fonts.googleapis.com/css?family=Monoton&text=Welcome Cela peut considérablement la quantité de données de polices Web nécessaires pour une seule police de caractères sur votre site Web, si des sous-ensembles aussi extrêmes peuvent être utiles sur votre site.

Rendu des polices

Une fois que le navigateur a détecté et téléchargé une police Web, il peut être rendu. Par défaut, le navigateur bloque l'affichage de tout texte qui utilise un Web jusqu'à ce qu'elle soit téléchargée. Vous pouvez ajuster le rendu du texte dans le navigateur son comportement, et de configurer le texte à afficher (ou non) avant que le navigateur a été 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. Différents les navigateurs se comportent légèrement différemment. Blocage de l'affichage dans Chromium et Firefox pour jusqu'à trois secondes avant d'utiliser une création de remplacement. Safari se bloque indéfiniment tant que la police Web n'est pas 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 création de remplacement avant de le permuter dans la police Web spécifiée. Cela vous permet d'afficher votre contenu immédiatement, sans attendre pour que la police Web soit téléchargée.

Cependant, l'inconvénient de swap est qu'il entraîne un décalage de mise en page si la création de remplacement Web et celle spécifiée dans votre CSS varie considérablement en termes de ligne la hauteur, le crénage et d'autres métriques de police. Cela peut affecter le CLS de votre site Web si ne prenez pas soin d'utiliser l'indice 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 de font-display est un compromis entre block et swap. Contrairement à swap, le navigateur bloque l'affichage d'une police, mais de remplacer le texte de remplacement pendant une très courte période. Contrairement à block, mais la période de blocage est extrêmement courte.

La valeur fallback peut bien fonctionner sur les réseaux rapides où, si la police Web se télécharge rapidement, la police web est la police de caractères utilisée immédiatement sur le le rendu initial. Toutefois, si les réseaux sont lents, le texte de remplacement est détecté. après la fin de la période de blocage, puis sont remplacées lorsque la police Web arrive.

optional

optional est la valeur font-display la plus stricte et n'utilise que la valeur ressource de police si elle est téléchargée dans les 100 millisecondes. Si une police Web prend est plus longue à charger, elle n'est pas utilisée sur la page et le navigateur utilise le police de remplacement pour la navigation actuelle pendant que la police web est téléchargée dans en arrière-plan et placée dans le cache du navigateur.

Par conséquent, les navigations ultérieures sur les pages peuvent utiliser la police Web immédiatement, car elle est déjà téléchargée. font-display: optional évite le décalage de mise en page constaté avec swap, mais certains utilisateurs ne voient pas la police Web si elle arrive trop tard sur le la navigation initiale sur la page.

Démonstrations de police

Tester vos connaissances

Quand le navigateur télécharge-t-il une ressource de police Web (en supposant qu'il ne s'agit pas récupéré avec une instruction preload) ?

Dès que la référence y est découverte dans une feuille de style.
Lorsque le CSSOM de la page est créé et qu'il est déterminé que la police Web est nécessaires pour la mise en page actuelle.

Quel est le seul format (et le plus efficace) nécessaire pour diffuser des annonces sur le Web dans tous les navigateurs récents ?

WOFF
Fin
TTF
WOFF2

À suivre: JavaScript pour le fractionnement de code

Grâce à vos connaissances en matière d'optimisation des polices, vous pouvez dans le module suivant, qui traite d'un sujet à fort potentiel d'amélioration la vitesse de chargement initiale de la page pour vos utilisateurs, ce qui diffère le chargement JavaScript via le fractionnement de code. Ainsi, la bande passante et le processeur le plus faible possible pendant la phase de démarrage d'une page, une période de moment où les utilisateurs sont très susceptibles d’interagir avec elle.