A la demande générale, petit laïus rapide concernant les performances web et fonts.google.com :

La procédure :

On intègre dans sa page HTML une feuille de style de chez google, avec un paramètre dans l’url disant quelles fontes on souhaite charger.

Derrière ça fait :

  1. requête DNS vers fonts.googleapis.com
  2. établissement d’un fil TCP vers fonts.googleapis.com
  3. requête HTTP vers fonts.googleapis.com pour la CSS
  4. requête DNS vers themes.googleusercontent.com
  5. établissement d’un fil TCP vers themes.googleusercontent.com
  6. requête HTTP vers themes.googleusercontent.com pour la font elle-meme

A chaque étape on perd du temps à cause de la latence réseau. Pour ne rien arranger ces requêtes ne peuvent pas être parallélisées et sont faites l’une à la suite des autres.

Ce n’est pas 1 requête inutile qui est faite, c’est 5 étapes inutiles. Seul le téléchargement de la fonte elle même est réellement intéressant. S’il était fait depuis votre site a partir d’une règle dans votre css principale, vous économiseriez 5 étapes. Et là je ne parle même pas d’utiliser l’interface javascript.

Imaginons une latence de 100ms, on perd déjà 600ms, plus le temps de télécharger la fonte elle-même. Certes c’est peu, mais c’est d’un rapport intérêt/coût assez faible.

Sur un site pro je trouve que ce serait une faute professionnelle. Sur un site perso c’est juste dommage, inutile.

Notez bien que ce n’est pas le principe des fontes externes que je critique (enfin si, mais ce n’est pas le sujet présent) mais bien de passer par le mécanisme proposé au lieu de simplement recopier la fonte (sous licence libre) chez vous pour faire l’insertion tout à fait normale dans votre propre css.

Quelques remarques

Oui ces données sont mises en cache, donc la prochaine fois c’est 0 requêtes. Mais si vous suivez http://www.yuiblog.com/blog/2007/01/04/performance-research-part-2/ vous voyez que de toutes facons vous aurez beaucoup d’utilisateurs qui subiront les requêtes inutiles. Yahoo compte 50% des utilisateurs (ce qui donne 20% des pages vues). Vous avez le droit de compter plus vu que votre site fidelise probablement moins que yahoo. Bref, ça fait beaucoup, pas négligeable (et le cache ca fonctionnerait aussi si la fonte était chez vous au lieu de chez google donc ce n’est de toutes facons pas un argument).

Non vous ne pouvez pas compter sur la mutualisation de cache (tous les gens vont chez google). Les caches intermédiaires (proxy) qui sont le plus a même de profiter de cette mutualisation ne le feront pas parce que l’url utilisée par la CSS contient des paramètres (le point d’interrogation) et qu’ils sont souvent configurés pour sauter le cache dans ces cas là quoi que le serveur dise.

Vous ne pouvez pas non plus compter sur le cache navigateur. Ca impliquerait que le visiteur ait lu récemment un site tiers qui utilise lui aussi les fontes google (ça risque de ne pas être fréquent) et avec la même fonte que vous (la ça va devenir franchement rare) et que le cache de votre visiteur n’ait pas été renouvelé entre temps.

L’expérience des CDNs google/yahoo pour les libs js nous fait dire que c’est probablement une mauvaise idée (et pourtant les libs js sur cdn google ne présentaient pas tous les désavantages et requêtes inutiles dont on parle ici). Voir par exemple http://zoompf.com/blog/2010/01/should-you-use-javascript-library-cdns

Oui, le CDN google permet aussi de “rapprocher” le contenu pour ceux qui ont une connexion lointaine. Mais en meme temps, si vous pensez à ça et que vous risquez d’en avoir besoin, alors c’est important d’y mettre vos images et css, pas que la fonte personnalisée. Du coup vous utilisez déjà un cdn pour le reste. Copiez la fonte personnalisée dessus et faites un lien à partir de votre css existante. Vous n’avez pas besoin de google pour ça, et encore moins des 5 étapes inutiles. Je dirai meme qu’ajouter des étapes en plus pénalisera surtout ceux qui justement ont des problèmes de latence (meme si la latence vers google sera globalement faible)

Que dois-je faire alors ?

Copier la fonte chez vous, ajouter les lignes nécessaires dans votre css existante. Vous en avez le droit d’après la licence des fontes que j’ai regardé (je ne garantis pas que c’est le cas pour toutes). Ca évitera déjà 5 des 6 étapes que je donne plus haut.

Ou alors, ne pas proposer de fonte personnalisée (rappelez vous qu’en retour les textes avec cette fonte seront invisibles pendant un moment le temps que la fonte se charge - est ce que ça vaut vraiment le coût par rapport à l’utilisation d’une des fontes standard ?)


Pour toutes remarques : @edasfr sur twitter, ou mail à partir de mes coordonnées sur http://eric.daspet.name/

(mis à jour mercredi 19 mai à 23h49)