Performance des applications webquoi faire et pourquoi<br />Université du SI – Casa 2011Éric Daspet<br />1<br />© OCTO 201...
Performance des applications webquoi faire et pourquoi<br />Université du SI – Casa 2011Éric Daspet<br />2<br />© OCTO 201...
Pourquoi ?<br />« Usersreallyrespond to speed »<br />3<br />© OCTO 2010 <br />Marissa Meyer, VP user experience, Google<br />
Pourquoi ?<br />4<br />© OCTO 2010 <br />« Users really respond to speed » Marissa Meyer, VP user experience, Google<br />
Pourquoi ?<br />5<br />© OCTO 2010 <br />« Usersreallyrespond to speed » Marissa Meyer, VP user experience, Google<br />?<...
6<br />© OCTO 2010 <br />
7<br />© OCTO 2010 <br />
8<br />© OCTO 2010 <br />
9<br />© OCTO 2010 <br />« Users really respond to speed » Marissa Meyer, VP user experience, Google<br />
10<br />© OCTO 2010 <br />« Users really respond to speed » Marissa Meyer, VP user experience, Google<br />C’est pire en r...
Chargement complet d’un écran<br />4 à 10 secondestout compris :images, javascript, flash, rendu, initialisation, …<br />1...
12<br />© OCTO 2010 <br />
13<br />© OCTO 2010 <br />95 %front-end<br />5 %<br />back-end<br />
14<br />© OCTO 2010 <br />En faire moins<br />pour plus de performances<br />sans perte fonctionnelleni perte graphique<br />
15<br />© OCTO 2010 <br />Moinsde requêtes HTTP<br />Caches HTTPCache-Control: max-age:360000<br />
16<br />© OCTO 2010 <br />Moinsde requêtes HTTP<br />Caches HTTP<br />Fusions de fichiers<br />Réutilisations<br />Sprites...
17<br />© OCTO 2010 <br />Moinsde requêtes HTTP<br />Caches HTTP<br />Fusions de fichiers<br />Réutilisations<br />Sprites...
18<br />© OCTO 2010 <br />Moinsde requêtes HTTP<br />Caches HTTP<br />Fusions de fichiers<br />Réutilisations<br />Sprites...
19<br />© OCTO 2010 <br />Moinsde volume échangé<br />Compression HTTP<br />Compression des images<br />Minimisation des c...
20<br />© OCTO 2010 <br />Moinsde séquentiel<br />Domaines multiples<br />Javascript asynchrone<br />Lazyloading<br />
21<br />© OCTO 2010 <br /><ul><li>requêtes
volume
séquentiel</li></ul>et c’est seulement après qu’on optimise le code et le système … si et seulement si vous en avez encore...
22<br />© OCTO 2010 <br />YslowYahoo! Best Practices<br />Google Page SpeedWeb Page Test<br />Webperf User Group France / ...
23<br />© OCTO 2010 <br />questions, réactions, discussions<br />(éventuellement en privé après)<br />
Upcoming SlideShare
Loading in...5
×

Performance des applications web - USI Casa 2011

1,520

Published on

http://www.universite-du-si.com/fr/conferences/10-casablanca-usi-2011/sessions/997-performance-des-applications-web-quoi-faire-et-pourquoi

Les applications web apportent des problématiques spécifiques de performance. Au-delà des questions de temps de génération des pages sur le serveur, il est indispensable de prendre en compte le rendu dans le navigateur et à la gestion réseau de celui-ci.

La gestion de ces questions propres à l'aspect web est un facteur déterminant pour une meilleure expérience utilisateur.

Dans l'écosystème du Web 2.0, le chargement des pages, des images ou du code Javascript peut influer drastiquement sur le taux de transformation, la fidélité ou le trafic quotidien. Depuis 2010 Google intègre le critère "performance" dans son indexation et dans les coûts des enchères publicitaires, renforçant ainsi le besoin de performance des applications publiques.

Dans cette session, nous vous présenterons quoi faire et comment, en pratique, sur une application existante. Au menu : HTTP, réseau, HTML, Javascript, images, CSS, et beaucoup de navigateurs...

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,520
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Performance des applications web - USI Casa 2011

  1. 1. Performance des applications webquoi faire et pourquoi<br />Université du SI – Casa 2011Éric Daspet<br />1<br />© OCTO 2010 <br />
  2. 2. Performance des applications webquoi faire et pourquoi<br />Université du SI – Casa 2011Éric Daspet<br />2<br />© OCTO 2010 <br />
  3. 3. Pourquoi ?<br />« Usersreallyrespond to speed »<br />3<br />© OCTO 2010 <br />Marissa Meyer, VP user experience, Google<br />
  4. 4. Pourquoi ?<br />4<br />© OCTO 2010 <br />« Users really respond to speed » Marissa Meyer, VP user experience, Google<br />
  5. 5. Pourquoi ?<br />5<br />© OCTO 2010 <br />« Usersreallyrespond to speed » Marissa Meyer, VP user experience, Google<br />?<br />
  6. 6. 6<br />© OCTO 2010 <br />
  7. 7. 7<br />© OCTO 2010 <br />
  8. 8. 8<br />© OCTO 2010 <br />
  9. 9. 9<br />© OCTO 2010 <br />« Users really respond to speed » Marissa Meyer, VP user experience, Google<br />
  10. 10. 10<br />© OCTO 2010 <br />« Users really respond to speed » Marissa Meyer, VP user experience, Google<br />C’est pire en réalité<br />L’effet et le même sur les applications internes<br />
  11. 11. Chargement complet d’un écran<br />4 à 10 secondestout compris :images, javascript, flash, rendu, initialisation, …<br />11<br />© OCTO 2010 <br />
  12. 12. 12<br />© OCTO 2010 <br />
  13. 13. 13<br />© OCTO 2010 <br />95 %front-end<br />5 %<br />back-end<br />
  14. 14. 14<br />© OCTO 2010 <br />En faire moins<br />pour plus de performances<br />sans perte fonctionnelleni perte graphique<br />
  15. 15. 15<br />© OCTO 2010 <br />Moinsde requêtes HTTP<br />Caches HTTPCache-Control: max-age:360000<br />
  16. 16. 16<br />© OCTO 2010 <br />Moinsde requêtes HTTP<br />Caches HTTP<br />Fusions de fichiers<br />Réutilisations<br />Sprites<br />
  17. 17. 17<br />© OCTO 2010 <br />Moinsde requêtes HTTP<br />Caches HTTP<br />Fusions de fichiers<br />Réutilisations<br />Sprites<br />
  18. 18. 18<br />© OCTO 2010 <br />Moinsde requêtes HTTP<br />Caches HTTP<br />Fusions de fichiers<br />Réutilisations<br />Sprites<br />
  19. 19. 19<br />© OCTO 2010 <br />Moinsde volume échangé<br />Compression HTTP<br />Compression des images<br />Minimisation des codes<br />
  20. 20. 20<br />© OCTO 2010 <br />Moinsde séquentiel<br />Domaines multiples<br />Javascript asynchrone<br />Lazyloading<br />
  21. 21. 21<br />© OCTO 2010 <br /><ul><li>requêtes
  22. 22. volume
  23. 23. séquentiel</li></ul>et c’est seulement après qu’on optimise le code et le système … si et seulement si vous en avez encore besoin<br />
  24. 24. 22<br />© OCTO 2010 <br />YslowYahoo! Best Practices<br />Google Page SpeedWeb Page Test<br />Webperf User Group France / Paris<br />
  25. 25. 23<br />© OCTO 2010 <br />questions, réactions, discussions<br />(éventuellement en privé après)<br />
  26. 26. Performance des applications webquoi faire et pourquoi<br />Université du SI – Casa 2011Éric Daspet<br />24<br />© OCTO 2010 <br />
  27. 27. <ul><li>Photographies sous licences Creative Commons
  28. 28. Eye-Open, par calico_13http://www.flickr.com/photos/calico_13/419846038/in/set-72157594579918893/licence Creative Commons Paternité-Pas d'Utilisation Commerciale-Pas de Modification 2.0 Générique
  29. 29. Eye-closed 2, par calico_13http://www.flickr.com/photos/calico_13/419383830/in/photostream/licence Creative Commons Paternité-Pas d'Utilisation Commerciale-Pas de Modification 2.0 Générique
  30. 30. PurbeckWay Direction Post, par TreeHouse1977http://www.flickr.com/photos/treehouse1977/2979812858/licence Creative Commons Paternité-Partage des Conditions Initiales à l'Identique 2.0 Générique
  31. 31. Danboconoce a Domo - Danbomeets Domo, par GVicianohttp://www.flickr.com/photos/gviciano/4060850226/licence Creative Commons Paternité-Pas d'Utilisation Commerciale-Pas de Modification 2.0 Générique
  32. 32. Max Hoogte, par westerhttp://www.flickr.com/photos/wester/12949097/licence Creative Commons Paternité-Pas d'Utilisation Commerciale-Pas de Modification 2.0 Générique
  33. 33. Money, par Dave Bargerhttp://www.flickr.com/photos/lalunablanca/1058204843/licence Creative Commons Paternité-Pas d’Utilisation Commerciale-Partage à l’Identique 2.0 Générique
  34. 34. Heavy load, par Chris de Rhamhttp://www.flickr.com/photos/mon_oeil/1871989383/licence Creative Commons Paternité- Pas d'Utilisation Commerciale-Pas de Modification 2.0 Générique</li></ul>25<br />© OCTO 2010 <br />
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×