Design de la performance web

La performance web ce n'est pas qu'un truc de développeur.
Dans une équipe, chacun doit y mettre sa main à la patte de l'ergonome au développeur. Format des images, choix typographique, ergonomie de l'attente, animations ou encore hiérarchie de l'affichage : chacun de ces choix va impacter la performance d'une page web.
Regardons ensemble ce qu'un designer peut faire pour faciliter la vie de son développeur.

Conférence donnée dans le cadre de BlendWebMix, la plus importante conférence francophone, à Lyon le jeudi 3 novembre 2016.

Cette présentation est mise à disposition selon les termes de la Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International.

Transcript

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