Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Optimiser la performance par un choix optimal des dimensions des images responsives

Optimiser la performance par un choix optimal des dimensions des images responsives

https://talks.nicolas-hoizey.com/U7c3zE/optimiser-la-performance-par-un-choix-optimal-des-dimensions-des-images-responsives

L’usage des standards pour les images responsives (srcset-w principalement) est devenu incontournable, mais n’est pas toujours accompagné d’une réflexion de fond sur leur bonne utilisation.

Plus particulièrement, trop de sites utilisent des tailles d’images arbitraires dans leurs srcset-w, négligeant une piste d’optimisation de performance conséquente.

Il sera donc question de différentes méthodes permettant de définir les meilleures dimensions possibles pour ces images, permettant d’une part d’optimiser la performance pour les visiteurs, mais aussi d’autre part d’optimiser les ressources de génération, stockage et bande passante nécessaires côté site.

Il ne sera par contre pas question dans cette conférence de taux de compression optimal, de format d’encodage des images ou de solution automatisant la gestion de toutes ces optimisations.

Nicolas Hoizey

October 09, 2018
Tweet

More Decks by Nicolas Hoizey

Other Decks in Technology

Transcript

  1. Choisir les dimensions des images responsives pour optimiser la webperf

    9 octobre 2018 ❤
  2. Nicolas Hoizey Co-fondateur, directeur de l’innovation @nhoizey @nhoizey@cafe.des-blogueurs.org

  3. Les images responsives

  4. srcset-x 4 Beau Soleil Beau Soleil Beau Soleil Bannière Bannière

    Bannière Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Largeur d’image fixe et densité d’écran variable <img src="…" alt="…" srcset="image.jpg 1x, image-2x.jpg 2x">
  5. srcset-w 5 Beau Soleil Beau Soleil Beau Soleil Bannière Bannière

    Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Largeur d’image variable, pleine largeur, et densité d’écran variable <img src="…" alt="…" srcset="image-640.jpg 640w, image-1024.jpg 1024w">
  6. srcset-w et sizes 6 Beau Soleil Beau Soleil Bannière Bannière

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Beau Soleil Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. Largeur d’image variable, différente selon breakpoints, et densité d’écran variable <img src="…" alt="…" srcset="image-640.jpg 640w, image-1024.jpg 1024w" sizes="(min-width: 1280px) 400px, (min-width: 640px) 60vw, 100vw">
  7. picture, source, srcset-w et sizes 7 Beau Soleil Beau Soleil

    Bannière Bannière Lorem ipsum dolor Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Beau Soleil Bannière Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio dui, varius ac enim quis, accumsan porta nulla. Sed laoreet nibh sit amet lobortis porta. Donec sagittis est a tortor varius consectetur. Praesent sit amet sollicitudin mauris, non bibendum ante. Integer imperdiet in magna ac elementum. Sed arcu nibh, mattis ac tortor ultricies, consequat varius odio. Morbi at nunc at dolor auctor imperdiet in sit amet tortor. Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio dui, varius ac enim quis, accumsan porta nulla. Sed laoreet nibh sit amet lobortis porta. Donec sagittis est a tortor varius consectetur. Lorem ipsum dolor Largeur variable, contenu ou ratio different selon breakpoints, et densité variable <picture> <source media=”(max-width: 1280px)" srcset="…" sizes="100vw"> <img src="…" alt="…" srcset="…" sizes="500px"> </picture>
  8. sizes décrit le layout

  9. Côté CSS 9 Beau Soleil Beau Soleil Bannière Bannière Lorem

    ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Beau Soleil Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. @media (min-width: 640px) { .card img { width: 60vw; } } @media (min-width: 1280px) { .card img { width: 400px; } }
  10. Lien entre CSS et sizes 10 Beau Soleil Beau Soleil

    Bannière Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Beau Soleil Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. @media (min-width: 640px) { .card img { width: 60vw; } } <img src="…" alt="…" srcset="image-640.jpg 640w, image-1024.jpg 1024w" sizes="(min-width: 1280px) 400px, (min-width: 640px) 60vw, 100vw">
  11. srcset liste les images disponibles

  12. Quelle dimensions dans srcset ? Les dimensions ne sont pas

    dictées par le layout/design Toutes les images n’occupent pas le même espace dans les pages Comment décider quelles dimensions prévoir ? <img src="…" alt="…" srcset="image-???.jpg ???w, image-???.jpg ???w" sizes="…"> 12
  13. Les dimensions attendues Largeur d’image Proportion de vues Images attendues

  14. Fournir les images aux dimensions exactement attendues

  15. Les dimensions attendues Largeur d’image Proportion de vues Images attendues

  16. Des dimensions exactes Largeur d’image Proportion de vues Images attendues

    Images servies
  17. Des dimensions exactes Demander au serveur une image aux dimensions

    exactes nécessaires pour l’affichage : • Le meilleur moyen d’éviter le gaspillage de bande passante et de ressources côté navigateur 17 !
  18. Des dimensions exactes Demander au serveur une image aux dimensions

    exactes nécessaires pour l’affichage : Impossible de mettre toutes les dimensions dans le srcset du HTML fourni par le serveur ◦ Donc nécessite JavaScript ◦ Donc retarde le chargement ◦ Donc utilisable uniquement en cas de lazy-loading 18 ☹
  19. Des dimensions exactes pour le lazy-load Même pour le lazy-load,

    des dimensions exactes impliquent : • Soit une génération à la volée systématique ◦ Donc une latence supplémentaire de traitement côté serveur ◦ Et potentiellement une compression moins forte faute de temps de calcul 19 ! Soit un système de cache des images aux bonnes dimensions ◦ Donc une capacité de stockage faramineuse ◦ Ou des approximations de dimensions par paliers !
  20. Les breakpoints d’images

  21. Les breakpoints d’images Jason Grigsby (Cloudfour) évoque la notion de

    breakpoints d’images https://cloudfour.com/thinks/responsive-images-101-part-9-image-breakpoints/ 21
  22. Le budget de performance

  23. Le budget de performance Le budget de performance défini un

    écart de poids ∆ à ne pas dépasser entre deux dimensions consécutives 23
  24. Responsive Image Breakpoints Generator Un outil développé par Cloudinary suite

    aux billets de Jason Grigsby, et disponible via une interface ou via l’API : http://www.responsivebreakpoints.com/ Paramètres : • Différence de poids ∆ entre variantes • Nombre total d’images • Prise en compte de la densité x2 • Direction Artistique 24
  25. Responsive Image Breakpoints Generator 25

  26. Responsive Image Breakpoints Generator 26

  27. Les dimensions attendues Largeur d’image Proportion de vues Images attendues

  28. Le budget de performance Largeur d’image Proportion de vues Images

    attendues Images servies
  29. Le budget de performance Largeur d’image Proportion de vues Images

    attendues Images servies « gaspillage » ?
  30. Le budget de performance Un écart de poids ∆ à

    ne pas dépasser entre deux dimensions consécutives : • S’il y a peu d’images, le navigateur ne télécharge pas beaucoup plus que nécessaire 30 !
  31. Le budget de performance Un écart de poids ∆ à

    ne pas dépasser entre deux dimensions consécutives : Les calculs de paliers doivent être fait individuellement pour chaque image, et non pour chaque emplacement 31 ☹ ☹ ☹ Certaines tailles calculées peuvent s’avérer inutiles Surcharge non négligeable si la page a beaucoup d’images, et qu’il faut télécharger ∆ en trop, pour chacune, pour des viewport et densité donnés
  32. Les requêtes les plus fréquentes

  33. Les requêtes les plus fréquentes Limiter : • Les écarts

    de poids entre images attendues et fournies • Le nombre d’images à générer/stocker Nécessite des données statistiques, et des calculs complexes. 33
  34. Les dimensions attendues Largeur d’image Proportion de vues Images attendues

  35. Les requêtes les plus fréquentes Largeur d’image Proportion de vues

    Images attendues Images servies
  36. Les requêtes les plus fréquentes Largeur d’image Proportion de vues

    Images attendues Images servies « gaspillage »
  37. Étape 1 : statistiques des visiteurs Collecter les statistiques de

    viewports et densité d’écran des visiteurs pendant quelque temps 37
  38. Étape 1 : statistiques des visiteurs 38 // get device

    pixel ratio in dppx var screen_density = typeof window == 'undefined’ ? 0 : +window.devicePixelRatio || Math.sqrt(screen.deviceXDPI * screen.deviceYDPI) / 96 || 0 // keep only 3 decimals screen_density = +(Math.round(screen_density + 'e+3') + 'e-3') // get viewport width var viewport_width = Math.max( document.documentElement.clientWidth, window.innerWidth || 0, ) https://gist.github.com/nhoizey/a993b1f8e0263bd2ef83e78a4378bbb1
  39. Étape 2 : largeur d’image selon viewports Déterminer la variation

    de la largeur d’image selon les viewports 39
  40. Étape 3 : consolider les données 1. Pour chaque couple

    viewport/densité des statistiques visiteurs, associer : ◦ Largeur d’image nécessaire = largeur d’image CSS (à ce viewport) * densité ◦ Nombre de pages vues 2. Grouper par largeurs d’image identiques 3. Transformer en pourcentages 40
  41. Étape 4 : identifier les valeurs cibles Tester l’impact du

    choix simple des valeurs les plus courantes. 41
  42. Étape 5 : finaliser le choix Assurer un faible écart

    entre valeurs retenues et valeurs réelles 43
  43. Étape 5 : finaliser le choix 44

  44. Les requêtes les plus fréquentes Limiter les écarts de poids

    entre images attendues et fournies : • Quel que soit le nombre d’images, le navigateur ne télécharge pas (beaucoup) plus que nécessaire 45 ! Les calculs sont fait par emplacement et non image par image !
  45. Les requêtes les plus fréquentes Limiter les écarts de poids

    entre images attendues et fournies : Les calculs sont laborieux 46 ☹ ☹ Il faut les refaire régulièrement, pour prendre en compte les changements de statistiques
  46. Automatiser 47 https://xkcd.com/1319/

  47. responsive-images-widths Un projet Node.js open source disponible sur Github :

    https://github.com/cleverage/responsive-image-widths Opérationnel : ◦ Prendre en entrée un fichier CSV de statistiques ◦ Déterminer la largeur d’une image selon les viewports avec Puppeteer ◦ Consolider toutes ces données 48
  48. responsive-images-widths 49

  49. responsive-images-widths À finaliser : ◦ Déterminer les valeurs optimales par

    clustering (algorithme de partitionnement de données type k-means ou de machine learning) ◦ Prendre en charge toutes les images d’une page en une fois ◦ Automatiser l’intégration à un workflow de développement 50
  50. Automatiser 51 https://xkcd.com/1319/ Statut

  51. Automatiser 52 https://xkcd.com/1319/