Slide 1
Slide 1 text
DESIGN DE LA PERFORMANCE
BlendWebMix • Lyon • 2 et 3 novembre 2016
Slide 2
Slide 2 text
Damien Senger
designer et développeur web
hiwelo.co • @iamhiwelo
Raccoon Studio
creative web studio
raccoon.studio
Slide 3
Slide 3 text
DESIGN DE LA PERFORMANCE
Slide 4
Slide 4 text
La performance,
pourquoi ?
Slide 5
Slide 5 text
La performance, c’est important.
Slide 6
Slide 6 text
La performance est un élément
central de l’expérience utilisateur
Slide 7
Slide 7 text
“After 3 seconds,
40 % of users will abandon your site.
Lara Hogan, Etsy
Slide 8
Slide 8 text
Le temps de chargement a un impact
sur la confiance des utilisateurs
Slide 9
Slide 9 text
La performance, une question à
se poser à chaque étape d’un projet.
Slide 10
Slide 10 text
Une question de mobilité,
mais pas que.
Slide 11
Slide 11 text
La performance,
pour qui ?
Slide 12
Slide 12 text
Pour tout le monde.
Slide 13
Slide 13 text
Et dans notre cas, pour Sam.
Sam est cosmonaute, sur Mars.
Voici Sam !
Slide 14
Slide 14 text
Pour envoyer un signal sur Terre,
Sam a besoin de 13 minutes.
Slide 15
Slide 15 text
À votre avis, combien de temps
pour afficher une page web ?
Slide 16
Slide 16 text
À votre avis, combien de temps
pour afficher une page web ?
TROP
Slide 17
Slide 17 text
La réponse n’est pas 26 minutes.
Un site, ce n’est pas une requête.
Slide 18
Slide 18 text
Mais Sam pourrait être autant
handicapé•e dans le métro, ou ailleurs
Slide 19
Slide 19 text
Les réseaux cellulaires :
un besoin de performance important
Slide 20
Slide 20 text
Appareil
cellulaire
Internet
Slide 21
Slide 21 text
Appareil
cellulaire
Internet
Slide 22
Slide 22 text
Appareil
cellulaire
Internet
Slide 23
Slide 23 text
La performance,
quand et comment ?
Slide 24
Slide 24 text
La performance, ce n’est pas
qu’une problématique technique.
Slide 25
Slide 25 text
Il est nécessaire d’avoir une
collaboration designer – développeur
Slide 26
Slide 26 text
Cette collaboration doit avoir lieu
à chaque étape du projet
Slide 27
Slide 27 text
Dès la conception, il est important
de définir des priorités
Slide 28
Slide 28 text
Ces priorités permettront de trancher
en cas de conflit design – technique
Slide 29
Slide 29 text
Ces priorités doivent être
concrètes et précises
Slide 30
Slide 30 text
Il s’agit par exemple d’un temps de
chargement de page moyen,
Slide 31
Slide 31 text
ou bien d’un objectif en terme de
poids des fichiers du projet,
Slide 32
Slide 32 text
ou bien de temps d’accès avant
d’accéder à une information précise.
Slide 33
Slide 33 text
Ces objectifs doivent être connus
de tou•te•s dès le début
Slide 34
Slide 34 text
Ils permettent d’orienter les choix,
notamment en design
Slide 35
Slide 35 text
La performance,
par le design.
Slide 36
Slide 36 text
Il est important de connaître et de
respecter les zones de confort de chacun•e
Slide 37
Slide 37 text
Des discussions régulières entre
équipe design et développeur
Slide 38
Slide 38 text
À partir du cahier des charges, priorisez
les fonctionnalités et les contenus
Slide 39
Slide 39 text
Le design doit être réfléchi pour limiter
le recours aux ressources extérieures
Slide 40
Slide 40 text
Pour les images : définissez ce qui est
nécessaire ou optionnel (lazy-loading)
Slide 41
Slide 41 text
Limitez le recours à trop de
variantes typographiques
Slide 42
Slide 42 text
Et définissez à partir de quand
afficher chaque variante
Slide 43
Slide 43 text
En mobilité, êtes-vous sûr que votre corps
de labeur doit vraiment être personnalisé ?
Slide 44
Slide 44 text
Le design doit définir comment
faire attendre l’utilisateur
Slide 45
Slide 45 text
C’est le design de l’attente.
Slide 46
Slide 46 text
Utilisez le design chaque fois que
l’optimisation technique n’est pas suffisante
Slide 47
Slide 47 text
Animations, enchaînements, etc. :
le design peut faire attendre l’utilisateur
Slide 48
Slide 48 text
Réfléchissez ensemble au moment
opportun pour les chargements
Slide 49
Slide 49 text
Optimisez vos chargements et l’appel
de vos ressources en tâche de fond
Slide 50
Slide 50 text
Dès le design,
penser mobile first voir content first
Slide 51
Slide 51 text
Dès la conception, priorisez
l’affichage de vos contenus
Slide 52
Slide 52 text
Le cœur de votre contenu
doit être accessible rapidement
Slide 53
Slide 53 text
Seule l’expérience utilisateur doit être
l’objet d’une amélioration progressive.
Slide 54
Slide 54 text
Et n’oubliez pas, quoi qu’il arrive,
le plus lourd : c’est les images…
Slide 55
Slide 55 text
La performance,
par la collaboration.
Slide 56
Slide 56 text
Repensez le design de vos projets :
pensez « modulaire »
Slide 57
Slide 57 text
Le style guide et la cohérence graphique :
la baguette magique du designer
Slide 58
Slide 58 text
Entre le design et le développement,
choisissez les bons formats de fichier
Slide 59
Slide 59 text
JPG, PNG, SVG :
chaque format a son intérêt
Slide 60
Slide 60 text
Le JPEG, format photographique
par excellence
Slide 61
Slide 61 text
Les PNG c’est Gif en mieux,
parfait pour les illustrations
Slide 62
Slide 62 text
WebP…
Slide 63
Slide 63 text
Les GIF, c’est bien pour Slack.
Ailleurs, c’est non.
Slide 64
Slide 64 text
SVG, partout, tout le temps.
Sauf pour les photos.
Slide 65
Slide 65 text
Réduire les octets, c’est bien.
Réduire les requêtes, c’est mieux.
Slide 66
Slide 66 text
Côté typographie, beaucoup
d’optimisations sont possibles
Slide 67
Slide 67 text
Limitez vos @font-face
IE6-8 chargent y compris si inutilisé
Slide 68
Slide 68 text
Adaptez vos appels aux fonts
selon les media queries
Slide 69
Slide 69 text
Penser à faire du lazy-loading de
vos variantes non prioritaires
Slide 70
Slide 70 text
Vous pouvez aussi diminuer le
poids en optimisant le subsetting
Slide 71
Slide 71 text
La performance,
par le technique.
Slide 72
Slide 72 text
Optimisez vos assets
de manière automatique
Slide 73
Slide 73 text
Faites appel à des images
responsives (srcset)
Slide 74
Slide 74 text
Vous n’avez plus d’excuse :
WordPress gère srcset nativement
Slide 75
Slide 75 text
<
Slide 76
Slide 76 text
Pensez à optimiser
vos politiques de cache
Slide 77
Slide 77 text
Concaténez vos fichiers.
Tout le temps.
Slide 78
Slide 78 text
Apprenez à faire
du bon HTML et du bon CSS
Slide 79
Slide 79 text
Apprenez à faire
du bon HTML et du bon CSS
Pour de vrai
Slide 80
Slide 80 text
Optimiser l’interprétation :
CSS modulaire et lutte contre les div
Slide 81
Slide 81 text
“Parce qu’au quotidien :
la divite, c’est pas automatique.
Un raton râleur.
Slide 82
Slide 82 text
Apprenez la spécificité en CSS
et apprenez à cibler correctement
Slide 83
Slide 83 text
Le design de la perf’,
en bref.
Slide 84
Slide 84 text
Le design de la performance :
c’est l’art de la collaboration.
1.
Slide 85
Slide 85 text
Travaillez en équipe,
trouvez des compromis.
2.
Slide 86
Slide 86 text
Travaillez modulaire,
notamment avec des style guides.
3.
Slide 87
Slide 87 text
Testez, testez et testez.
4.
Slide 88
Slide 88 text
Ce n’est pas qu’une affaire de métrique,
mais c’est surtout du ressenti.
5.
Slide 89
Slide 89 text
Merci pour votre attention :)
@iamhiwelo