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
   

   View Slide

2. Damien Senger
   designer et développeur web
   hiwelo.co • @iamhiwelo
   Raccoon Studio
   creative web studio
   raccoon.studio
   

   View Slide

3. DESIGN DE LA PERFORMANCE
   

   View Slide

4. La performance,

   pourquoi ?
   

   View Slide

5. La performance, c’est important.
   

   View Slide

6. La performance est un élément
   central de l’expérience utilisateur
   

   View Slide

7. “After 3 seconds,

   40 % of users will abandon your site.
   Lara Hogan, Etsy
   

   View Slide

8. Le temps de chargement a un impact
   sur la confiance des utilisateurs
   

   View Slide

9. La performance, une question à 

   se poser à chaque étape d’un projet.
   

   View Slide

10. Une question de mobilité,
    mais pas que.
    

    View Slide

11. La performance,

    pour qui ?
    

    View Slide

12. Pour tout le monde.
    

    View Slide

13. Et dans notre cas, pour Sam.

    Sam est cosmonaute, sur Mars.
    Voici Sam !
    

    View Slide

14. Pour envoyer un signal sur Terre,
    Sam a besoin de 13 minutes.
    

    View Slide

15. À votre avis, combien de temps
    pour afficher une page web ?
    

    View Slide

16. À votre avis, combien de temps
    pour afficher une page web ?
    TROP
    

    View Slide

17. La réponse n’est pas 26 minutes.

    Un site, ce n’est pas une requête.
    

    View Slide

18. Mais Sam pourrait être autant
    handicapé•e dans le métro, ou ailleurs
    

    View Slide

19. Les réseaux cellulaires :
    un besoin de performance important
    

    View Slide

20. Appareil

    cellulaire
    Internet
    

    View Slide

21. Appareil

    cellulaire
    Internet
    

    View Slide

22. Appareil

    cellulaire
    Internet
    

    View Slide

23. La performance,
    quand et comment ?
    

    View Slide

24. La performance, ce n’est pas
    qu’une problématique technique.
    

    View Slide

25. Il est nécessaire d’avoir une
    collaboration designer – développeur
    

    View Slide

26. Cette collaboration doit avoir lieu
    à chaque étape du projet
    

    View Slide

27. Dès la conception, il est important
    de définir des priorités
    

    View Slide

28. Ces priorités permettront de trancher
    en cas de conflit design – technique
    

    View Slide

29. Ces priorités doivent être

    concrètes et précises
    

    View Slide

30. Il s’agit par exemple d’un temps de
    chargement de page moyen,
    

    View Slide

31. ou bien d’un objectif en terme de
    poids des fichiers du projet,
    

    View Slide

32. ou bien de temps d’accès avant
    d’accéder à une information précise.
    

    View Slide

33. Ces objectifs doivent être connus
    de tou•te•s dès le début
    

    View Slide

34. Ils permettent d’orienter les choix,
    notamment en design
    

    View Slide

35. La performance,
    par le design.
    

    View Slide

36. Il est important de connaître et de
    respecter les zones de confort de chacun•e
    

    View Slide

37. Des discussions régulières entre
    équipe design et développeur
    

    View Slide

38. À partir du cahier des charges, priorisez
    les fonctionnalités et les contenus
    

    View Slide

39. Le design doit être réfléchi pour limiter
    le recours aux ressources extérieures
    

    View Slide

40. Pour les images : définissez ce qui est
    nécessaire ou optionnel (lazy-loading)
    

    View Slide

41. Limitez le recours à trop de
    variantes typographiques
    

    View Slide

42. Et définissez à partir de quand
    afficher chaque variante
    

    View Slide

43. En mobilité, êtes-vous sûr que votre corps
    de labeur doit vraiment être personnalisé ?
    

    View Slide

44. Le design doit définir comment
    faire attendre l’utilisateur
    

    View Slide

45. C’est le design de l’attente.
    

    View Slide

46. Utilisez le design chaque fois que
    l’optimisation technique n’est pas suffisante
    

    View Slide

47. Animations, enchaînements, etc. :
    le design peut faire attendre l’utilisateur
    

    View Slide

48. Réfléchissez ensemble au moment
    opportun pour les chargements
    

    View Slide

49. Optimisez vos chargements et l’appel
    de vos ressources en tâche de fond
    

    View Slide

50. Dès le design, 

    penser mobile first voir content first
    

    View Slide

51. Dès la conception, priorisez
    l’affichage de vos contenus
    

    View Slide

52. Le cœur de votre contenu 

    doit être accessible rapidement
    

    View Slide

53. Seule l’expérience utilisateur doit être
    l’objet d’une amélioration progressive.
    

    View Slide

54. Et n’oubliez pas, quoi qu’il arrive,

    le plus lourd : c’est les images…
    

    View Slide

55. La performance,
    par la collaboration.
    

    View Slide

56. Repensez le design de vos projets :

    pensez « modulaire »
    

    View Slide

57. Le style guide et la cohérence graphique :

    la baguette magique du designer
    

    View Slide

58. Entre le design et le développement,

    choisissez les bons formats de fichier
    

    View Slide

59. JPG, PNG, SVG :
    chaque format a son intérêt
    

    View Slide

60. Le JPEG, format photographique
    par excellence
    

    View Slide

61. Les PNG c’est Gif en mieux,

    parfait pour les illustrations
    

    View Slide

62. WebP…
    

    View Slide

63. Les GIF, c’est bien pour Slack.

    Ailleurs, c’est non.
    

    View Slide

64. SVG, partout, tout le temps.

    Sauf pour les photos.
    

    View Slide

65. Réduire les octets, c’est bien.

    Réduire les requêtes, c’est mieux.
    

    View Slide

66. Côté typographie, beaucoup
    d’optimisations sont possibles
    

    View Slide

67. Limitez vos @font-face

    IE6-8 chargent y compris si inutilisé
    

    View Slide

68. Adaptez vos appels aux fonts

    selon les media queries
    

    View Slide

69. Penser à faire du lazy-loading de
    vos variantes non prioritaires
    

    View Slide

70. Vous pouvez aussi diminuer le
    poids en optimisant le subsetting
    

    View Slide

71. La performance,
    par le technique.
    

    View Slide

72. Optimisez vos assets 

    de manière automatique
    

    View Slide

73. Faites appel à des images
    responsives (srcset)
    

    View Slide

74. Vous n’avez plus d’excuse :
    WordPress gère srcset nativement
    

    View Slide

75. <
    wp_get_attachment_image_srcset();
    wp_get_attachment_image_sizes();

    wp_make_content_images_responsive();
    ?>
    sizes="(max-width: 320px) 95vw,
    (max-width: 780px) 75vw,
    50vw"
    src="original.jpg"
    alt="Alternative text">
    

    View Slide

76. Pensez à optimiser 

    vos politiques de cache
    

    View Slide

77. Concaténez vos fichiers.

    Tout le temps.
    

    View Slide

78. Apprenez à faire
    du bon HTML et du bon CSS
    

    View Slide

79. Apprenez à faire
    du bon HTML et du bon CSS
    Pour de vrai
    

    View Slide

80. Optimiser l’interprétation :

    CSS modulaire et lutte contre les div
    

    View Slide

81. “Parce qu’au quotidien :
    la divite, c’est pas automatique.
    Un raton râleur.
    

    View Slide

82. Apprenez la spécificité en CSS

    et apprenez à cibler correctement
    

    View Slide

83. Le design de la perf’,
    en bref.
    

    View Slide

84. Le design de la performance :
    c’est l’art de la collaboration.
    1.
    

    View Slide

85. Travaillez en équipe,
    trouvez des compromis.
    2.
    

    View Slide

86. Travaillez modulaire,
    notamment avec des style guides.
    3.
    

    View Slide

87. Testez, testez et testez.
    4.
    

    View Slide

88. Ce n’est pas qu’une affaire de métrique, 

    mais c’est surtout du ressenti.
    5.
    

    View Slide

89. Merci pour votre attention :)
    @iamhiwelo
    

    View Slide