Optimisation des performances des polices Google

Il est juste de dire que les polices Google sont populaires. Au moment de la rédaction, elles ont été consultées plus de 29 billions de fois sur le Web et il est facile de comprendre pourquoi - la collection vous donne accès à plus de 900 belles polices que vous pouvez utiliser gratuitement sur votre site Web. 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 ou '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 les distributions Windows, macOS et Linux.

Comme toutes les bonnes choses, Google Fonts a un coût. Chaque police porte un poids que le navigateur Web doit télécharger avant de pouvoir être affiché. Avec la bonne configuration, le temps de chargement supplémentaire n'est pas perceptible. Cependant, si vous vous trompez, vos utilisateurs pourraient attendre jusqu'à quelques secondes avant qu'un texte ne s'affiche.

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 également une vérification intelligente pour voir comment elle peut fournir les fichiers dans le format le plus optimisé.

Regardons Roboto, GitHub nous dit que la variante régulière pèse 168kb.

Cependant, si je demande la même variante de police à l'API, ce fichier m'est fourni. Ce qui ne fait que 11kb. Comment est-ce possible ?

Lorsque le navigateur envoie une requête à l'API, Google vérifie d'abord quels types de fichiers le navigateur prend en charge. J'utilise la dernière version de Chrome, qui, comme la plupart des navigateurs, prend en charge WOFF2, donc la police m'est servie dans ce format hautement compressé.

Si je change mon agent utilisateur pour Internet Explorer 11, je reçois la police au format WOFF à la place.

Enfin, si je change mon agent utilisateur en IE8, j'obtiens la police au format EOT (Embedded OpenType).

Google Fonts gère plus de 30 variantes optimisées pour chaque police et détecte et fournit automatiquement la variante optimale pour chaque plate-forme et navigateur.

— Ilya Grigorik, Optimisation des polices Web

Il s'agit d'une fonctionnalité intéressante de Google Fonts, en vérifiant l'agent utilisateur, ils sont capables de fournir les formats les plus performants aux navigateurs qui les prennent en charge, tout en affichant les polices de manière cohérente sur les anciens navigateurs.

Mise en cache du navigateur

Une autre optimisation intégrée de Google Fonts est la mise en cache du navigateur.

En raison de la nature omniprésente de Google Fonts, le navigateur n'a pas toujours besoin de télécharger les fichiers de polices complets. SmashingMagazine, par exemple, utilise une police appelée 'Mija', si c'est la première fois que votre navigateur voit cette police, il devra la télécharger complètement avant que le texte ne s'affiche, mais la prochaine fois que vous visiterez un site Web utilisant cette police , le navigateur utilisera la version mise en cache.

À mesure que l'API Google Fonts devient plus largement utilisée, il est probable que les visiteurs de votre site ou de votre page auront déjà toutes les polices Google utilisées dans votre conception dans le cache de leur navigateur.

— FAQ, polices Google

Le cache du navigateur Google Fonts est configuré pour expirer après un an, sauf si le cache est vidé plus tôt.

Remarque : Mija n'est pas une police Google, mais les principes de mise en cache ne sont pas spécifiques au fournisseur.

Une optimisation supplémentaire est possible

Alors que Google investit beaucoup d'efforts dans l'optimisation de la livraison des fichiers de polices, vous pouvez encore apporter des optimisations à votre implémentation pour réduire l'impact sur les temps de chargement des pages.

1. Limiter les familles de polices

L'optimisation la plus simple consiste simplement à utiliser moins de familles de polices. Chaque police peut ajouter jusqu'à 400 Ko au poids de votre page, multipliez cela par quelques familles de polices différentes et soudainement vos polices pèsent plus que votre page entière.

Je recommande de ne pas utiliser plus de deux polices, une pour les titres et une autre pour le contenu est généralement suffisante. Avec la bonne utilisation de la taille, de l'épaisseur et de la couleur de la police, vous pouvez obtenir un superbe look avec même une seule police.

2. Exclure les variantes

En raison du niveau de qualité élevé des polices Google, de nombreuses familles de polices contiennent la gamme complète des poids de police disponibles :

• Mince (100)
• Italique fin (100i)
• Lumière (300)
• Italique clair (300i)
• Régulier (400)
• Italique régulier (400i)
• Moyen (600)
• Italique moyen (600i)
• Gras (700)
• Gras italique (700i)
• Noir (800)
• Italique noir (800i)

C'est idéal pour les cas d'utilisation avancés qui peuvent nécessiter les 12 variantes, mais pour un site Web standard, cela signifie télécharger les 12 variantes alors que vous n'en avez besoin que de 3 ou 4.

Par exemple, la famille de polices Roboto pèse environ 144 Ko. Si toutefois vous n'utilisez que les variantes Regular, Regular Italic et Bold, ce nombre revient à ~36kb. Une économie de 75% !

Le code par défaut pour implémenter Google Fonts ressemble à ceci :

 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Si vous faites cela, il ne chargera que la variante "normale 400". Ce qui signifie que tous les textes clairs, gras et italiques ne seront pas affichés correctement.

Pour charger à la place toutes les variantes de police, nous devons spécifier les poids dans l'URL comme ceci :

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

Il est rare qu'un site Web utilise toutes les variantes d'une police de Thin (100) à Black (900), la stratégie optimale consiste à spécifier uniquement les poids que vous prévoyez d'utiliser :

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,600" rel="stylesheet">

Ceci est particulièrement important lorsque vous utilisez plusieurs familles de polices. Par exemple, si vous utilisez Lato pour les en-têtes, il est logique de ne demander que la variante en gras (et éventuellement en gras italique) :

 <link href="https://fonts.googleapis.com/css?family=Lato:700,700i" rel="stylesheet">

3. Combinez les demandes

L'extrait de code avec lequel nous avons travaillé ci-dessus effectue un appel aux serveurs de Google ( fonts.googleapis.com ), c'est ce qu'on appelle une requête HTTP. De manière générale, plus votre page Web doit effectuer de requêtes HTTP, plus son chargement sera long.

Si vous vouliez charger deux polices, vous pourriez faire quelque chose 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 le navigateur ferait deux requêtes. Nous pouvons optimiser cela 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">

Il n'y a pas de limite au nombre de polices et de variantes qu'une seule demande peut contenir.

4. Conseils sur les ressources

Les conseils de ressources sont une fonctionnalité prise en charge par les navigateurs modernes qui peuvent améliorer les performances du site Web. Nous allons examiner deux types d'indices de ressources : "DNS Prefetching" et "Preconnect".

Remarque : Si un navigateur ne prend pas en charge une fonctionnalité moderne, il l'ignorera simplement. Ainsi, votre page Web se chargera toujours normalement.

Prélecture DNS

La prélecture DNS permet au navigateur de démarrer la connexion à l'API Fonts de Google ( fonts.googleapis.com ) dès que la page commence à se charger. Cela signifie qu'au moment où le navigateur est prêt à faire une demande, une partie du travail est déjà effectuée.

Pour implémenter la prélecture DNS pour Google Fonts, il vous suffit d'ajouter ce one-liner à vos pages Web <head> :

 <link rel="dns-prefetch" href="//fonts.googleapis.com">

Préconnexion

Si vous regardez le code d'intégration de Google Fonts, il semble s'agir d'une seule requête HTTP :

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">

Cependant, si nous visitons cette URL, nous pouvons voir qu'il y a trois autres requêtes vers une URL différente, https://fonts.gstatic.com. Une demande supplémentaire pour chaque variante de police.

Le problème avec ces demandes supplémentaires est que le navigateur ne commencera pas les processus pour les faire jusqu'à ce que la première demande à https://fonts.googleapis.com/css soit terminée. C'est là qu'intervient Preconnect.

La préconnexion peut être décrite comme une version améliorée de la prélecture. Il est défini sur l'URL spécifique que le navigateur va charger. Au lieu de simplement effectuer une recherche DNS, il complète également la négociation TLS et la poignée de main TCP.

Tout comme le DNS Prefetching, il peut être implémenté avec une seule ligne de code :

 <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Le simple fait d'ajouter cette ligne de code peut réduire le temps de chargement de votre page de 100 ms. Cela est rendu possible en démarrant la connexion parallèlement à la demande initiale, plutôt que d'attendre qu'elle se termine en premier.

5. Hébergez les polices localement

Les polices Google font l'objet d'une licence « libre » ou « logiciel libre », qui vous donne la liberté d'utiliser, de modifier et de distribuer les polices sans demander d'autorisation. Cela signifie que vous n'avez pas besoin d'utiliser l'hébergement de Google si vous ne le souhaitez pas - vous pouvez auto-héberger les polices !

Tous les fichiers de polices sont disponibles sur Github. Un fichier zip contenant toutes les polices est également disponible (387 Mo).

Enfin, il existe un service d'assistance qui vous permet de choisir les polices que vous souhaitez utiliser, puis il fournit les fichiers et CSS nécessaires pour le faire.

Il y a un inconvénient à héberger les polices localement. Lorsque vous téléchargez les polices, vous les enregistrez telles qu'elles sont à ce moment-là. S'ils sont améliorés ou mis à jour, vous ne recevrez pas ces modifications. En comparaison, lorsque vous demandez des polices à l'API Google Fonts, vous recevez toujours la version la plus récente.

Notez le paramètre lastModified dans l'API. Les polices sont régulièrement modifiées et améliorées.

6. Affichage des polices

Nous savons que le navigateur met du temps à télécharger les polices Google, mais qu'advient-il du texte avant qu'il ne soit prêt ? Pendant longtemps, le navigateur affichait un espace vide à la place du texte, également connu sous le nom de "FOIT" (Flash of Invisible Text).

Lecture recommandée : « FOUT, FOIT, FOFT » de Chris Coyier

Ne rien montrer du tout peut être une expérience choquante pour l'utilisateur final, une meilleure expérience serait d'afficher initialement une police système comme une solution de secours, puis de «permuter» 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, nous disons au navigateur d'afficher la police de secours jusqu'à ce que la police Google soit disponible.

 @font-face { font-family: 'Roboto'; src: local('Roboto Thin Italic'), url(https://fonts.gstatic.com/s/roboto/v19/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2) format('woff2'); font-display: swap; }

En 2019, Google a annoncé qu'il ajouterait la prise en charge de l'affichage des polices : swap. 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. Utilisez le paramètre de Text

Une fonctionnalité peu connue de l'API Google Fonts est le paramètre de text . Ce paramètre rarement utilisé vous permet de ne charger que les caractères dont vous avez besoin.

Par exemple, si vous avez un texte-logo qui doit être une police unique, vous pouvez utiliser le paramètre text pour charger uniquement les caractères utilisés dans le logo.

Cela fonctionne comme ceci :

 https://fonts.googleapis.com/css?family=Roboto&text=CompanyName

Évidemment, cette technique est très spécifique et n'a que peu d'applications réalistes. Cependant, si vous pouvez l'utiliser, il peut réduire le poids de la police jusqu'à 90 %.

Remarque : Lors de l'utilisation du paramètre text , seul le poids de police « normal » est chargé par défaut. Pour utiliser un autre poids, vous devez le spécifier explicitement dans l'URL.

 https://fonts.googleapis.com/css?family=Roboto:700&text=CompanyName

Emballer

Avec environ 53 % du million de sites Web utilisant Google Fonts, la mise en œuvre de ces optimisations peut avoir un impact considérable.

Combien de ce qui précède avez-vous essayé? Faites-le moi savoir dans les commentaires.