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...

1. Performance des applications webquoi faire et pourquoi Université du SI – Casa 2011Éric Daspet 1 © OCTO 2010

2. Performance des applications webquoi faire et pourquoi Université du SI – Casa 2011Éric Daspet 2 © OCTO 2010

3. Pourquoi ? « Usersreallyrespond to speed » 3 © OCTO 2010 Marissa Meyer, VP user experience, Google

4. Pourquoi ? 4 © OCTO 2010 « Users really respond to speed » Marissa Meyer, VP user experience, Google

5. Pourquoi ? 5 © OCTO 2010 « Usersreallyrespond to speed » Marissa Meyer, VP user experience, Google ?

6. 6 © OCTO 2010

7. 7 © OCTO 2010

8. 8 © OCTO 2010

9. 9 © OCTO 2010 « Users really respond to speed » Marissa Meyer, VP user experience, Google

10. 10 © OCTO 2010 « Users really respond to speed » Marissa Meyer, VP user experience, Google C’est pire en réalité L’effet et le même sur les applications internes

11. Chargement complet d’un écran 4 à 10 secondestout compris :images, javascript, flash, rendu, initialisation, … 11 © OCTO 2010

12. 12 © OCTO 2010

13. 13 © OCTO 2010 95 %front-end 5 % back-end

14. 14 © OCTO 2010 En faire moins pour plus de performances sans perte fonctionnelleni perte graphique

15. 15 © OCTO 2010 Moinsde requêtes HTTP Caches HTTPCache-Control: max-age:360000

16. 16 © OCTO 2010 Moinsde requêtes HTTP Caches HTTP Fusions de fichiers Réutilisations Sprites

17. 17 © OCTO 2010 Moinsde requêtes HTTP Caches HTTP Fusions de fichiers Réutilisations Sprites

18. 18 © OCTO 2010 Moinsde requêtes HTTP Caches HTTP Fusions de fichiers Réutilisations Sprites

19. 19 © OCTO 2010 Moinsde volume échangé Compression HTTP Compression des images Minimisation des codes

20. 20 © OCTO 2010 Moinsde séquentiel Domaines multiples Javascript asynchrone Lazyloading

22. volume

23. séquentielet c’est seulement après qu’on optimise le code et le système … si et seulement si vous en avez encore besoin

24. 22 © OCTO 2010 YslowYahoo! Best Practices Google Page SpeedWeb Page Test Webperf User Group France / Paris

25. 23 © OCTO 2010 questions, réactions, discussions (éventuellement en privé après)

26. Performance des applications webquoi faire et pourquoi Université du SI – Casa 2011Éric Daspet 24 © OCTO 2010

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. 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. 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. 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. 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. 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. 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érique25 © OCTO 2010