Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Optimisation des polices Web

La typographie est essentielle pour la qualité du design, de la marque, de la lisibilité et de l'accessibilité. Les polices Web offrent tout ceci et plus encore : elles permettent de sélectionner le texte, de le rechercher, de l'agrandir, et de le rendre adapté aux appareils avec un ppp élevé, offrant un affichage du texte cohérent et net quelles que soient la taille de l'écran et la résolution. Les polices Web sont essentielles pour obtenir un design, un UX et des performances de qualité.

L'optimisation de police Web est un élément essentiel de la stratégie de performance globale. Chaque police est une ressource supplémentaire, et certaines polices peuvent empêcher l'affichage du texte. Mais le fait que la page utilise des polices Web ne signifie pas que l'affichage doit être plus lent. Au contraire, une police optimisée associée à une stratégie judicieuse pour son chargement et son application sur la page peuvent contribuer à réduire la taille totale de la page et améliorer le délai d'affichage de la page.

Anatomie d'une police Web

TL;DR

  • Les polices Unicode peuvent contenir des milliers de glyphes
  • Il existe quatre formats de police : WOFF2, WOFF, EOT et TTF
  • Certains formats de police nécessitent l'utilisation de la compression GZIP

Une police Web est une collection de glyphes, et chaque glyphe est une forme vectorielle qui représente une lettre ou un symbole. Par conséquent, la taille d'un fichier de police spécifique est déterminée par deux variables simples : la complexité des chemins vectoriels de chaque glyphe et le nombre de glyphes dans une police spécifique. Par exemple, Open Sans, qui est l'une des polices Web les plus populaires, contient 897 glyphes, comprenant des caractères latins, grecs et cyrilliques.

Tableau des glyphes de la police

Lorsque vous choisissez une police, il est important de prendre en compte les jeux de caractères compatibles. Si vous avez besoin de localiser le contenu de votre page dans plusieurs langues, vous devez utiliser une police capable d'offrir un aspect et une expérience cohérents à vos utilisateurs. Par exemple, la famille de polices Noto de Google a pour but d'être compatible avec toutes les langues du monde. Notez cependant que la taille totale de Noto, toutes langues comprises, atteint un téléchargement de plus de 130 Mo ZIP !

De façon évidente, il convient de procéder avec soin lors de l'utilisation des polices sur le Web, afin de vous assurer que la typographie n'entrave pas les performances. Heureusement, la plateforme d'Internet fournit toutes les primitives nécessaires, et le reste de ce guide est consacré à une analyse concrète de la façon de profiter du meilleure des deux mondes.

Formats de police Web

Il existe aujourd'hui quatre formats de conteneur de police utilisés sur Internet : EOT, TTF, WOFF et WOFF2. Malheureusement, malgré ce vaste choix, il n'existe pas un seul format universel qui fonctionne sur tous les navigateurs, anciens et nouveaux : EOT fonctionne sur IE uniquement, TTF est partiellement compatible avec IE, WOFF est le plus compatible, mais il n'est pas disponible sur certains anciens navigateurs et la compatibilité de WOFF 2.0 est en cours de développement pour de nombreux navigateurs.

Alors que nous reste-t-il ? Il n'existe par un format unique qui fonctionne sur tous les navigateurs, ce qui signifie que nous devons fournir plusieurs formats pour offrir une expérience cohérente :

  • Diffuser une variante WOFF 2.0 pour les navigateurs compatibles.
  • Diffuser une variante WOFF pour la majorité des navigateurs.
  • Diffuser une variante TTF pour les anciens navigateurs Android (avant 4.4).
  • Diffuser une variante EOT pour les anciens navigateurs IE (avant IE9).

Réduire la taille de police avec la compression

Une police est une collection de glyphes, et chaque glyphe est un ensemble de chemins décrivant la forme de la lettre. Chaque glyphe est différent, bien sûr. Mais ils contiennent cependant beaucoup d'informations similaires qui peuvent être compressées avec GZIP ou un logiciel de compression compatible :

  • Les formats EOT et TTF ne sont pas compressés par défaut : assurez-vous que vos serveurs sont configurés pour appliquer la compression GZIP lorsque vous utilisez ces formats.
  • Le format WOFF dispose d'une compression intégrée. Assurez-vous que votre logiciel de compression WOFF utilise des paramètres de compression optimaux.
  • Le format WOFF2 utilise un prétraitement et des algorithmes de compression personnalisés pour offrir une réduction de la taille de fichier supérieure de ~30 % par rapport aux autres formats. Consultez le rapport.

Enfin il est important de noter que certains formats contiennent des métadonnées supplémentaires, telles que des informations d'optimisation de rendu et de crénage qui peuvent être inutiles sur certaines plateformes, ce qui permet d'optimiser encore davantage la taille du fichier. Consultez votre logiciel de compression des polices pour connaître les options d'optimisation disponibles, et si vous choisissez cette voie, assurez-vous que vous disposez d'une infrastructure adaptée pour tester et proposer ces polices optimisées à chaque navigateur. Par exemple, Google Fonts possède plus de 30 variantes optimisées pour chaque police, et détecte et fournit automatiquement la variante optimale pour chaque plateforme et navigateur.

Définir une famille de polices avec @font-face

TL;DR

  • Utilisez l'algorithme d'optimisation format() pour spécifier plusieurs formats de police
  • Définissez des sous-ensembles pour les polices Unicode volumineuses pour améliorer les performances: utilisez les sous-paramètres unicode-range et fournissez un sous-paramètre de rechange manuel pour les navigateurs plus anciens
  • Réduisez le nombre de variantes de police stylistique afin d'améliorer les performances d'affichage de la page et du texte

La règle at-rule CSS @font-face nous permet de définir l'emplacement d'une ressource de police spécifique, ses caractéristiques stylistiques et les points de code Unicode pour lesquels elle doit être utilisée. Vous pouvez utiliser une combinaison de ces déclarations @font-face pour construire une 'famille de polices', que le navigateur utilise pour évaluer quelles ressources de police doivent être téléchargées et appliquées à la page actuelle. Regardons maintenant plus en détail comment cela fonctionne.

Sélection de format

Chaque déclaration @font-face fournit le nom de la famille de polices, qui joue le rôle de groupe logique de plusieurs déclarations, des propriétés de police telles que le style, le poids et l'étendue, et le descripteur src qui spécifie une liste d'emplacements classés par priorité pour la ressource de la police.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'), 
       url('/fonts/awesome.woff') format('woff'),
       url('/fonts/awesome.ttf') format('ttf'),
       url('/fonts/awesome.eot') format('eot');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'), 
       url('/fonts/awesome-i.woff') format('woff'),
       url('/fonts/awesome-i.ttf') format('ttf'),
       url('/fonts/awesome-i.eot') format('eot');
}

Tout d'abord, notez que les exemples ci-dessus définissent une seule famille Awesome Font avec deux styles (normal et italic), chacun indiquant un ensemble de ressources de police différent. Ensuite, chaque descripteur src contient une liste de variantes de ressources, classées par priorité et séparées par une virgule :

  • La directive local() nous permet de référencer, charger et utiliser les polices installées localement.
  • La directive url() nous permet de charger des polices externes, et peuvent contenir un algorithme d'optimisation format() facultatif indiquant le format de la police référencée par l'URL fournie.

Lorsque le navigateur détermine que la police est nécessaire, il consulte la liste de ressources fournir dans l'ordre indiqué et tente de charger la ressource adaptée. Considérons l'exemple ci-dessus :

  1. Le navigateur effectue la mise en page de la page et détermine quelles variantes de la police sont requises pour afficher le texte spécifié sur la page.
  2. Pour chaque police requise, le navigateur vérifie si elle est disponible localement.
  3. Si le fichier n'est pas disponible localement, il consulte le définitions externes l'une après l'autre :
  4. Si un algorithme d'optimisation de format est présent, le navigateur vérifie s'il est compatible avant de lancer le téléchargement, et s'il ne l'est pas, passe au suivant.
  5. Si aucun algorithme d'optimisation n'est présent, le navigateur télécharge la ressource.

La combinaison de directives locales et externes avec les algorithmes d'optimisation de format adaptés nous permet de spécifier tous les formats de police disponibles, et laisse le navigateur gérer le reste : le navigateur définit quelles ressources sont nécessaires et sélectionne pour nous le format le mieux adapté.

Créer des sous ensembles unicode-range

Outre les propriétés de police telles que le style, le poids et la portée, la règle @font-face nous permet de définir un ensemble de points de code Unicode compatible avec chaque ressource. Cela nous permet de partager une police Unicode volumineuse en plusieurs sous-ensembles (par exemple latin, cyrillique, grec) et de ne télécharger que les glyphes nécessaires pour afficher le texte sur une page spécifique.

Le descripteur unicode-range nous permet de spécifier une liste de valeurs de plage séparées par une virgule, chacune pouvant prendre l'une des trois formes différentes suivantes :

  • Point de code unique (par exemple, U+416)
  • Plage d'intervalle (par exemple, U+400-4ff) : indique les points de code de début et de fin d'une plage
  • Plage de caractères de remplacement (par exemple, U+4??) : les caractères ? indiquent un chiffre hexadécimal

Par exemple, nous pouvons diviser notre famille Awesome Font en sous ensembles Latin et Japonais, chacun étant téléchargé par le navigateur en fonction des besoins :

@font-face {
  font-family: `Awesome Font`;
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2'), 
       url('/fonts/awesome-l.woff') format('woff'),
       url('/fonts/awesome-l.ttf') format('ttf'),
       url('/fonts/awesome-l.eot') format('eot');
  unicode-range: U+000-5FF; /* Latin glyphs */
}

@font-face {
  font-family: `Awesome Font`;
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2'), 
       url('/fonts/awesome-jp.woff') format('woff'),
       url('/fonts/awesome-jp.ttf') format('ttf'),
       url('/fonts/awesome-jp.eot') format('eot');
  unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
}

L'utilisation de sous-ensembles unicode-range et de fichiers distincts pour chaque variante stylistique de la police nous permet de définir une famille de polices composite, à la fois plus rapide et plus efficace à télécharger : le visiteur ne télécharge que les variantes et sous-ensembles dont il a besoin, et n'est pas obligé de télécharger des sous-ensembles qu'il ne verra ou n'utilisera peut-être jamais sur la page.

Cela dit, il y a un petit inconvénient avec unicode-range : il n'est pas compatible avec tous les navigateurs, du moins pas encore. Certains navigateurs ignorent simplement l'algorithme d'optimisation unicode-range et téléchargent toutes les variantes, alors que d'autres peuvent ne pas traiter la déclaration @font-face du tout. Pour résoudre ce problème, nous devons revenir aux "sous-ensembles manuels" pour les anciens navigateurs.

Parce que les anciens navigateurs ne sont pas assez intelligents pour ne sélectionner que les sous-ensembles nécessaires et ne peuvent pas construire une police composite, nous devons revenir à l'ancienne méthode : fournir une seule ressource de police qui contient tous les sous-ensembles nécessaires, et masquer le reste pour le navigateur. Par exemple, si la page n'utilise que des caractères latins, nous pouvons supprimer les autres glyphes et diffuser ce sous-ensemble particulier comme ressource autonome.

  1. Comment pouvons-nous déterminer quels sous-ensembles sont nécessaires ?
    • Si le navigateur est compatible avec le sous-ensemble unicode-range, le navigateur sélectionne automatiquement le bon sous-ensemble. La page doit simplement fournir les fichiers du sous-ensemble et spécifier les unicode-ranges adaptés dans les règles @font-face.
    • Si le navigateur n'est pas compatible avec unicode-range, la page doit masquer tous les sous-ensembles inutiles. C'est-à-dire que le développeur doit spécifier les sous-ensembles requis.
  2. Comment pouvons-nous générer des sous-ensembles de police ?
    • Utilisez l'outil Open Source pyftsubset pour créer des sous-ensembles et optimiser vos polices.
    • Certains services des polices permettent de créer des sous-ensembles manuellement via des paramètres de requête personnalisés, que vous pouvez utiliser pour spécifier manuellement le sous-ensemble requis pour votre page. Consultez la documentation de votre fournisseur de police.

Sélection de police et synthèse

Chaque famille de police est composée de plusieurs variantes stylistiques (normal, gras, italique) et de plusieurs poids pour chaque style, chacun pouvant à son tour contenir des formes de glyphes très différentes, telles qu'un espacement ou une taille différents, ou tout simplement une forme différente.

Poids des polices

Par exemple, le diagramme ci-dessus illustre une famille de polices qui propose trois poids de caractères gras différents : 400 (normal), 700 (gras), and 900 (extra gras). Toutes les autres variantes intermédiaires, indiquées en gris, sont automatiquement mappées à la variante la plus proche par le navigateur.

Lorsqu'un poids est spécifié pour lequel il n'existe pas de face, une face avec un poids approchant est utilisée. En général, les poids gras sont mappés à des faces avec des poids plus importants, et les poids légers sont mappés à des faces avec des poids plus légers.

Algorithme de correspondance de police CSS3

Une logique similaire s'applique aux variantes italic. Le concepteur de polices contrôle les variantes qu'il produit, et nous contrôlons les variantes que nous utilisons sur la page. Puisque chaque variante est téléchargée séparément, il est conseillé d'en utiliser le moins possible ! Par exemple, nous pouvons définit deux variantes de gras pour notre famille Awesome Font :

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2'), 
       url('/fonts/awesome-l.woff') format('woff'),
       url('/fonts/awesome-l.ttf') format('ttf'),
       url('/fonts/awesome-l.eot') format('eot');
  unicode-range: U+000-5FF; /* Latin glyphs */
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2'), 
       url('/fonts/awesome-l-700.woff') format('woff'),
       url('/fonts/awesome-l-700.ttf') format('ttf'),
       url('/fonts/awesome-l-700.eot') format('eot');
  unicode-range: U+000-5FF; /* Latin glyphs */
}

L'exemple ci-dessus déclare que la famille Awesome Font est composée de deux ressources qui couvrent le même ensemble de glyphes latins (U+000-5FF), mais offrent des 'poids' différents : normal (400) et gras (700). Cependant, que se passe-t-il si l'une de nos règles CSS spécifie un poids de police différent, ou définit la propriété du style de police comme italique ?

  • Si aucune correspondance exacte n'est disponible pour la police, le navigateur la remplace par la correspondance la plus proche.
  • Si aucune correspondance n'est trouvée pour le style (si nous n'avons pas déclaré de variantes en italique dans l'exemple ci-dessus, par exemple), le navigateur synthétise sa propre variante de police.

Synthèse des polices

Les auteurs doivent également être conscients que les approches synthétisées peuvent ne pas être adaptées à des scripts comme le cyrillique, pour lequel les formes en italique ont un aspect très différent. Il est toujours préférable d'utiliser une police italique réelle plutôt que de se fier à une version synthétique.

Style de police CSS3

Les exemples ci-dessus illustrent la différence entre les résultats des polices réelles et synthétiques pour Open-Sans. Toutes les variantes synthétiques sont générées à partir d'une seule police ayant un poids de 400. Comme vous pouvez le voir, les résultats sont très différents. Les détails de la création des variantes en gras et en italique ne sont pas spécifiés. Par conséquent, les résultats varient en fonction du navigateur, et dépendent également beaucoup de la police.

Optimiser le chargement et l'affichage

TL;DR

  • Les demandes de police sont retardées jusqu'à ce que l'arborescence d'affichage soit construite, ce qui a pour conséquence un retard de l'affichage du texte'
  • L'API Font Loading nous permet de mettre en œuvre des stratégies de chargement et d'affichage des polices personnalisées qui remplacent le chargement de police inactif par défaut
  • L'intégration de police nous permet de remplacer le chargement de police inactif par défaut dans les navigateurs les plus anciens

Une police Web 'complète' avec toutes les variantes stylistiques, dont nous pouvons ne pas avoir besoin, plus tous les glyphes, qui peuvent être inutiles, peut facilement générer un téléchargement de plusieurs mégaoctets. Pour résoudre ce problème, la règle CSS @font-face est conçue spécialement pour nous permettre de diviser la famille de polices en une collection de ressources : sous-ensembles Unicode, variantes stylistiques distinctes, etc.

Avec ces déclarations, le navigateur détermine les sous-ensembles et variantes nécessaires, et télécharge l'ensemble minimal requis pour afficher le texte. Ce comportement a de nombreux avantages, mais si nous ne faisons pas attention, il peut également créer un goulot d'étranglement en termes de performances dans le chemin critique du rendu et retarder l'affichage du texte. C'est un problème qu'il vaut mieux éviter !

Polices Web et le chemin critique du rendu

Le chargement inactif de polices comporte une importante implication cachée qui peut retarder l'affichage du texte : le navigateur doit construire l'arborescence d'affichage, qui dépend des arborescences des modèles DOM et CSSOM, avant de savoir quelles ressources de police sont nécessaires pour afficher le texte. Résultat, les requêtes de police sont retardées beaucoup plus longtemps que les autres ressources critiques, et le navigateur peut être empêché d'afficher le texte jusqu'à ce que la ressource soit récupérée.

Chemin critique du rendu pour les polices

  1. Le navigateur demande le document HTML.
  2. Le navigateur commence à analyser la réponse HTML et à construire le modèle DOM.
  3. Le navigateur découvre le code CSS, JS et autres ressources, et transmet les requêtes.
  4. Le navigateur construit le modèle CSSOM une fois que tout le contenu du code CSS est reçu, et le combine avec l'arborescence du modèle DOM pour construire l'arborescence d'affichage.
  5. Les demandes de police sont envoyées une fois que l'arborescence d'affichage indique quelles variantes de la police sont nécessaires pour afficher le texte spécifié sur la page.
  6. Le navigateur effectue la mise en page et peint le contenu sur l'écran.
  7. Si la police n'est pas encore disponible, le navigateur ne peut pas afficher les pixels de texte.
  8. Une fois que la police est disponible, le navigateur peint les pixels de texte.

la 'course' entre la première peinture du contenu de la page, qui peut être effectuée peu de temps après la création de l'arborescence d'affichage, et la requête de la ressource de police est ce qui crée le 'problème de texte manquant', lorsque le navigateur affiche la page sans le texte. Le comportement réel dans cette situation varie en fonction du navigateur :

  • Safari diffère l'affichage du texte jusqu'à la fin du téléchargement de la police.
  • Chrome et Firefox diffèrent l'affichage de la police jusqu'à trois secondes, puis ils utilisent une police de rechange, et une fois que le téléchargement de la police est terminé, ils affichent à nouveau le texte avec la police téléchargée.
  • IE affiche immédiatement le texte avec la police de rechange si la police demandée n'est pas encore disponible, et l'affiche à nouveau une fois le téléchargement de la police terminé.

Chaque stratégie d'affichage a des avantages : certaines personnes trouve que l'affichage en plusieurs fois perturbant, alors que d'autres préfèrent voir un résultat immédiat et ne sont pas gênées par le nouveau chargement de la page une fois la police téléchargée. Ce n'est pas ce qui nous intéresse ici. L'important est que le chargement inactif réduit le nombre d'octets, mais peut également retarder l'affichage du texte. Voyons ensuite comment nous pouvons optimiser ce comportement.

Optimiser l'affichage de la police avec l'API Font Loading

L'API Font Loading fournit une interface d'écriture de script qui permet de définir et de manipuler les faces des polices CSS, de suivre la progression de leur téléchargement et de contourner leur comportement de chargement inactif par défaut. Par exemple, si nous sommes certains qu'une variante de police spécifique sera nécessaire, nous pouvons la définir et demander au navigateur de lancer une récupération immédiate de la ressource de police :

var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

font.load(); // don't wait for render tree, initiate immediate fetch!

font.ready().then(function() {
  // apply the font (which may rerender text and cause a page reflow)
  // once the font has finished downloading
  document.fonts.add(font);
  document.body.style.fontFamily = "Awesome Font, serif";

  // OR... by default content is hidden, and rendered once font is available
  var content = document.getElementById("content");
  content.style.visibility = "visible";

  // OR... apply own render strategy here... 
});

De plus, comme nous pouvons contrôler la méthode du statut de la police (via la directive check()) et suivre la progression de son téléchargement, nous pouvons également définir une stratégie personnalisée pour afficher le texte sur nos pages :

  • Nous pouvons retarder l'affichage de l'ensemble du texte jusqu'à ce que la police soit disponible.
  • Nous pouvons mettre en œuvre un délai d'expiration personnalisé pour chaque police.
  • Nous pouvons utiliser la police de rechange pour débloquer l'affichage et injecter un nouveau style utilisant la police souhaitée lorsqu'elle est disponible.

Encore mieux, nous pouvons aussi mélanger toutes les stratégies ci-dessus pour les différents contenus sur la page. Nous pouvons différer l'affichage du texte pour certaines sections jusqu'à ce que la police soit disponible, utiliser une police de rechange, puis afficher à nouveau le texte lorsque la police est téléchargée, définir des délais d'expiration différents, etc.

Optimiser l'affichage des polices avec l'intégration

Une stratégie alternative simple à l'utilisation de l'API Font Loading pour éliminer le 'problème de texte manquant' consiste à intégrer le contenu des polices dans une feuille de style CSS :

  • Les feuilles de style CSS avec requêtes média correspondantes sont automatiquement téléchargées par le navigateur avec une priorité élevée, car elles ont nécessaires pour construire le modèle CSSOM.
  • L'intégration des données des polices dans une feuille de style CSS force le navigateur à télécharger la police avec une priorité élevée et sans attendre l'arborescence d'affichage. Cela permet de contourner manuellement le comportement de chargement inactif par défaut.

La stratégie d'intégration n'est pas aussi flexible, et ne nous permet pas de définir des délais d'expiration ou des stratégies d'affichage personnalisés pour les différents contenus, mais c'est une solution simple et fiable qui fonctionne sur tous les navigateurs. Pour obtenir les meilleurs résultats, séparez les polices intégrées en plusieurs feuilles de styles indépendantes et diffusez-les avec une directive max-age longue. Ainsi, lorsque vous mettez à jour votre code CSS, vous ne forcez pas vos visiteurs à télécharger à nouveau les polices.

Optimiser la réutilisation des polices avec la mise en cache HTTP

Les ressources de polices sont généralement des ressources statiques qui ne sont pas mises à jour fréquemment. Elles sont donc idéalement adaptées à une expiration max-age longue. Assurez-vous de spécifier à la fois un en-tête ETag conditionnel et des règles Cache-Control optimales pour toutes les ressources de polices.

Il est inutile de stocker les polices sur un dispositif de stockage local ou via d'autres mécanismes, puisque chacune a ses inconvénients en termes de performances. Le cache HTTP du navigateur, associée à l'API Font Loading ou à la bibliothèque webfontloader, offre le meilleur et le plus fiable mécanisme pour fournir les ressources de police au navigateur.

Liste de contrôle de l'optimisation

Contrairement à une croyance répandue, l'utilisation de polices Web ne retarde pas nécessairement l'affichage de la page et n'a pas nécessairement un impact négatif sur les autres statistiques de performances. Une utilisation bien optimisée des polices peut offrir une expérience utilisateur largement améliorée : bonne présentation de la marque, lisibilité, facilité d'utilisation et recherche facilitées, tout en offrant une solution en plusieurs résolutions et à l'échelle qui s'adapte bien à tous les formats d'écran et toutes les résolutions. N'ayez pas peur d'utiliser les polices Web !

Ceci dit, une mise en œuvre non informée peut provoquer des téléchargements importantes et des retards inutiles. C'est pour cela que nous devons ressortir notre kit d'optimisation et aider le navigateur en optimisant les éléments de police eux-mêmes, ainsi que la façon dont ils sont récupérés et utilisés sur nos pages.

  1. Auditez et surveillez votre utilisation des polices : n'utilisez pas un trop grand nombre de polices sur vos pages, et pour chaque police, réduisez au minimum le nombre de variantes utilisées. Cela permettra d'offrir une expérience plus cohérente et plus rapide à vos utilisateurs.
  2. Organisez vos ressources de polices en sous-ensembles : de nombreuses polices peuvent être organisées en sous-ensembles, ou divisées en plusieurs unicode-ranges, afin de ne fournir que les glyphes nécessaires à une page spécifique. Cela permet de réduire la taille des fichiers et d'améliorer la vitesse de téléchargement de la ressource. Cependant, lorsque vous définissez des sous-ensembles, pensez à les optimiser pour la réutilisation des polices, pour éviter par exemple de télécharger des ensembles de caractères différents, mais se chevauchant sur chaque page. Une méthode efficace consiste à créer des sous-ensembles en fonction du script : latin, cyrillique, etc.
  3. Fournissez des formats de police optimisés à chaque navigateur : chaque police doit être fournie dans les formats WOFF2, WOFF, EOT et TTF. Assurez-vous d'appliquer la compression GZIP aux formats EOT et TTF, puisqu'ils ne sont pas compressés par défaut.
  4. Spécifiez les règles de revalidation et de mise en cache optimale : les polices sont des ressources statiques qui ne sont pas mises à jour souvent. Assurez-vous que vos serveurs fournissent un horodatage max-age long et un jeton de revalidation, pour permettre une réutilisation efficace des polices sur les différentes pages.
  5. Utilisez l'API Font Loading pour optimiser le chemin critique du rendu : le comportement de chargement inactif par défaut peut retarder l'affichage du texte. L'API Font Loading nous permet de contourner ce comportement pour des polices spécifiques, et de spécifier des stratégies d'affichage et d'expiration du délai personnalisées pour les différents contenus sur la page. Pour les anciens navigateurs qui ne sont pas compatibles ave l'API, vous pouvez utiliser la bibliothèque JavaScript webfontloader ou la stratégie d'intégration de CSS.