Poids des pages :attention danger !Quelques rappels utiles
Pourquoi parlerde mobile ?de mobile ?
Pourquoi parlerde mobile ?de mobile ?• Appareils moins performants• Utilisateurs plus impatients• Optimisations valables p...
Débit 3G
Débit 3G7.2 Mbit/s en théorie2 Mbit/s max500-1500 kbit/s en moyenne
Page ± 1.5 MBhttp://httparchive.org/
Page ± 1.5 MBChargement de 10 à 20 s !http://www.webperformancetoday.com/2012/10/03/what-we-learned-from-testing-the-mobil...
On n’y peut rienConnexion antenne 0 - 2300 msAutorisation SIM 200 msRésolution DNS 200 msConnection TCP 200 msEchange TLS ...
0. Mesurer
0. Mesurer• WebPageTest• PageSpeed Insights• YSlow• Google Analytics• Garder des enregistrements !
1. Réduire
1. Réduire• Images• Minifier• Concaténer• En-têtes de cache• Vanilla JS
2. Prioriser
2. Prioriser• CSS• JS
3. Comparer
3. Comparer• Temps de chargement• Engagement des visiteurs• Bande passante
4. Fignoler• Sprites d’images• Encoder en base64• Font Subset• FastClick.js
http://qkme.me/3ujva3
A retenir• Mesurez• Réduisez• Priorisez• Recommencez !
Merci !@goulvenchparis-web.frsudweb.fr
Prochain SlideShare
Chargement dans…5
×

Poids des pages, attention danger

749 vues

Publié le

Présentation donnée au Human Talk de mai 2013.

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Poids des pages, attention danger

  1. 1. Poids des pages :attention danger !Quelques rappels utiles
  2. 2. Pourquoi parlerde mobile ?de mobile ?
  3. 3. Pourquoi parlerde mobile ?de mobile ?• Appareils moins performants• Utilisateurs plus impatients• Optimisations valables pour le desktop
  4. 4. Débit 3G
  5. 5. Débit 3G7.2 Mbit/s en théorie2 Mbit/s max500-1500 kbit/s en moyenne
  6. 6. Page ± 1.5 MBhttp://httparchive.org/
  7. 7. Page ± 1.5 MBChargement de 10 à 20 s !http://www.webperformancetoday.com/2012/10/03/what-we-learned-from-testing-the-mobile-load-times-of-200-top-retail-sites-over-3g-and-lte/
  8. 8. On n’y peut rienConnexion antenne 0 - 2300 msAutorisation SIM 200 msRésolution DNS 200 msConnection TCP 200 msEchange TLS 0 - 400 msRequête HTTP 200 msTOTAL 800 - 3500 msBreaking the 1000ms time to glass mobile barrierhttp://www.youtube.com/watch?v=Il4swGfTOSM
  9. 9. 0. Mesurer
  10. 10. 0. Mesurer• WebPageTest• PageSpeed Insights• YSlow• Google Analytics• Garder des enregistrements !
  11. 11. 1. Réduire
  12. 12. 1. Réduire• Images• Minifier• Concaténer• En-têtes de cache• Vanilla JS
  13. 13. 2. Prioriser
  14. 14. 2. Prioriser• CSS• JS
  15. 15. 3. Comparer
  16. 16. 3. Comparer• Temps de chargement• Engagement des visiteurs• Bande passante
  17. 17. 4. Fignoler• Sprites d’images• Encoder en base64• Font Subset• FastClick.js
  18. 18. http://qkme.me/3ujva3
  19. 19. A retenir• Mesurez• Réduisez• Priorisez• Recommencez !
  20. 20. Merci !@goulvenchparis-web.frsudweb.fr

×