Résumé de la conférence : Petit guide de performance web typographique

Notez que ces astuces peuvent être facilement transcrites à n’importe quel CMS.

Cette conférence a été réalisée par Damien Senger.

Voir les slides de la conférence

La typo n’est pas qu’une histoire de designer.

Les polices personnalisées sont lourdes, exemple avec la Source Sans Pro.

  • Une variante pèse 150 Ko
  • La famille courante (Regular, Italic, Bold et Bold Italic) pèse 532 Ko
  • La famille complète pèse 1 597 Ko

Pour diminuer ce poids, il faut passer les polices via le générateur de Font Squirel, y compris celle de Google Fonts. Passez par le mode « Expert » en ne prenant que les caractères dont vous avez besoin. Par exemple, vous n’avez pas besoin des caractères cyrilliques si vous ne prévoyez pas de faire un site en Russe.

Ne prenez en charge également que les fichiers compressés WOFF (à partir de IE9).

Conceptions différentes

Pour charger du texte, il y a 2 conceptions totalement différentes :

  • Le FOIT (Flash Of Invisible Texte) : on n’affiche rien tant que la police n’est pas chargée.
  • Le FOUT (Flach Of Unstyled Text) : on affiche une police en attendant que la police personnalisée soit chargée.

La méthode FOUT permet de privilégier un accès rapide à l’information même si l’affichage est imparfait.

Le GROS problème de ces méthodes : chaque navigateur fait ce qu’il veut.

Solutions

Il faut choisir une font-stack adaptée à son projet et l’exploiter.

Sur mobile, on peut diminuer le nombre de polices et prioriser les contenus. On ne peut mettre également que du faux bold et italic.

Capacités des plateformes de ses clients

Il faut connaître les capacités des plateformes de ses clients en se référant au tableau de diffusion des polices sur les différents OS mobiles.

Pour éviter d’être un facteur bloquant, il faut forcer les fallbacks typographiques.

Bibliothèque JS

Il existe des bibliothèques JS simples :

Ces scripts rajoutent des classes pour permettre l’affichage des polices de fallbacks en attendant que la police personnalisée soit chargée.

L’optimisation est également valable pour les polices d’icônes grâce aux fallbacks et ligatures.

Les ligatures sont sensibles à la casse.

 

Vous pouvez jouer avec le FOFT (Flash of Faux-Text) avec une méthode en 3 temps :

  1. Fallback websafe
  2. custom Regular + faux Bold
  3. custom Regular + custom Bold

Vous pouvez vérifier si le faux bold passe sur Firefox PC, s’il passe ici, il passera sur tout les navigateurs et OS.

 

Conférence de  Damien Senger. Voir ses  slides.