Suppression des polices provenant de GoogleFonts sur mon blog

Web

J’ai remarqué que les polices provenant de GoogleFont mettaient environ une seconde de plus que l’affichage d’une page web à “venir” et s’afficher, notamment sur deux sites web en particulier : Owni et Nicolargo (cf screenshot ci-dessous). Or, c’est extrêmement gênant. En plus de cela, les polices importées depuis GoogleFont ne sont pas toujours parfaitement lisibles. Je pense notamment à la police Droid Sans (qui est une sans serif), dont je trouve la lecture beaucoup moins aisée qu’une Trebuchet MS, une Arial (malheureusement, ces deux polices sont certainement propriétaires), ou tout simplement qu’une Sans Serif classique. Certes, utiliser une Droid Sans apporte un peu de distinction pour son blog, mais si cela se fait au détriment de la lisibilité ET de la rapidité de chargement, il est hors de question de l’utiliser.

Voilà ce que donne Owni au chargement de la page : aucune police ne s’affiche, car elles ne sont pas encore chargées !

Donc suppression pure et simple de Droid Sans de mon header, via le script de chargement suivant qui se trouvait entre les balises :

[sourcecode language=“html”] [/sourcecode]

Et bien sûr, en parallèle, j’ai enlevé de mon fichier de style toutes les références à Droid Sans.

Normalement, je devrais faire économiser aux lecteurs de ce blog une requète DNS (pour googleapis.com), ainsi qu’une requête pour aller chercher la police, et enfin le temps d’affichage de tout ce petit monde. C’est déjà pas mal pour un samedi matin :-)

7 réflexions au sujet de « Suppression des polices provenant de GoogleFonts sur mon blog »

  1. D'après les expériences que j'ai effectué sur tous mes sites clients, le loading des fonts via google n'est pas du tout reliable malgré ce qu'on pourrait croire. ça amène en général une très forte latence et même assez souvent (trop) un temps de download assez long.

    Le pire c'est que ça vaut pour tout ce qui est sur le "cdn" de google, jquery inclus. ça me fait donc pas mal marrer quand on voit tout le monde conseiller de loader depuis le cdn de google pour de la performance etc. En générale, c'est le contraire en fait. (et le truc du jquery en cache c'est de la foutaise, puisque justement, le fichier loadé depuis le cdn prend pas les Etags, ni les long terms expiration...)

    Tu t'en sors a meilleur compte de faire un font-stack avec un fallback vers une "safe web font" et de defer le loading de tes custom fonts via une css.

    Le mieux c'est encore de loader les fonts depuis un domaine ou sous-domaine séparé si t'en as pas mal, pour maximer les "parallel downloads" dans le browser.

    La ou ça devient encore plus intéressant, c'est quand tu met tes fonts sur un cdn (un vrai) auquel t'accède par un cname configuré au préalable.

    Alors certes, c'est pas gratuit, mais c'est pas non plus très couteux tant que tu fais pas 3 millions de vu par moi, surtout que si tu cache bien correctement (expire a 1 year) au final, tes fonts sont loader qu'une fois par visiteur, pour très longtemps...

    Rackspace a une offre de CDN en partenariat avec Akamai (plus gros CDN du monde, plutôt hyper performant) a 12 centimes du giga, donc assez intéressant. Leur API est plutôt sympa aussi, donc tu peux faire a peu près ce que tu veux...

    Combine tout ça, et la tu auras de la vrai perf...

    Sinon pour les requêtes DNS, tu peux les prefetch dans ton head pour minimiser le temps d'accrochage par la suite (selon les configs et les navigateurs, les requêtes sont mises en cache pour au moins 1h ou plus) avec un truc du genre :

    My 2 cents

    (sorry pour les anglicismes, je sais plus trop parler français en ce moment...)

  3. Il y en a plusieurs, notamment :
    ne pas avoir des urls abscons dans le code source
    alléger pas la même occasion le code source pour plus de lisibilité
    et principalement de gérer les changements de cdn via propagation DNS.
    Par exemple, si la location de stockage des datas change, un simple changement de zone DNS permet de transférer le service sans le couper, de façon transparente, sans avoir a toucher a un seul instant le code source.

    A un niveau bien plus avancé, on peut aussi jouer sur la géolocalisation ou du round robin, mais ça c'est encore une autre histoire.
    La dessus, l'architecture de facebook peut apprendre pas mal de chose, je vous laisse chercher car le sujet est assez vaste...

  4. @Clément Collier: je suis d'accord avec tout ce que tu dis. Je commence aussi à revenir du soi-disant CDN de Google, et notamment de ses performances... Pour le cname devant le CDN personnel, j'ai bien compris, par contre, j'ai été voir sur Rackspace (c'est leur offre à 0,15 USD/Go dont tu parles ? http://www.rackspace.com/cloud/cloud_hosting_products/files/ ), mais je ne pense pas avoir besoin d'une telle solution pour les VU que je fais (assez faible finalement, et surtout très localisés en FR). Pour, pour le reste, merci de m'avoir éclairé sur le sujet, j'avoue que je n'étais pas à ce niveau de réflexion. Je ne suis de toute façon pas du tout persuadé de l'utilité des custom fonts pour un site web (mais bon, si c'est une demande du client, c'est autre chose). Si tu as des liens concernant l'architecture de Facebook dont tu parles, je suis preneur (j'avais déjà lu des billets sur High Scalability, mais ça s'arrête là).
  5. Pour l'offre de Rackspace, oui c'est bien celle la. Une fois converti, ça fait grosso-modo 12 centimes d'euros. Par contre si tu veux te faire un compte pour essayer (tu ne paye que ce que tu consomme de toute façon) j te conseille de passer par la version UK pour que l'origine du CDN soit géographiquement plus prés (leur datacenter est a Londre) : http://www.rackspace.co.uk/ (Au passage, leur offre de CloudServers est plutôt pas mal aussi, a mon sens beaucoup plus simple a prendre en main qu'un Amazon EC2 tant que t'as pas besoin d'artillerie lourde). Bon après c'est sur que au niveau personnel t'as pas forcément besoin de tout ça, mais ça reste assez intéressant a expérimenter et surtout c'est vraiment pas très cher pour le service. Même si tu as majoritairement du traffic FR, ça peut être intéressant puisque Akamai a quand même pas mal de serveur en France (personnellement, j'y vois une différence avec/sans). Mais je t'avoue que surement bien d'autre chose a faire et que ce n'est pas forcément une priorité pour un projet perso, il est juste bon de connaitre le fonctionnement pour un éventuel projet pro. Sinon j'ai vu que t'utilisais Cloudflare et c'est déjà une solution a moindre frais. (même si je n'apprécie pas tant que ça le service, trop flou a mon gout autant au niveau technique que reliabilité...) Pour le coup des custom fonts, il y a bien une utilité : se démarquer des autres. Comme tout ce qu'on peut faire dans le design de site web, c'est une façon comme une autre de se démarquer. Il y a même des sites qui base leur design principalement sur les fonts et tu peux arriver a des résultats plutôt sympas comme ça par exemple : http://www.amazeelabs.com/en - http://viljamis.com/ - http://www.austineastciders.com/ Bon encore une fois, si tu n'apportes pas plus d'importance que ça a ton design, l'intérêt est moindre. A noter que Typekit a une offre plutôt cool, si tu veux expérimenter sans te prendre la tête avec trop de css, de loading de font et création des cross browser font pack : https://typekit.com/plans (ils ont une offre gratos pour les trucs perso...). Pour des liens sur l'architecture de Facebook j'ai rien qui me vient en tête à l'instant mais si ça me revient je posterai tout ça ici. Personnellement, mes connaissances la dessus viennent surtout de l'étude du traffic et du code visible par tout le monde lorsque tu te connecte a Facebook tout simplement. En y passant un peu de temps et en procédant par recoupement / déduction tu peux déjà en apprendre pas mal. Après je n'ai pas une connaissance approfondie de la machinerie, loin de la (je pense que au final, même au sein de facebook, il n'y a pas grand monde qui sache exactement le pourquoi du comment de chaque brique !) Sinon, j'avais pas fais gaffe et pas escaper la ligne html que j'avais posté plus haut pour le prefetch DNS, la voila donc correctement (c'est une protocole relative url) : Pour finir, en regardant un peu tes archives, j'ai vu que tu cherchais a t'éloigner de gmail, je pourrais peut-être bien te proposer un truc, contactes moi si ça t'intéresse...
  6. @Clément Collier: J'ai été voir chez RackSpace: leur offre est vraiment intéressante. Pour autant, je ne suis pas réellement demandeur actuellement d'un service de CDN (au moins parce que je n'en ai pas réellement l'utilité). Mais je garde l'URL sous le coude pour le jour où j'en aurais besoin. J'utilise pour ma part davantage le côté Firewall de CloudFlare en fait. Alors après, si tu me dis que tu vois une différence avec/sans Akamai au niveau FR, tu risques de me faire envie :-) Pour CloudFlare, j'en reviens aussi. Je ne constate pas tant que ça de bénéfice en terme de rapidité, mais au moins j'y gagne en terme de protection de mon serveur (je pourrais me séparer de CloudFlare quand je saurais réinstaller un serveur en moins d'une heure, et ce de façon correcte, notamment en terme de droits et d'iptables). Pour ce qui est des customFonts, oui effectivement, ça peut servir pour les sites que tu montres. Mais je trouve que du coup ce sont des besoin ponctuels (= la majorité des sites/blogs n'en ont pas besoin, surtout si tout le monde choisit la même font). Pas réussi à voir ta ligne HTML, à chaque fois elle est virée par le système de commentaire de WP (ou alors c'est un des filtres CloudFlare/Apache qui la vire). Pour le DNS prefetch, j'en avais entendu parler (notamment via les innovations faites dans Chrome), mais je ne savais pas qu'on pouvait forcer celui-ci (du coup j'ai vu qu'on pouvait le faire en ajoutant la ligne suivante dans le HEAD) : 
    <link rel="dns-prefetch" href="//example.com">
    Et enfin, oui je suis preneur d'une alternative à Gmail :-)

  7. Un article très intéressant sur le sujet, avec notamment une comparaison des temps d'affichage : http://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/

Les nouveaux commentaires sont désactivés sur cette version statique du blog.