👲🏻 🦆 🔎 Sur l'impact positif des polices variables sur les performances des projets Web 🌺 👩🏽‍🎨 🏠

Lorsqu'ils pensent aux polices Web et à leur impact sur les performances du site, ils prêtent souvent attention aux trois indicateurs suivants:

Nombre de demandes de téléchargement de fichiers de polices.
Tailles des fichiers de polices.
Le temps jusqu'au premier rendu de page.

Je voulais savoir comment l'utilisation de polices variables affecte ces indicateurs. Par conséquent, je les ai comparés avec des polices standard. C'est ce que j'ai fait.

Réduisez le nombre de demandes de téléchargement de fichiers de polices

Il existe plusieurs façons de réduire le nombre de demandes de téléchargement de polices. Par exemple, il s'agit de la mise en cache, à l'aide de CDN, réduisant le nombre de variantes de polices utilisées. Je ne parlerai pas ici de l'utilisation de CDN ou de la mise en cache, car c'est, en général, la même chose lorsque vous travaillez avec des polices normales, que lorsque vous travaillez avec des polices variables. Au lieu de cela, je parlerai de la réduction du nombre d'options de style de police.

Dans le monde des polices standard, la réduction du nombre d'options de polices utilisées réduit le nombre de demandes de téléchargement de polices. Cela se produit car l'utilisation de moins de styles signifie que moins de fichiers de polices sont nécessaires. Habituellement, pour cela, vous devez planifier la sélection des polices et trouver un équilibre entre la conception et les performances, en décidant si la conception plus attrayante et «lourde» vaut l'impact qu'elle a sur les performances.

L'utilisation de polices variables, du fait qu'elles sont capables de stocker différentes options de police dans un fichier, signifie réduire le nombre de demandes de téléchargement de fichiers de police sans avoir à parler avec le concepteur pour réduire le nombre d'options de police utilisées dans le projet.

L'utilisation de polices variables entraîne une réduction du nombre de demandes uniquement en raison des caractéristiques de périphérique des fichiers de ces polices. Mais si le fichier contient toutes les informations sur les différentes options de police, il convient de se demander comment cela affecte la taille du fichier.

Réduction de la taille des fichiers de police

Il existe de nombreuses façons de réduire la taille des fichiers de police. Habituellement, la première étape de ce processus consiste à choisir le format le plus efficace pour le stockage des polices Web. Par exemple - WOFF2.

▍Trouver un point de référence

J'ai mené une étude de la taille des différents fichiers de polices. En particulier, en utilisant la police Source Sans Pro d'Adobe. J'ai choisi cette police particulière parce que son code est hébergé sur GitHub et parce qu'elle est open source.

Comparaison des tailles des fichiers OTF de la police Source Sans Pro - un fichier qui stocke une police d'une saturation et un fichier qui stocke une police variable

Comme point de référence, j'ai pris un fichier qui décrit une police d'une saturation de la version standard de Source Sans Pro. Sa taille au format OTF est de 248 Ko. La taille du fichier OTF à police variable est de 405 Ko. Cela signifie que la taille du fichier de la police variable est 73% plus grande que la taille du fichier contenant une version de la Source Sans Pro standard.

Mais compte tenu du fait que le fichier de police variable contient toutes les informations nécessaires pour les variantes de police avec n'importe quelle saturation, la taille d'un ensemble de fichiers de police standard, de capacités similaires, sera d'environ 1170 Ko.

Et cela représente près de 3 fois la taille du fichier de police variable.

Même si vous avez besoin d'une police dans les options de saturation normale et en gras, les deux fichiers nécessaires pour stocker ces options de police se révéleront être plus d'un fichier de police variable.

▍Comparaison des formats OTF et WOFF2

Les fichiers OTF, par rapport aux formats compressés WOFF et WOFF2, s'avèrent assez volumineux.

Un fichier avec une option de police: OTF - 234 Ko, WOFF2 - 111 Ko. Fichier de polices variables: OTF - 405 Ko, WOFF2 - 112 Ko.

Si vous comparez les tailles de fichier de différents formats, il s'avère que vous pouvez réduire considérablement la taille du fichier en utilisant simplement le format WOFF2.

Il m'a semblé intéressant de savoir combien d'économies sont réalisées en utilisant le format WOFF2 lors du stockage de données de police variables. Le fait que la taille du fichier soit passée de 405 Ko à 112 Ko conduit au fait que le fichier de police variable est presque de la même taille que le fichier qui ne stocke qu'une seule version du Source Sans Pro standard.

Cela s'est avéré être une surprise pour moi, et je suis absolument sûr qu'une telle économie ne sera pas possible dans tous les cas. Mais il est très agréable de voir à quel point la compression WOFF2 peut être efficace lorsqu'elle est appliquée à une police variable.

▍ Réduction de la taille des fichiers à l'aide de sous-ensembles de polices

Lorsque vous travaillez avec des polices standard, il existe un autre moyen de réduire la taille des fichiers. Elle consiste à utiliser des sous-ensembles de polices. Cela vous permet de vous débarrasser des caractères inutiles ou de réduire le jeu de caractères de police, par exemple, en ne laissant que ceux qui sont nécessaires pour afficher les textes tapés en latin.

La création de sous-ensembles de polices comporte certains risques. L'utilisation de sous-ensembles peut entraîner l'affichage de certaines parties du texte à l'aide d'une police de secours. Cela peut se produire si les caractères nécessaires ont été accidentellement supprimés de la police utilisée.

Vous pouvez créer des sous-ensembles de polices à l'aide d'outils spéciaux - comme glyphhanger. En particulier, un bon guide sur GitHub a été préparé pour cet outil. Il fonctionne avec des polices standard et variables.

J'ai traité les versions standard et variables de Source Sans Pro avec glyphhanger et certains caractères minuscules et majuscules de l'alphabet latin, ainsi que des chiffres et des caractères spéciaux comme des points d'exclamation.

Utilisation de sous-ensembles de polices pour réduire la taille des fichiers

Cette opération nous a permis de réduire la taille d'un fichier contenant une police d'une saturation de 111 Ko à 16 Ko (économiser 85% est très bien). Dans le cas d'une police variable, la taille du fichier est passée de 112 Ko à 27 Ko (75% est un niveau d'économie acceptable).

Encore une fois, ces résultats m'ont surpris. Je m'attendais à ce qu'un fichier de police variable soit plus grand. Compte tenu du fait que dans des situations typiques, ils utilisent la même police de saturation normale et en gras, il s'avère qu'un fichier de police variable de 27 Ko est plus petit que deux fichiers, chacun contenant des informations sur la même police de saturations différentes. En conséquence, je pense que cette approche permet de très bonnes économies.

Certes, il est important de noter que seules mes expériences avec la police Source Sans Pro sont décrites ici. Sur d'autres polices, les mêmes méthodes peuvent conduire à d'autres résultats moins bons. L'utilisation d'une police variable peut ne pas produire le même niveau de réduction de taille de fichier. Par conséquent, je vous recommande de faire preuve de prudence lors de l'utilisation de sous-ensembles de polices. À savoir, avant d'appliquer cette technique d'optimisation dans la pratique, il vaut bien tout tester, l'évaluer et comprendre ce qui est le mieux pour un projet particulier.

▍ Considérations supplémentaires concernant la taille des fichiers

Certaines considérations supplémentaires à prendre en compte lorsque l'on parle de la taille des fichiers de police sont que le téléchargement d'un gros fichier prendra plus de temps que le téléchargement de plusieurs fichiers plus petits.

Par exemple, lorsque vous utilisez des polices standard, les fichiers qui stockent des informations sur leur type de saturation normale sont généralement plus petits que les autres. En conséquence, le corps du document peut être affiché rapidement, immédiatement après le téléchargement du petit fichier correspondant. Et plus tard, après avoir chargé la version en gras de la police, vous pouvez l'appliquer. L'avantage de cette approche est qu'elle vous permet d'afficher du texte sur la page plus rapidement qu'avec une police variable. Le point ici est que les fichiers de police standard individuels sont plus petits que le fichier de police variable.

Lorsque vous utilisez une police variable, vous devez attendre le chargement d'un seul gros fichier avant d'afficher le texte. Cela peut augmenter le temps nécessaire pour préparer une page pour le travail. Cependant, la nécessité d'attendre toutes les données de police avant d'afficher le texte vous permet d'éviter le problème que les polices téléchargées progressivement affectent le texte déjà affiché. De plus, puisque lors de l'utilisation de polices variables, tous les types de polices sont chargés en même temps, nous n'avons pas à forcer le navigateur à redessiner la page chaque fois qu'une nouvelle version de la police est chargée.

Par conséquent, si nous parlons de la taille des fichiers de polices, la conclusion que l'on peut tirer de l'utilisation de polices variables dépend de la situation spécifique. À savoir - des caractéristiques du projet, des exigences de conception, des polices utilisées.

Réduisez le temps de premier rendu

Parlons maintenant de la réduction du temps avant le rendu de la première page. Plus ce temps est court, mieux c'est pour les performances. C'est assez évident. De plus, il faut garder à l'esprit que, comme déjà mentionné, le seul gros fichier de police variable peut se charger plus lentement que quelques petits fichiers de police. Mais même un léger retard dans la sortie de la page, le seul "flash de texte invisible" (Flash de texte invisible, FOIT) peut conduire au fait que l'utilisateur aura l'impression que la page se charge plus lentement qu'il ne se produit réellement. Par conséquent, je pense qu'au lieu d'exposer la page au risque FOIT, nous devrions essayer de limiter ce problème à ce qu'on appelle le «Flash de texte sans style» (FOUT).

▍FOIT

Voilà à quoi ressemble FOIT.

Un exemple de la manifestation visuelle de FOIT

«Flash de texte invisible» se produit lorsque nous bloquons ou retardons la sortie du texte jusqu'à ce que la police souhaitée soit chargée. Par conséquent, avant de charger la police, la page sera vierge.

OUTFOUT

Et voici un exemple de FOUT.

Un exemple de la manifestation visuelle de FOUT

«Flash de texte non stylisé» se produit si le texte est d'abord affiché à l'aide d'une police de sauvegarde, puis lorsque la police souhaitée est disponible, il y bascule ou remplace la police précédemment utilisée.

Je pense qu'il vaut mieux que l'utilisateur rencontre FOUT plutôt que l'impossibilité de lire le contenu de la page. Par conséquent, il est préférable, d’une part, d’envisager un scénario avec l’apparition de FOUT devant l’utilisateur, et d’autre part, d’essayer de le faire affecter le moins possible l’utilisation du projet.

La façon la plus simple d'implémenter le mécanisme FOUT dans un projet est d'utiliser une propriétéfont-displayavec une valeurswap. Cela permettra au texte d'être affiché en utilisant la police de secours décrite dans le jeu de polices. Ensuite, après avoir chargé la police souhaitée, il remplacera la police de sauvegarde. La propriété font-displaypeut prendre d'autres valeurs, et je vous recommande de les examiner, mais pour implémenter le comportement FOUT des textes, la valeur swapest un bon point de départ.

font-display: swap;

L'un des problèmes avec FOUT est que lors du remplacement d'une police, vous pouvez souvent voir le texte réorganisé sur la page pour adapter le contenu à une police dont les paramètres sont «mesurés» différemment des paramètres d'une police précédemment utilisée.

Lorsque vous travaillez avec des polices standard, nous pouvons modifier des propriétés telles que line-height, font-sizeet letter-spacingce faisant, afin d'adapter le texte pour remplacer la police et réduire les changements de contenu qui se produisent pendant ce processus. Vous pouvez le faire avec le fantastique outil de correspondance des styles de police . Il a été créé par Monica Dinkulescu , qui s'est inspirée de cet excellent article d'Helen Holmes (sérieusement - un merveilleux article - je recommande de le lire).

J'espère qu'avec le temps, les polices variables bénéficieront d'un support plus large pour les systèmes d'exploitation. Cela vous permettra de faciliter la modification des dispositions en utilisant la police de variable système comme sauvegarde.

Police variable de sauvegarde

Imaginez ce qui se passerait si nous avions une police système qui prend en charge la capacité de contrôler sa saturation, sa largeur et sa taille optique. Cela permettrait de modifier les propriétés d'une telle police pour l'adapter aux caractéristiques des polices spéciales que nous utilisons. Si vous combinez cela avec des méthodes existantes pour définir des propriétés telles queline-heightoufont-size, cela nous donnera l'occasion de créer des transitions presque imperceptibles entre les deux polices. Cela signifie que les utilisateurs connaîtront des manifestations moins visibles de FOUT et que les navigateurs, en raison de modifications plus petites de la mise en page lors du changement de police, devront faire moins de travail pour redessiner les pages.

Ce serait tout simplement merveilleux, et j'espère qu'il en sera ainsi.

Sommaire

L'utilisation de polices variables réduit la taille globale des données de police téléchargées par le navigateur. Le fait qu'une police variable soit utilisée au lieu de la police habituelle sur la page signifie automatiquement que pour préparer la page pour la sortie, vous devrez effectuer moins de requêtes.

Même si la taille des fichiers de polices variables peut vous sembler assez volumineuse, faites attention au fait qu'en utilisant de telles polices, vous pouvez appliquer d'autres techniques d'optimisation. À savoir, nous parlons de formats de police avancés comme WOFF2, de la formation de sous-ensembles de polices, de l'utilisation de la propriété font-display: swap. Tout cela suggère que, en utilisant des polices variables, nous pouvons obtenir une réduction des données de police et une augmentation significative de la capacité de styliser les pages.

Si nous pouvons gérer certains des défis de performance existants, cela nous permettra d'accorder plus d'attention à la conception. Autrement dit, vous n'avez plus à rechercher de compromis entre la conception et les performances des pages.

Dans le domaine de l'utilisation de polices variables, nous avons la possibilité de comprendre comment cette technologie peut aider à créer une expérience utilisateur plus positive en travaillant avec nos projets. Étant donné que l'utilisation d'une police variable signifie la possibilité d'utiliser de nombreuses options de police, nous pouvons créer des projets qui peuvent s'adapter de manière flexible aux fonctionnalités des appareils utilisés pour travailler avec eux. Cela vous permet de créer un texte accessible et lisible sans vous soucier du fait que des fichiers de police réguliers supplémentaires affecteront gravement la taille des données nécessaires pour garantir le fonctionnement des pages.

Chers lecteurs! Utilisez-vous des polices variables dans vos projets?

Sur l'impact positif des polices variables sur les performances des projets Web