.

décembre 18, 2019Astuces techniques, Fonctionnalités / Evolutions

Google font webperf

Votre site web fait-il partie de l'écrasante majorité de sites qui utilisent des polices Google ? Saviez-vous que dès que vous faites appel à des polices externalisées comme Google Fonts, vous vous exposez aux problèmes de performance liés aux Third Parties ? En effet, les fonts Google font partie du chemin critique de rendu de la page : c’est une ressource nécessaire pour l’affichage du texte. 

En plus de nos optimisations dédiées aux fonts, nous en avons prévue une pour vous faire gagner (encore) de précieuses millisecondes sur le temps de chargement de vos pages web. Grâce à cette fonctionnalité, vos utilisateurs ne sont plus obligés d’attendre que le fichier CSS soit chargé pour que le texte apparaisse sur une page.

Google Fonts : gagner la course contre la montre en limitant les appels à l’API

Nous avons déjà développé différentes fonctionnalités d’optimisation des fonts et abordé des techniques pour rendre leur chargement le plus rapide possible, mais nous avons identifié certaines problématiques spécifiques à Google Fonts ; le fond du problème étant les appels multiples à l’API pour charger et afficher les polices. 

Comment fonctionne Google Fonts ? En ajoutant une font sur un site, on ajoute un fichier CSS qui est récupéré sur le domaine fonts.googleapis.com. Il comporte des définitions de fonts sous le format suivant : 

@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
 unicode-range: U+1F00-1FFF;
}

 

Ce fichier CSS référence les fichiers des fonts (tels que le fichier .woff2 dans l’exemple ci-dessus) utiles à la page, les fonts elles-mêmes étant accessibles sur le domaine fonts.gstatics.com.

Sachant que le fichier CSS et les fichiers de fonts doivent être chargés pour permettre l’affichage dans le navigateur - sans quoi le navigateur n’a aucune idée des polices qu’il doit utiliser sur la page -, tout le processus de chargement de ces fichiers doit s’exécuter le plus vite possible pour que le premier rendu de la page soit effectif et la navigation fluide.

Allons maintenant dans le détail du chargement des fonts. Pour chacune, le chargement nécessite 4 étapes que voici :Font Loading Google Font

Résolution DNS en vert - Etablissement de la connexion en jaune -
Négociation TLS en mauve (pour le HTTPS) - Requête en vert et orange

Ces 4 étapes sont réalisées pour le CSS et ensuite pour le fichier de fonts. Pour une font, il y donc 8 étapes. 

Alors, comment gagner du temps ? 

  • Eviter d’avoir un fichier CSS par font et tout mettre dans le même fichier. 
  • Anticiper la résolution, connexion, négociation pour le domaine fonts.gstatics.com.
  • Pré-charger les fonts le plus tôt possible.
  • Permettre de choisir l’affichage du texte même si la font n’est pas encore connue.

Entrez dans les coulisses de notre moteur : chargement asynchrone non bloquant, concaténation et pré-connection

Sur le plan technique, voici la façon dont travaille notre moteur :

Concaténation des appels à l’API Google

Les URL sont “factorisées” pour qu’il n’y ait qu’un seul appel à l’API Google. Ainsi, toutes les polices présentes sur une page web peuvent être chargées en une seule fois.
Concrètement, lorsque nos utilisateurs activent la fonctionnalité Google Fonts depuis leur dashboard, qu’est-ce qui change dans le code de la page ? 

Notre moteur transforme tout simplement ce type de balises pour charger ici les fonts sans serif Oswald et Rotovo : 

<link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Rotovo' rel='stylesheet' type='text/css'>

En :

<link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300|Rotovo' rel='stylesheet' type='text/css'>

Pré-connection sur le domaine fonts.gstatics.com

Fasterize établit une pré-connection sur le domaine fonts.gstatics.com qui est celui où Google récupère réellement les fonts après l’appel à l’API (et non googleapis.com). Pour ce faire, nous insérons cette balise avant le fichier CSS de déclaration des Google Fonts :  

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


Ainsi, lorsque le fichier font doit être chargé, la partie résolution DNS, l’établissement de la connexion au domaine gstatics.com et la négociation TLS aura déjà été traitée en amont.

Ces deux graphes illustrent le processus de pré-connexion TLS : 

Google Font TLSGoole Font TLS Preconnect

Chargement asynchrone non bloquant du fichier CSS

Il est possible de customiser les paramètres en choisissant d’activer ou non le chargement asynchrone du fichier CSS, notamment pour éviter un SPOF. Pour cela, il suffit d’ajouter les attributs suivants à la balise link de chargement du CSS :

“media="print" onload="this.onload=null;this.media='all'"

Grâce à ces attributs, le fichier CSS est pré-chargé et le media “screen” est remplacé par “print”. Une fois que la page est chargée, “print” est remplacé par “all” pour que le CSS s’applique à tous les médias.

Notre balise pour le chargement du fichier CSS de la font devient alors :

<link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300|Rotovo' rel='stylesheet' type='text/css' “media="print" onload="this.onload=null;this.media='all'">

Pourquoi ne pas unsharder ou héberger directement les polices de Google Fonts ? 

Unsharder les fonts de Google directement sur le domaine principal serait en effet idéal. Cela économiserait un appel réseau et une recompilation du CSSOM. Cependant, ce n’est pas simple car l’API de Google génère différentes versions du fichier CSS en fonction des possibilités du navigateur (support de WOFF2, des unicode-ranges) mais aussi en fonction de l’OS (Windows / Mac), du subset et des différents attributs de polices de caractères (gras, italique, barré...).

Notre CDN ne gérant pas autant de versions différentes en fonction des User-Agents, nous serions donc obligés de préparer en amont des milliers de fichiers CSS non spécifiques pour les fonts disponibles sur Google Font comme le fait https://google-webfonts-helper.herokuapp.com/fonts. Nous n’avons pas souhaité prendre cette option difficilement maintenable.


 Choix de l’attribut font-display 

Pour les polices qui n’ont pas de valeur display (introduite récemment par Google Fonts), nous ajoutons par défaut la valeur swap (ou toute autre valeur qui peut être définie par vos soins). Pourquoi ? Parce qu’en l’absence de valeur, la valeur block est alors utilisée par défaut, et elle bloque l’affichage du texte sur la page tant que la police n’est pas chargée par le navigateur. Cette valeur swap permet d’afficher le texte avec une police par défaut avant le chargement de la police de caractères Google, ce qui est toujours mieux qu’une page vide !

<link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300|Rotovo&display=swap' rel='stylesheet' type='text/css' “media="print" onload="this.onload=null;this.media='all'">

L’un des effets bénéfiques de font-display : un gain de temps de presque 1 seconde sur le First Meaningful Paint :

Mais que se passe-t-il si certaines polices de caractères ont déjà une valeur display, et qu’elle n’est pas la même pour toutes les polices ? 

Si certaines polices ont une valeur display et d’autres non, nous ne concaténons que celles qui n’ont pas de valeur display. Il y a donc tout intérêt à ce que les valeurs soient harmonisées en amont. Une suggestion : n’indiquer aucune valeur display pour laisser le moteur de Fasterize se charger de les ajouter.
C’est aussi vrai pour les autres paramètres des Google Fonts (subset, text) : ainsi, une font qui serait déclarée avec un subset particulier ne sera jamais prise dans une concaténation. Idem pour une font dont le nombre de caractères à charger serait limité via le paramètre text.

Notre fonctionnalité d’optimisation des fonts Google est déjà déployée sur plusieurs sites que nous accélérons. Les temps de chargement sont ainsi réduits, voici un exemple ci-dessous en vidéo : le texte du menu en haut est affiché plus tôt grâce à l'option swap, et le CSS asynchrone laisse le temps à d'autres ressources affichées dans le viewport d'être chargées.

Maintenant que vous avez découvert les coulisses de l'optimisation du chargement des Google Fonts… 

Vous êtes curieux de tester cette option,
ou l’une des nombreuses fonctionnalités intelligentes pour améliorer votre vitesse de chargement ?
Demandez-nous une démo !


Je veux une démo !