Après l’article expliquant comment optimiser les images, un excellent article sur Smashingmagazine.com nous explique en détail comment optimiser les Google fonts pour la performance web.
Nous allons donc ici reprendre pour les phobiques de la langue de Shakespeare, les principaux points qu’il est bon de connaitre quand on cherche à gagner en web performance. C’est à dire comment nous pouvons charger ces polices de la manière la plus optimale possible.
Google Font kézako ?
Google fonts vs polices système
La collection de Google font donne accès à plus de 900 polices que vous pouvez utiliser gratuitement sur vos sites. Sans Google Fonts, vous seriez limité à la poignée de “polices système” installées sur l’appareil de votre utilisateur. Les polices système dîtes “Web Safe Fonts” sont les polices les plus couramment pré-installées sur les systèmes d’exploitation. Par exemple, Arial et Georgia sont fournis avec des distributions Windows, macOS et Linux.
L’avantage du police système c’est qu’elle n’a pas besoin d’être téléchargée par le navigateur. Dès lors une police Google a un poids que le navigateur Web doit télécharger avant de pouvoir les afficher. Vos utilisateurs pourraient attendre jusqu’à quelques secondes avant d’afficher un texte.
Les polices Google sont déjà optimisées
L’API Google Fonts ne se contente pas de fournir les fichiers de polices au navigateur, elle effectue une vérification intelligente pour voir comment elle peut livrer les fichiers dans le format le plus optimisé.
Lorsque le navigateur fait une demande à l’API, Google vérifie d’abord quels types de fichiers sont pris en charge par le navigateur.
- J’utilise la dernière version de Chrome, qui comme la plupart des navigateurs supporte WOFF2, donc la police m’est servie dans ce format hautement compressé.
- Si je change mon user-agent pour Internet Explorer 11, je reçois la police au format WOFF à la place.
- Enfin, si je change mon agent utilisateur pour IE8, j’obtiens la police au format EOT (Embedded OpenType).
Implémentation
Pour implémenter les polices Google, il suffit d’intégrer un <link> dans le <head> de vos pages pointant vers https://fonts.googleapis.com/css puis le ou les paramètres de la police. Ce qui donne :
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Techniques avancées pour optimiser les Google fonts
Même si Google investit beaucoup dans l’optimisation de la livraison des fichiers de polices, il existe encore des optimisations que vous pouvez faire dans votre implémentation pour réduire l’impact sur les temps de chargement, surtout quand on connait l’importance du temps de chargement d’une page web.
1. Limiter les familles de polices
L’optimisation la plus simple consiste à utiliser moins de familles de polices possibles. Chaque police peut ajouter jusqu’à 400 Ko au poids de votre page, le multiplier par quelques familles de polices différentes et soudain vos polices pèsent plus que votre page entière.
Donc point de salut, sans contrôle du poids, pour optimiser vos google fonts, vous risquez de grandes déconvenues.
2. Exclure les variantes
Revendiquant une haute qualité, les polices Google contiennent la gamme complète des variantes de polices :
- Mince (100)
- Italique fin (100i)
- Lumière (300)
- Italique léger (300i)
- Régulier (400)
- Italique régulier (400i)
- Moyen (600)
- Italique moyen (600i)
- Gras (700)
- Italique gras (700i)
- Noir (800)
- Noir Italique (800i)
C’est parfait pour les cas d’utilisation avancés qui peuvent nécessiter les 12 variantes, mais pour un site web régulier, cela signifie télécharger les 12 variantes alors que vous n’en aurez peut-être besoin que de 3 ou 4.
Prenons l’exemple fournit par Smashingmagazine.com : la famille de polices Roboto pèse ~144kb. Si toutefois vous n’utilisez que les variantes Regular, Regular Italic et Bold, ce nombre descend à ~36kb. Et optimiser les Google fonts ainsi, se traduit par une économie de 75% !
Il suffit d’indiquer les bons paramètre à l’API Google fonts.
?family=Roboto: ne chargera que la variante ‘regular 400’.?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900,900i: chargera toutes les variantes indiquées. Il est rare d’en voir autant.?family=Roboto:400,400i,600: le cas le plus fréquent d’usage; Régulier, Italique et Gras.
3. Combiner les appels
Pour éviter plusieurs requêtes, vous pouvez charger plusieurs polices,en un seul appel !
Vous pouvez avoir 2 links comme ceci :
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Cela fonctionnerait, mais il en résulterait que le navigateur ferait deux requêtes. Nous pouvons optimiser les Google fonts sur cet aspect en les combinant en une seule requête comme celle-ci :
<link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">
La caractère “|” étant le séparateur entre chaque police appelée.
4. Préparer le chargement des ressources
Il existe 2 techniques pour anticiper le chargement de ressources externes :
DNS Prefetch
Dans ce cas, une requête DNS sera menée par anticipation, pour résoudre un nom de domaine en adresse IP. Ces requêtes peuvent parfois nécessiter quelques dizaines de millisecondes, et il y en a d’autant plus qu’un document fait appel à plusieurs domaines différents. On peut espérer un gain entre 50 et 250 ms.
Pour implémenter la DNS Prefetching pour Google Fonts, il vous suffit d’ajouter cette ligne à vos pages web <head> :
<link rel="dns-prefetch" href="//fonts.googleapis.com">
Preconnect
La technique Preconnect permet d’approfondir le prefetch DNS et demande au navigateur de s’avancer et de résoudre le DNS, de procéder à la négociation TCP et à la négociation TLS (le cas échéant) pour la navigation suivante. Preconnect pourrait être décrit comme une version améliorée de prefetch.
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
Le simple ajout de cette ligne de code peut réduire le temps de chargement de votre page de 100 ms.
5. Héberger les polices sur votre site
Les polices Google sont sous licence “Libre” ou “logiciel libre”, ce qui vous donne la liberté d’utiliser, de modifier et de distribuer les polices sans demander la permission. Cela signifie que vous n’avez pas besoin d’utiliser l’hébergement Google si vous ne voulez pas – vous pouvez héberger vous-même les polices !
Sur https://google-webfonts-helper.herokuapp.com/fonts vous disposez d’un service qui vous permet de choisir les polices que vous souhaitez utiliser, puis il fournit les fichiers et CSS nécessaires pour le faire.
Le point 4 précédent ne s’applique donc pas dans ce cas. Pas de besoin de DNS prefetch ou de preconnect puisqu’on est sur le même site. C’est le choix que nous recommandons car il permet aussi d’éviter un SPOF ( single point of failure : un point unique de défaillance ).
Il y a un inconvénient à l’hébergement local des polices. Si elles sont améliorées ou mises à jour, vous ne recevrez pas ces changements.
6. Régler l’affichage des fonts en CSS
Il ne s’agit pas là d’optimiser vos Google fonts ; mais d’améliorer l’expérience utilisateur donc le ressenti du chargement.
Nous savons qu’il faut du temps au navigateur pour télécharger les polices Google, mais qu’arrive-t-il au texte avant qu’il ne soit prêt ? Pendant longtemps, le navigateur afficherait des espaces vides à l’endroit où le texte devrait se trouver, aussi connu sous le nom de “FOIT” (Flash of Invisible Text).
Ne rien montrer du tout peut être une expérience éprouvante pour l’utilisateur final. Une meilleure expérience utilisateur serait de montrer d’abord une police système comme une solution de secours et ensuite “échanger” les polices une fois qu’elles sont prêtes. Ceci est possible en utilisant la propriété CSS font-display.
En ajoutant font-display : swap; à la déclaration @font-face, on indique au navigateur d’afficher la police de remplacement jusqu’à ce que la police Google soit disponible.
Si vous hébergez vos polices il est donc aisé de rajouter ce paramètre mais si vous appelez vos font directement depuis l’API de Google le support n’est encore pret. Mais Google a annoncé qu’ils ajouteraient le support pour font-display : swap en 2019 . Vous pouvez commencer à l’implémenter immédiatement en ajoutant un paramètre supplémentaire à l’URL des polices :
https://fonts.googleapis.com/css?family=Roboto&display=swap
7. Utiliser le paramètre Texte
Une caractéristique peu connue de l’API Google Fonts est le paramètre texte. Ce paramètre rarement utilisé vous permet de ne charger que les caractères dont vous avez besoin ! Par exemple, si vous avez un logo-texte qui doit être une police unique, vous pouvez utiliser le paramètre texte pour charger uniquement les caractères utilisés dans le logo.
https://fonts.googleapis.com/css?family=Roboto&text=NomDeSociété
Évidemment, cette technique est très spécifique et n’a que peu d’applications. Cependant, elle peut réduire le poids de la police jusqu’à 90%.
Pour conclure
Donc je vous recommande chaudement la lecture complète de l’article original : “Optimizing Google Fonts Performance” de Danny Cooper sur smashingmagazine.com.
Quelques points que nous pourrions rajouter pour optimiser vos Google fonts :
- Dans le cas où vous utilisez des fichiers de fonts depuis votre site, vous pouvez aussi les travailler plus finement pour réduire leur poids avec un outil comme Font Squirrel. Ce dernier permet des réglages très pointus en mode expert.
- Gérer la mise en cache des fonts et leurs durées aussi bien cotés serveur que cotés client notamment en utilisant le cache d’une PWA par exemple.
- N’oubliez pas de définir dans vos CSS, une alternative à votre police Google avec une police système.
Photo par Raphael Schaller via Unsplash
