Optimisation des performances des polices Google

Les bonnes conceptions de sites Web sont ornées d'images et de polices époustouflantes. Malheureusement, ces deux éléments Web contribuent fortement aux raisons pour lesquelles de nombreux sites Web présentent une latence gênante. Bien sûr, seules les polices Web peuvent offrir quelque chose de rafraîchissant, d'inattendu et de nouveau.

Cependant, il existe des moyens de contenir cet horrible phénomène. SVG aide les développeurs à gérer certains des défis du rendu d'image. Et pour Google Fonts, qui est la police Web la plus utilisée, l'amélioration du temps de rendu d'une page consiste simplement à déployer les différentes astuces disponibles pour optimiser les performances de Google Font.

Que sont les polices Google ?

Les polices Google sont une collection de glyphes spécialement adaptée qui composent les polices à utiliser sur les sites Web. Elles sont spécialement conçues pour être utilisées sur Internet, d'où le nom de polices Web.

Lancé sous le nom de Google Web Fonts en 2010 avec environ 30 polices, Google Fonts compte aujourd'hui environ 17 milliards de polices et alimente actuellement environ 57 % de tous les sites Web. Google Fonts, qui est entièrement gratuit, enregistre environ 500 000 vues par seconde au moment de la rédaction de cet article et a accumulé plus de 37 000 milliards de vues depuis 2010.

L'utilisation des polices Google sur votre site Web vous permet de ne plus être limité aux polices système ou aux "polices sécurisées pour le Web", telles que Arial et Georgia, qui sont pour la plupart préinstallées sur tous les systèmes d'exploitation.

Comment implémenter les polices Google

La mise en œuvre de Google Fonts sur un site Web se fait à l'aide de l'interface de programmation d'application (API), en faisant référence au choix de police(s) de l'utilisateur. Cette API proposée par Google peut être intégrée à votre document HTML à l'aide de la balise de lien CSS standard ou de la syntaxe d'importation. Vous trouverez ci-dessous un exemple d'API pour la mise en œuvre de Baloo Chettan 2.

Utilisation de la balise de lien CSS standard

Utilisation de la syntaxe d'importation
<style>
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap');
</style>

Avec l'une des API ci-dessus dans votre document HTML, vous pouvez utiliser la famille de polices dans votre document CSS en la référençant, comme le montre l'exemple ci-dessous.

font-family : 'Baloo Chettan 2', cursive;

Importance de l'optimisation des performances de Google Font

La mise en œuvre et l'utilisation de Google Fonts, comme d'autres polices Web, ne sont pas un gros problème, mais la livraison des polices aux visiteurs de votre site Web. N'oubliez pas que les utilisateurs n'ont pas ces polices sur leurs appareils. En d'autres termes, leurs navigateurs doivent les télécharger avant de pouvoir voir le contenu de votre site Web.

Poids de la police

Chaque police est livrée avec une pondération susceptible d'affecter négativement la latence de votre site Web. Par exemple, la police Baloo Chettan 2 de Google a une taille totale de 720 Ko. Cela signifie que vous devez prendre en compte environ 9 Mo dans le chargement de votre site Web si vous devez utiliser toute la famille de polices Baloo (19), avec toutes les langues et variantes disponibles sur votre site Web. Bien sûr, c'est un idéal et rien de proche de l'optimisation des polices Web. Cependant, se tromper signifie faire attendre les visiteurs de votre site Web pendant quelques secondes avant de pouvoir voir du texte sur votre site Web.

Format de police

Malheureusement, aucun de ces formats n'est considéré comme un format universel qui fonctionne sur tous les navigateurs.

EOT est pris en charge par IE uniquement. Chrome et Opera prennent le plus en charge la plupart des formats, tandis qu'environ 86 % de tous les navigateurs prennent en charge le format WOFF. Cela peut vous obliger à inclure tous les formats de police pour chaque police que vous souhaitez utiliser. L'idée est de fournir une expérience cohérente en s'assurant que tous les navigateurs peuvent afficher toutes les polices.

Ces problèmes font partie des nombreuses raisons pour lesquelles il est crucial d'optimiser les performances des polices Google.

Optimisation des performances de Google Font

L'optimisation de Google Font commence par le placement de votre API de police et le format de demande, jusqu'au rendu. Voici des astuces simples pour optimiser les polices Google.

Précharger les ressources Google Font

Il est fortement recommandé d'utiliser la nouvelle fonctionnalité de la plate-forme Web : <link rel="preload"> qui vous permet de charger vos polices Web à l'avance. Cette fonctionnalité vous permet de contourner le comportement par défaut du navigateur, qui retarde généralement le rendu du texte en construisant d'abord l'arborescence de rendu pour savoir de quelles ressources de police il a besoin avant d'accéder au lien de ressource.

<link rel="preload"> est généralement inclus dans la <head> de votre HTML pour déclencher une demande de vos polices assez tôt, sans attendre la création du CSSOM. La fonctionnalité ne donne au navigateur qu'une information préalable indiquant que vos polices Web seraient bientôt nécessaires, sans fournir aucune information sur la manière dont elles seraient utilisées.

De plus, il est conseillé d'utiliser une définition CSS @font-face appropriée parallèlement à la fonction de préchargement pour informer le navigateur sur la façon d'utiliser l'URL de la ressource. Voir un exemple au point suivant.

Utiliser une requête pour plusieurs polices

Une autre bonne mesure pour l'optimisation des polices de Google consiste à combiner plusieurs demandes de polices en une seule balise. Ne pas inclure une balise <link> distincte pour chaque police, envoyant ainsi plusieurs requêtes dans différents lots. Pour combiner les demandes de polices, séparez simplement les polices dans l'API avec le | personnage. Cependant, cela pourrait également être réalisé en sélectionnant simplement toutes les polices dont vous auriez besoin à la fois sur la page Google Font.

Format des requêtes de police incorrectes :

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap"

rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap"

rel="stylesheet">

Format de requête de police recommandé :
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Roboto&display=swap"

rel="stylesheet">

En combinant plusieurs requêtes de polices dans une seule balise, nous épargnons au navigateur plusieurs déplacements vers le serveur et aidons également les navigateurs plus anciens avec un maximum de 2 connexions à la fois par domaine.

Formats de police optimisés pour tous les navigateurs

Les navigateurs qui ne prennent pas en charge un format de police spécifique l'ignorent simplement et passent à l'étape suivante de l'arborescence de rendu. Et pour fournir une expérience cohérente, vous devez inclure tous les formats de police dans votre déclaration CSS @font-face.

Cependant, le poids pourrait être réduit. Les graphiques individuels qui décrivent une police sont constitués d'informations similaires qui peuvent être compressées à l'aide d'un compresseur compatible tel que GZIP. Alors que les formats TTF et EOT sont compressés par défaut, vous devez vous assurer que vos serveurs sont configurés pour appliquer la compression lors de la livraison des deux formats de police.

Utilisez le paramètre de compression optimal pour WOFF, qui a une compression intégrée et recourez à des algorithmes de prétraitement et de compression personnalisés pour fournir WOFF2 avec une réduction de taille de fichier d'environ 30 %.

Exemple de déclaration CSS @font-face
@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 600;
src: local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Android, Safari */
url('/fonts/awesome.svg') format('svg'); /* Super modern web browsers */


Donner la priorité à local() dans votre liste src

Bien que cette idée d'optimisation des polices Google ne s'applique pas vraiment aux utilisateurs de téléphones mobiles à moins que vous ne référenciez les polices système par défaut, cela reste une astuce efficace pour optimiser les polices Web.

Si vous regardez l'exemple de déclaration CSS @font-face ci-dessus, vous remarquerez que local() est en tête de liste des variantes de ressources séparées par des virgules dans le descripteur src:. Cette hiérarchisation est intentionnelle et l'idée est d'envoyer le navigateur de l'utilisateur vers la première source de la police localement avant d'opter pour la télécharger si elle n'est pas disponible localement.

Cela garantit que le navigateur ne télécharge pas les polices déjà installées localement sur l'ordinateur de l'utilisateur, garantissant ainsi une meilleure performance du site Web.

Personnaliser le rendu des polices : CSS font-display

Le contrôle des performances des polices avec le descripteur d'affichage de polices pour @font-face vous permet de décider du rendu de vos polices Google, en fonction du temps de téléchargement. À l'origine, les navigateurs Web ont des paramètres par défaut sur ce qu'il faut faire lorsque les polices prennent trop de temps à charger. La plupart d'entre eux définissent un délai d'expiration après lequel ils utilisent la police de secours, mais malheureusement, leur délai d'expiration diffère.

La nouvelle propriété font-display prend actuellement en charge cinq plages de valeurs : auto | bloc | échange | repli | optionnel

Vous devez définir la propriété sur la valeur block si le rendu du texte dans une police particulière est très important. En effet, il permet au navigateur d'utiliser du texte invincible à la place de la police préférée lorsqu'il n'est pas prêt et de les échanger dès qu'il a terminé le téléchargement. La plupart des navigateurs utilisent cette valeur comme valeur par défaut ( auto ).

L'échange peut être utilisé dans les cas où vous pouvez vous permettre de rendre une police temporaire jusqu'à ce que la police préférée soit prête. Swap est similaire à block mais rend la police de secours dès que la page commence à se charger et la remplacera par la police préférée dès qu'elle sera prête. Cette valeur a une période d'échange infinie et une période de blocage de zéro seconde.

La valeur d'échange n'est pas idéale pour le corps du texte afin de ne pas perturber l'expérience du lecteur à mi-chemin en déplaçant le texte. Vous pouvez l'utiliser pour le texte du logo lorsque vous devez afficher rapidement le nom ou le slogan de l'entreprise à l'aide d'une solution de secours, mais que vous avez éventuellement besoin de la police de caractères officielle à des fins de personnalisation.

Exemple : propriété font-display définie sur swap
@font-face {
font-family : 'Baloo Chettan 2';
font-style : normal;
font-weight : 600;
font- display : swap
src : local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'); /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Safari, Android */
url('/fonts/awesome.svg') format('svg'); /* modern web browsers */

La valeur d'échange peut être vue implémentée dans les toutes premières lignes de code (Google Font API) utilisées pour montrer comment lier les polices Google dans votre document HTML.

Le repli est similaire au swap mais a une période de swap limitée. Si la police préférée ne se charge pas dans un délai défini, généralement une seconde, le texte conservera la police de secours pour le reste de la durée de vie de la page. C'est un bon candidat pour le corps du texte ; il rend le texte aussi rapidement que possible et ne le déplacera pas au moment où quelqu'un commencera à lire.

La valeur facultative est une réplique de fallback mais permet au navigateur de décider s'il lance ou non le téléchargement de la police Web, en tenant compte de la vitesse du réseau des utilisateurs. Dans une situation où la connexion est trop faible, le navigateur devrait limiter les demandes et donner la priorité aux ressources les plus nécessaires en n'envoyant aucune demande de téléchargement de la police Web.

Limiter la famille de polices et les variantes

Étant donné que chaque famille de polices et chaque variante contribuent au poids de la page, une partie de votre processus d'optimisation des polices Google doit inclure la limitation de ces deux éléments.

La disponibilité de plusieurs variantes telles que italic , regular , bold , etc. ne signifie pas nécessairement que vous avez le « choix » de les inclure dans votre téléchargement. Réduisez votre téléchargement à la variante exacte requise et évitez d'en inclure trop. Ce serait du gaspillage de télécharger une variante complète car vous ne voulez en utiliser qu'un seul mot. C'est là que la prochaine astuce d'optimisation pour Google Fonts est utile.

Utilisez le paramètre de texte

Le paramètre de texte est l'une des meilleures astuces d'optimisation des polices Google que vous devez connaître, et étonnamment, la plupart des développeurs ne l'utilisent pas. Le paramètre vous permet de charger uniquement les caractères dont vous avez besoin.

En supposant que vous ne souhaitiez utiliser que deux lettres d'une police dans le nom de votre entreprise, comme dans l'exemple ci-dessous. J'ai utilisé différentes polices pour les lettres C et N :

Nom de l'entreprise

Vous pouvez demander de charger uniquement ces deux lettres, au lieu de la police entière. L'URL de la police inclura des paramètres supplémentaires comme celui-ci :

https://fonts.googleapis.com/css?family=Baloo+Chettan+2=CN

En conclusion

L'optimisation de Google Font est une stratégie cruciale pour améliorer les performances globales d'un site Web.

L'accessibilité et la lisibilité sont toujours les principaux facteurs sur lesquels se concentrer, en dehors d'un bon design en typographie. Les méthodes mentionnées ci-dessus pour améliorer les performances des polices sont toutes axées sur la réduction du poids de la police, l'accès aux polices Web le plus rapidement possible et le rendu de formats/alternatives valides lorsque le réseau utilisateur est instable.

Veuillez nous faire savoir si vous avez essayé l'une de ces méthodes et tout processus d'optimisation des polices Web non mentionné dans cet article.