Optimiser les Google Fonts

Lorsque vous utilisez les fontes Google sur votre site web, voilà ce qui se passe :

  1. Il y a une première requête HTTP vers la feuille de style des polices de Google, hébergée sur fonts.googleapis.com. Il y a généralement une requête par fonte choisie.
  2. Ensuite, à l'intérieur de cette feuille de style, la fonte elle-même est référencée et doit être téléchargée, à partir de fonts.gstatic.com

L'option Optimiser les Google Fonts fait trois choses pour optimiser ces requêtes :

  1. Si la page comporte plusieurs requêtes à Google Fonts, elles seront combinées en une seule. Cela permettra de réduire légèrement le nombre total de requêtes HTTP. 
  2. Ajoute le paramètre display=swap à la requête, pour satisfaire à la recommandation de PageSpeed de s'assurer que le texte reste visible pendant le chargement des polices. Cette optimisation sera appliquée même s'il n'y a qu'une seule requête de police sur votre page. 
  3. Ajoute l'indication preconnect à la requête pour améliorer le temps de chargement des polices :
  4. <link href="https://fonts.gstatic.com" crossorigin rel="preconnect" />

Attention ! Au final, chaque police que vous utilisez sur votre site doit être téléchargée par le navigateur du visiteur. Plus vous utilisez de polices, plus cela prend du temps. Cette option ne change rien à cela. Elle permet simplement une petite optimisation des demandes. Vous devez tout de même faire attention à ne pas ajouter trop de polices à votre site :)

Requêtes de font non optimisées

Dans la capture d'écran ci-dessous, il y a deux requêtes distinctes pour les polices Google (cliquez pour agrandir l'image).

Requête de font optimisée

Vous pouvez voir ici que les deux requêtes ont été combinées en une seule avec le paramètre ajouté display=swap (cliquez pour agrandir l'image).

L'indicateur de préconnexion est également ajouté : 

Cela a-t-il répondu à votre question ? Merci pour votre retour :) Une erreur est survenue lors de l’envoi de votre retour. Veuillez réessayer plus tard.