5 étapes pour accélérer les polices Web

Personnalisez vos fichiers de polices et optimisez votre stratégie de chargement pour une vitesse maximale + un FOUT minimum







Dans un article précédent, j'ai écrit sur les polices système et leurs avantages par rapport aux polices Web. J'ai soutenu l'approche «les polices système d'abord», affirmant que par rapport aux polices système, les polices Web (a) peuvent avoir un impact négatif sur les performances, (b) utiliser plus de données et (c) augmenter la consommation d'énergie de votre site. Mais un site Web sans polices Web serait beaucoup moins intéressant - peut-être qu'en utilisant les polices Web de manière plus responsable, nous pouvons obtenir tous leurs avantages tout en minimisant les inconvénients.



Dans la première partie de ce didacticiel, je couvrirai cinq méthodes pour améliorer les performances des polices Web qui, à mon avis, auront le plus d'impact avec le moins d'effort.



Merci à Zach Leserman, qui a beaucoup écrit sur les polices Web sur son site. Tous ses articles valent la peine d'être lus, en particulier la liste de contrôle de chargement des polices et un guide complet des stratégies de chargement des polices (qui est vraiment très complet), qui se sont tous deux révélés très utiles pendant que j'écrivais cet article.

, , :



(typeface) — , . ( , , ). Helvetica — . .



(font) — . , , , , «Helvetica Bold Italic 10 ». , ( , ).

1.

Web Open Font Format 2.0 (woff2) est le format de fichier le plus petit et le plus efficace pour les polices Web au moment de la rédaction. Lorsque vous utilisez @ font-face at-rules dans CSS, assurez-vous que la police woff2 est rendue avant les formats de fichier plus anciens et moins efficaces comme ttf. Le navigateur utilisera la première police de la liste qu'il comprend, même s'il s'agit d'un fichier plus volumineux.

@font-face {
  font-family: 'Typefesse';
  src: url('typefesse.woff2') format('woff2'),
    url('typefesse.woff') format('woff');
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Si vous n'avez pas besoin de l'assistance IE8, vous n'avez besoin de rien d'autre que woff2 et woff. Si vous n'avez pas besoin du support IE11, vous n'avez besoin que de woff2.



Si vous ne disposez que d'un fichier ttf (par exemple, si vous avez téléchargé une police à partir de Google Fonts), vous devrez le convertir à l'aide d'un outil tel que Online Font Converter . Si vous n'utilisez pas une police entièrement open source, vérifiez d'abord si la licence le permet.

2. Utilisez le descripteur font-display

Il y a deux acronymes que vous verrez souvent lorsque vous commencerez à comprendre les stratégies de chargement des polices:

1. Flash of Invisible Text (foit) est la période pendant laquelle le texte est invisible avant que le navigateur ne charge la police Web.
2. Flash of Unstyled Text (fout) est la période pendant laquelle le texte est rendu à l'aide de la police de secours avant que le navigateur ne charge la police Web.

Rien de ce qui précède n'est parfait, mais si vous utilisez des polices Web, cela se produira probablement la première fois qu'un utilisateur visite votre site Web (avec un peu de chance, lorsque la deuxième page se chargera, le navigateur pourra servir les polices à partir de son cache). Si nous prenons notre police de caractères at-rule de la précédente et ajoutons un descripteur d'affichage de police , nous pouvons dire au navigateur lequel nous préférons.

@font-face {
  font-family: 'Typefesse';
  src: url('typefesse.woff2') format('woff2'),
    url('typefesse.woff') format('woff');
  font-display: swap;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Il existe cinq valeurs d'affichage des polices possibles: premièrement, auto est le comportement par défaut du navigateur (la plupart des navigateurs préfèrent foit). En voici quatre autres:

échanger

swap indique au navigateur que nous voulons que le texte soit affiché en utilisant la police de secours jusqu'à ce que la police Web soit chargée (c'est-à-dire que nous préférerions utiliser fout). Que cela prenne 5 secondes ou 5 minutes, dès que la police est téléchargée, elle sera remplacée. C'est une bonne base car cela permet aux visiteurs du site Web de commencer à lire votre contenu immédiatement, mais assurez-vous de sélectionner une option similaire (nous: dans la deuxième partie de cette série d'articles, nous couvrirons les options de secours) pour éviter les grands désalignements de mise en page lorsque changer les polices.

bloquer

Si nous préférons que le navigateur masque le texte jusqu'à ce que la police Web soit chargée (c'est-à-dire que nous préférerions foit), nous pouvons utiliser font-display: block. Cependant, le texte ne restera pas invisible pour toujours: si la police ne se charge pas pendant un certain temps (généralement trois secondes), le navigateur utilisera toujours la police de secours, en la remplaçant par la police Web après son chargement.



Si vous pensez que c'est la meilleure option parce que vous pensez que l'image est mauvaise, n'oubliez pas que lorsque le texte est invisible, votre page ne peut pas être utilisée et votre contenu ne peut pas être lu.

se retirer

le fallback est similaire au swap avec deux différences:

1. Cela commence par une période de "bloc" incroyablement petite (~ 100 ms) lorsque le texte est masqué, après quoi la police de remplacement est affichée.
2. Si la police Web ne se charge pas pendant une courte période (~ 3 s), la police de remplacement sera utilisée jusqu'à la fin de la page.

Si vous ne vous inquiétez pas de savoir si un utilisateur voit votre police Web la première fois qu'il visite votre site (il ne s'en soucie probablement pas beaucoup), la solution de repli est un bon choix.

optionnel

optionnel est similaire à la solution de secours, mais donne à la police un temps très court (~ 100 ms) pour se charger, après quoi elle ne sera pas remplacée. Cependant, il dispose d'une fonctionnalité supplémentaire qui permet au navigateur de décider d'annuler la demande de police si la connexion est trop lente pour charger la police.

foit/fout — , . ( . - Mitt Romney). JavaScript ( ).

3.

Pour minimiser la période foit / fout, nous voulons charger nos fichiers de polices Web le plus rapidement possible. En utilisant link rel = "preload"



notre html head



, nous pouvons dire au navigateur de commencer à récupérer nos polices plus tôt. Ajoutez la balise suivante en haut de votre head



(avant tout css) en définissant un attribut href



sur l'url de votre fichier de police:



link rel="preload" href="/typefesse.woff2" as="font" type="font/woff2" crossorigin







En ajoutant cette balise, nous disons au navigateur de commencer à télécharger notre fichier de police dès maintenant, alors que normalement ce ne sera pas le cas commencez jusqu'à ce qu'il trouve le lien vers une police spécifique dans votre CSS et ne trouve pas l'élément dom qui l'utilise.



Les navigateurs sont généralement assez intelligents pour charger les polices uniquement lorsque cela est nécessaire sur la page en cours. L'utilisation du préchargement remplace ce comportement, forçant le navigateur à télécharger la police même lorsqu'elle n'est pas utilisée. Pour cette raison, préchargez toujours un seul format de chaque police (woff2, si vous en avez un).



Plus vous préchargez de polices, moins vous bénéficierez de cette méthode, alors préférez les polices qui apparaissent «au-dessus du pli» (les 100 premiers vh que l'utilisateur voit sans défilement).



Vous pouvez en savoir plus sur le préchargement dans cet article de Yoav Weiss: Preload: What Is Good For?

4. Récupérez les fichiers de polices

En créant un sous-ensemble de la police, nous pouvons générer un nouveau fichier de police plus petit qui n'inclut que les glyphes (un glyphe est un seul caractère ou caractère) dont nous avons besoin. J'ai utilisé l' outil Font Subsetter dans Everything Fonts pour correspondre à la police Space Grotesk Bold utilisée pour les en-têtes de ce site afin d'inclure uniquement les caractères latins de base. Cela a réduit la taille de fichier de la version woff2 de 30 Ko à 7 Ko.



Le sous-ensemble est un outil puissant, mais il présente certains inconvénients potentiels. Si vous créez un site Web qui affiche du contenu généré par l'utilisateur, des noms de personnes ou des noms de lieux, vous devez utiliser des caractères autres que les 26 lettres standard, 10 chiffres et quelques caractères courants dans l'écriture anglaise.



Au minimum, vous devriez penser aux signes diacritiques: les glyphes qui apparaissent au-dessus ou en dessous d'un caractère qui modifient sa prononciation. Ils sont courants dans des langues comme le français, l'espagnol, le vietnamien et le texte translittéré (ou «romanisé») d'alphabets tels que le grec ou l'hébreu; ils apparaissent également dans des mots empruntés (mots tirés d'une autre langue).



Si vous faites un sous-ensemble excessif, vous pourriez même vous retrouver avec une combinaison de polices en un seul mot.







Si je voulais écrire sur le bricoleur, je devrais peut-être personnaliser le fichier de sous-ensemble de polices que j'utilise pour les en-têtes. Notez que les formes «â» et «é» (avec des accents) ne correspondent pas aux versions non accentuées de ces lettres.



Heureusement, vous n'êtes pas obligé de vérifier manuellement chaque page de votre site pour différents caractères. GlyphhangerEst un outil de ligne de commande qui fait deux choses: premièrement, il explore vos pages Web et détermine les plages de caractères Unicode utilisées (ces plages correspondent au script ou à la langue, par exemple Basic Latin, Cyrillic, Thai); deuxièmement, il s'agit d'un sous-ensemble du fichier de police, produisant une nouvelle version contenant uniquement les caractères des plages spécifiées.



Démarrer avec Glyphhanger peut être un peu délicat (vous avez besoin de python et pip) - Sarah Sueidan explique comment elle l'a fait dans cet article: Comment j'ai configuré Glyphhanger sur macOS pour optimiser et convertir les fichiers de polices pour le Web .



Comme pour le changement de format de fichier, assurez-vous que votre licence de police autorise un sous-ensemble de fichiers.

5. Placez les polices vous-même

Ce n'est pas une règle universelle, comme la plupart des autres. Il y a deux bonnes raisons pour lesquelles vous pourriez vouloir utiliser un service hébergé comme Google Fonts ou Adobe Fonts :



C'est souvent le moyen le moins cher ou le seul moyen légal d'utiliser certaines polices sur Internet. Si vous n'avez pas d'autre choix que d'utiliser l'un de ces services, voyez s'il prend en charge le sous-ensemble ou l'ajout de descripteurs d'affichage de police.

Ils sont pratiques: copier et coller une ligne de html dans votre site sera plus rapide que l'alternative: télécharger les fichiers de polices, convertir et sous-ensemble des fichiers de polices, puis écrire @ font-face at-rules pour chaque épaisseur et style.



Si vous utilisez toujours Google Fonts uniquement pour des raisons de commodité, jetez un œil à google-webfonts-helper . Cet outil vous permet de créer votre propre package de polices Web à partir du jeu de polices google complet, de définir les poids et les jeux de caractères souhaités, puis de vous fournir un téléchargement contenant tous les fichiers css et polices (dans les derniers formats) dont vous avez besoin.

Mythe n ° 1 à propos des polices Web Vous avez

peut-être entendu l'affirmation (qui est répétée dans Google Fonts) selon laquelle si un utilisateur a déjà visité un site qui télécharge les mêmes polices à partir de la même source, le navigateur n'a pas besoin de les télécharger à nouveau car elles sont mis en cache ...



Une fois que cela a peut-être été vrai, mais je ne peux pas trouver de preuve qu'il s'agit d'un phénomène assez courant qui affecterait quelque chose. En fait, Google Chrome et Safari interdisent explicitement le partage de ressources tierces mises en cache entre les domaines en raison de problèmes de suivi.

Voici une liste de bonnes raisons de ne pas utiliser le service hébergé et d'héberger les polices vous-même:

Performance

La recherche d'un domaine prend du temps, vous pouvez utiliser des conseils de ressources pour faciliter la situation, mais les performances sont toujours dégradées en ouvrant une connexion TCP à un nouveau domaine. C'est peut-être la raison pour laquelle certains des sites de Google (y compris web.dev ) utilisent désormais des polices natives au lieu des polices Google.

Confidentialité

Les services de polices Web payants tels qu'Adobe Fonts doivent déterminer les pages vues pour les calculs, mais ils peuvent collecter plus de données que ce qui est strictement nécessaire. Si vous avez le choix, chargez les polices en utilisant css ( link rel = "stylesheet"



) au lieu de JavaScript ( script



) pour minimiser la quantité de données qu'un tiers pourrait collecter sur vos utilisateurs.



Il semble que Google Fonts ne collecte pas autant de visiteurs du site Web que les adresses IP et les chaînes d'agent utilisateur, mais Google n'est pas complètement désintéressé en fournissant le service gratuitement. Chacune des cinquante mille milliards de pages vues utilisant les polices Google est un point de données que Google n'aurait pas si les sites Web utilisaient leurs propres polices à la place.

Contrôler

Avec les polices hors ligne, vous avez un contrôle total sur la façon dont vous chargez les polices, ce qui vous permet de servir des sous-ensembles personnalisés, de définir les options d'affichage des polices et de spécifier la durée pendant laquelle le navigateur doit mettre en cache les fichiers de polices.

Fiabilité

Les services tiers peuvent ralentir, se déconnecter ou cesser complètement de fonctionner . Avec les polices auto-hébergées, pendant que votre site Web est opérationnel, vos polices seront disponibles.

Conclusion

Chacune de ces étapes peut avoir des avantages en soi, mais les utiliser ensemble peut conduire à de grandes améliorations. Si vous décidez de suivre certaines des étapes de cet article, essayez d'utiliser un outil tel que Lighthouse ou Web Page Test avant et après avoir apporté vos modifications pour voir l'effet de chaque modification individuelle.



Dans la deuxième partie, nous examinerons certaines des techniques les plus avancées, notamment les stratégies de chargement de polices JavaScript et les polices variables. Nous verrons également l'importance de choisir les bonnes polices de remplacement et d'introduire un nouvel acronyme - FOFT, Flash Of Faux Text.

---

Afin de ne pas perdre mes découvertes de conception dans des tonnes de signets sur mon ordinateur, j'ai créé la chaîne Drin Design Telegram . Tous les matériaux sympas et utiles (tutoriels, articles, liens vers des comptes de mecs sympas) que je trouve pour moi-même, je posterai là-bas. Aide-toi.