Design de la performance web

6362477fcff413a76db8da108fade362?s=47 Damien Senger
November 03, 2016

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.

6362477fcff413a76db8da108fade362?s=128

Damien Senger

November 03, 2016
Tweet

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