Optimiser les performances des polices Google

Il est juste de dire que les polices de Google sont populaires. A ce jour, elles ont été visionnées 29 trillions sur le Web et il est facile de comprendre pourquoi: la collection vous donne accès à plus de 900 superbes 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 le périphérique de votre utilisateur.

Les polices système ou les «polices Web Safe» sont les polices les plus couramment préinstallées sur des systèmes d’exploitation. Arial et Georgia, par exemple, sont fournis avec les distributions Windows, macOS et Linux.

Comme toute bonne chose, les polices de caractères Google ont un coût. Chaque police porte un poids que le navigateur Web doit télécharger avant de pouvoir être affichée. Avec une configuration correcte, le temps de chargement supplémentaire n’est pas perceptible. Cependant, ne vous y trompez pas et vos utilisateurs risquent de patienter quelques secondes avant l'affichage du texte.

Les polices Google sont déjà optimisées

L'API Google Fonts ne se limite pas à fournir les fichiers de polices au navigateur. effectue également un contrôle intelligent pour voir comment il peut livrer les fichiers dans le format le plus optimisé.

Regardons Roboto, GitHub nous dit que la variante normale pèse 168 Ko.

Toutefois, si je demande la même variante de police à l’API, j’ai reçu ce fichier . Ce qui n'est que 11kb. Comment cela se peut-il?

Lorsque le navigateur envoie une requête à l'API, Google commence par vérifier le type de fichier pris en charge par le navigateur. J'utilise la dernière version de Chrome, qui, comme la plupart des navigateurs, prend en charge WOFF2; la police m'est donc transmise dans ce format fortement compressé.

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

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

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

– Ilya Grigorik, Optimisation Web des polices

Il s'agit d'une fonctionnalité intéressante de Google Fonts, en vérifiant l'utilisateur-agent qu'il s'agit. capable de servir les formats les plus performants aux navigateurs compatibles, 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 l'omniprésence la nature de Google Fonts, le navigateur ne Il n'est pas toujours nécessaire de télécharger l'intégralité des fichiers de polices. SmashingMagazine, par exemple, utilise une police appelée «Mija». Si c'est la première fois que votre navigateur la voit, il devra la télécharger complètement avant que le texte ne soit affiché, mais la prochaine fois que vous visiterez un site Web utilisant cette police. , le navigateur utilisera la version en cache.

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

– FAQ, Google Fonts

Le cache du navigateur de polices Google doit expirer après un an, à moins que le cache ne soit effacé plus tôt.

Note: Mija n'est pas Google Police, mais les principes de la mise en cache ne sont pas propres à chaque fournisseur.

D'autres optimisations sont possibles

Bien que Google investisse beaucoup d'effort dans l'optimisation de la livraison des fichiers de polices, vous pouvez encore l'optimiser. dans 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 à l'épaisseur de votre page, multipliée par quelques familles de polices différentes et, du coup, vos polices pèsent plus que toute votre page.

Je recommande de ne pas utiliser plus de deux polices, une pour les en-têtes et une autre pour le contenu. est généralement suffisant. Avec une utilisation correcte de la taille, du poids et de la couleur de la police, vous pouvez obtenir un rendu superbe avec une seule police.

2. Variantes d'exclusion

En raison du niveau de qualité élevé des polices de caractères Google, de nombreuses familles de polices contiennent tout l'éventail de grammages de polices disponibles:

• Thin (100)
• Thin Italic (100i)
• Light (300)
• Italique léger (300i)
• Normal (400)
• Italique léger (400i)
• Moyenne (600)
• Moyenne Italique (600i)
• Gras (700) [19659033] Italique gras (700i)
• Noir (800)
• Noir italique (800i)

Idéal pour les cas d'utilisation avancés nécessitant éventuellement les 12 variantes, mais pour un site Web classique, le téléchargement des 12 variantes est nécessaire. lorsque vous n'en avez peut-être besoin que de 3 ou 4.

Par exemple, la famille de polices Roboto pèse environ 144 Ko. Toutefois, si vous utilisez uniquement les variantes Normal, Normal italique et Gras, ce nombre est réduit à ~ 36kb. Une économie de 75%!

Le code par défaut pour l’implémentation de Google Fonts se présente comme suit:

Si vous le faites, il ne chargera que la variante «normale 400». Cela signifie que tous les textes clairs, gras et italiques ne seront pas affichés correctement.

Pour charger toutes les variantes de police, vous devez spécifier les poids dans l'URL comme ceci:

Il est rare qu'un site Web utilise toutes les variantes. Pour une police de caractères allant de mince (100) à noir (900), la stratégie optimale consiste à spécifier uniquement les poids que vous prévoyez d’utiliser:

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 italique):

3. Demandes combinées

L’extrait de code avec lequel nous avons travaillé ci-dessus appelle les serveurs de Google ( fonts.googleapis.com ), qu’on appelle une requête HTTP. En règle générale, plus votre page Web doit recevoir de requêtes HTTP, plus son chargement sera long.

Si vous souhaitez charger deux polices, procédez comme suit:

Cela fonctionnerait, mais cela fonctionnerait. entraîner deux requêtes du navigateur. Nous pouvons optimiser cela en les combinant dans une requête unique comme celle-ci:

Il n'y a pas de limite au nombre de polices et de variantes qu'une même requête peut contenir.

4. Conseils de ressources

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

Note: Si un navigateur ne le fait pas 'supporte pas une fonctionnalité moderne, il va simplement l'ignorer. Ainsi, votre page Web se chargera toujours normalement.

Préfecture DNS

La pré-extraction DNS permet au navigateur de démarrer la connexion à l'API de polices de Google ( fonts.googleapis.com ) dès que la page commence à s'afficher. charge. Cela signifie qu'au moment où le navigateur est prêt à faire une demande, une partie du travail est déjà faite.

Pour implémenter la prélecture DNS pour Google Fonts, il vous suffit d'ajouter ce one-liner à vos pages Web : [19659064] Preconnect

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

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

Le problème de ces requêtes 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 complète. C'est ici qu'intervient Preconnect.

Preconnect pourrait être décrit comme une version améliorée de prefetch. Il est défini sur l'URL spécifique que le navigateur va charger. Au lieu d'effectuer simplement une recherche DNS, il complète également la négociation TLS et la négociation TCP.

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

Il suffit d'ajouter cette ligne de code . réduisez le temps de chargement de votre page de 100 ms . Ceci est rendu possible en démarrant la connexion parallèlement à la requête initiale, plutôt que d’attendre qu’elle s’achève en premier.

5. Héberger localement les polices

Les polices Google sont concédées sous une licence ‘Libre’ ou ‘de logiciel libre’, ce 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 héberger vous-même 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 les CSS nécessaires pour le faire.

Il y a un inconvénient à héberger des polices localement. Lorsque vous téléchargez les polices, vous les enregistrez telles quelles à 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 téléchargement des polices Google est long avec le navigateur, mais qu’advient-il du texte avant qu’il ne soit prêt? Pendant longtemps, le navigateur a laissé un espace vide où le texte devrait être, également connu sous le nom de "FOIT" (Flash of Invisible Text).

Lecture recommandée : " FOUT, FOIT, FOFT ”de Chris Coyier

Ne rien montrer peut être une expérience bouleversante pour l'utilisateur final. Une meilleure expérience consisterait tout d'abord à afficher une police système comme solution de secours, puis à“ permuter ”. ”Les polices une fois qu’elles sont prêtes. C’est possible en utilisant la propriété CSS de fonte display .

En ajoutant de fonte display: swap; à la déclaration @ font-face, nous demandons au navigateur d’afficher la police de secours jusqu’à ce que la police Google soit disponible.

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

En 2019, Google a annoncé qu'il ajouterait un support pour polices: display: swap . Vous pouvez commencer immédiatement à implémenter cela 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 Text

Une caractéristique peu connue de l'API Google Fonts est le paramètre text . Ce paramètre rarement utilisé ne vous permet de 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 text uniquement. chargez les caractères utilisés dans le logo.

Il fonctionne comme suit:

 https://fonts.googleapis.com/css?family=Roboto&text=NomSociété

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

Remarque: Lorsque vous utilisez le paramètre text seule la police «normale» -weight 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=NomSociété

En conclusion

Avec environ 53% des 1 millions de sites Web les plus utilisés sur Google Fonts, la mise en œuvre de ces optimisations peut avoir un impact considérable.

Combien de ces sites avez-vous essayés? Laissez-moi savoir dans la section commentaires.

(dm, yk, il)