A presentation at WordCamp Paris in in Paris, France by Damien Senger
PETIT GUIDE DE PERFORMANCE
WEB TYPOGRAPHIQUE
Damien Senger ·
@
iamhiwelo · WordCamp 2016 ·
Paris
Crédit photo : Renaud Chodkowski
ça c’est moi : ) Damien Senger je suis designer & développeur web je suis passionné par la
typographie & j’ai monté mon petit studio : hiwelo . en une phrase : je n’aime pas les gens, mais j’aime leurs caractères ! et sinon j’aime débattre sur twitter : @ iamhiwelo
Je suis passionné · taré · obsédé · obnubilé par la typographie et WordPress,
et le Web,
et Amsterdam,
etc. (rayez la ou les mentions inutiles) Crédit photo : Sergio San Martín
La typographie : ce n’est pas qu’une histoire de designer Crédit photo : Carlos Martin Falo
Au commencement était le plomb… Crédit photo : Marcus Lyra
Le poids d’une variante de Source Sans Pro (Source Sans Pro Regular • format TTF) 150 Ko Crédit photo : timlewisnm
Le poids d’une famille « courante » de Source Sans Pro (Source Sans Pro Regular, Italic, Bold & Bold Italic • format TTF) Crédit photo : timlewisnm 532 Ko
Le poids d’une famille complète de Source Sans Pro (Source Sans pro complète issue de Google Fonts • format TTF) Crédit photo : timlewisnm 1 597 Ko
En desktop, ça passe… En mobile, ça casse !
Le chargement du texte : deux conceptions radicalement différentes Crédit photo : Tambako The Jagua r
FOIT : Flash of Invisible Text Crédit photo : Dr Azzacow 15 secondes
FOUT : Flash of Unstyled Text 5 secondes
Privilégier un accès rapide à l’information, même si l’affichage est imparfait
Gros problème : chaque navigateur a le choix de son comportement Crédit photo : Steven Johnson
Choisir une stratégie de chargement en CSS : l’espoir « font-display » ? Crédit photo : Matthijs vous le sentez, là, l’espoir dans ses yeux ?
Un espoir vain… C’est une proposition non officielle Google Crédit photo : Artus
Que pouvons-nous alors faire ? Crédit photo : Jacob Bø tter
RÉFLÉCHIR OPTIMISER Crédit photo : Jacob Bø tter
&
Choisir un font-stack adapté à son projet et ne pas avoir peur de l’exploiter Crédit photo : Marcus Lyra
Crédit photo : Marcus Lyra
Sur mobile : diminuez intelligemment le nombre de polices Crédit photo : Epsos
PRIORISER Crédit photo : Patrick Denker
!
Crédit photo : Stéphanie Walter DEVENIR ACTIFS
<!>
Connaître les capacités des plateformes de ses clients
Je jette un œil sur le tableau de diffusion des polices sur les OS mobiles : jordanm.co.uk/tinytype
Pour éviter d’être un facteur bloquant : forcer les fallbacks typographiques Crédit photo : Frédéric Bisson
Prendre l’exemple du Guardian : le chargement différé des fichiers de police Crédit photo : Phil Gyford
Navigateur moderne ? Suppo ! du format WOFF ? La police est déjà stockée ? On affiche la police On affiche le fallback On affiche le fallback On affiche le fallback Pendant le chargement : Crédit photo : Marcys Lyra
Le stockage est-il possible ? On récupère les fichiers en base64 via JSON Le JSON n’est pas déjà stocké On stocke et on affiche la police On ne modifie pas la page On ne modifie pas la page Une fois le chargement terminé : Crédit photo : Marcus Lyra
Des bibliothèques JS simples : Web Font Loader (Google – Typekit) Font Face Observer (Bram Stein) Crédit photo : Paul
L’ i d é e g é n é r a l e d e c e s s c r i p t s : h1 { font-family: Helvetica, …; } .fonts-loaded h1 { font-family: Lato, …; } Crédit photo : Melinda Seckington
Crédit photo : Stéphanie Walter
PENSER
AUX ICÔNES
oh ! un accent circonflexe !
L’optimisation, c’est aussi pour les icon-fonts grâce aux fallbacks et ligatures Crédit photo : Mike Ashton
https://hwlo.link/icon-font-svg/
Pro tip : les ligatures sont sensibles à la casse Crédit photo : Doran
Crédit photo : Stéphanie Walter (DÉ) COMPRESSER
Transformer le plomb en plume : allégeons nos fichiers de police
Fournir et utiliser des fichiers compressés : WOFF (ou WOFF2)
9+
Jouer avec le FOFT : Flash of Faux-Text Crédit photo : Garry Knight
Méthode en 3 temps :
Crédit photo : Stéphanie Walter OSER L’INDÉPENDANCE
• • •
Google Fonts, Typekit, etc. … Mwé… Tout ça ne fonctionne qu’à une condition : avoir le plein contrôle sur vos fichiers Crédit photo : Robert Couse-Baker
t MERCI DE VOTRE ATTENTION : ) Damien Senger @iamhiwelo at ’tion, j’aime beaucoup les trolls (et les nouveaux projets) donc n’hésitez pas !
Ton site est responsive ? C’est bien ! Et ta typo dans l’histoire ?
Je vous propose un petit tour d’horizon des techniques d’optimisation de nos sales caractères afin que la typographie ne soit plus considéré comme un facteur bloquant pour le chargement de nos pages.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.