performance des applications web - usi casa 2011
DESCRIPTION
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...TRANSCRIPT
![Page 1: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/1.jpg)
Performance des applications webquoi faire et pourquoi
Université du SI – Casa 2011
Éric Daspet
1© OCTO 2010
![Page 2: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/2.jpg)
Performance des applications webquoi faire et pourquoi
Université du SI – Casa 2011
Éric Daspet
2© OCTO 2010
![Page 3: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/3.jpg)
Pourquoi ?
« Users really respond to speed »
3© OCTO 2010
Marissa Meyer, VP user experience, Google
![Page 4: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/4.jpg)
Pourquoi ?
4© OCTO 2010
« Users really respond to speed » Marissa Meyer, VP user experience, Google
+ 1/3 bc de latence → -1 % de ventes
+ 1,5 bc au chargement → - 20 % de trafic (pages vues)
+ 1,2 bc au chargement → + 5 à 9 % d’abandon (rebond)
+ 3 bc au chargement → - 2,8 % de revenu publicitaire
- 6 bc au chargement → + 15 % de taux transformation
![Page 5: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/5.jpg)
Pourquoi ?
5© OCTO 2010
« Users really respond to speed » Marissa Meyer, VP user experience, Google
+ 1/3 bc de latence → -1 % de ventes
+ 1,5 bc au chargement → - 20 % de trafic (pages vues)
+ 1,2 bc au chargement → + 5 à 9 % d’abandon (rebond)
+ 3 bc au chargement → - 2,8 % de revenu publicitaire
- 6 bc au chargement → + 15 % de taux transformation
?
![Page 6: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/6.jpg)
6© OCTO 2010
![Page 7: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/7.jpg)
7© OCTO 2010
![Page 8: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/8.jpg)
8© OCTO 2010
![Page 9: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/9.jpg)
9© OCTO 2010
« Users really respond to speed » Marissa Meyer, VP user experience, Google
+ 100 ms de latence → -1 % de ventes
+ 500 ms au chargement → - 20 % de trafic (pages vues)
+ 400 ms au chargement → + 5 à 9 % d’abandon (rebond)
+ 1 sec. au chargement → - 2,8 % de revenu publicitaire
- 2,2 sec. au chargement → + 15 % de taux transformation
![Page 10: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/10.jpg)
10© OCTO 2010
« Users really respond to speed » Marissa Meyer, VP user experience, Google
+ 100 ms de latence → -1 % de ventes
+ 500 ms au chargement → - 20 % de trafic (pages vues)
+ 400 ms au chargement → + 5 à 9 % d’abandon (rebond)
+ 1 sec. au chargement → - 2,8 % de revenu publicitaire
- 2,2 sec. au chargement → + 15 % de taux transformation
C’est pire en réalitéL’effet et le même sur les applications internes
![Page 11: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/11.jpg)
Chargement complet d’un écran
4 à 10 secondes
tout compris :images, javascript,
flash, rendu, initialisation, …
11© OCTO 2010
![Page 12: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/12.jpg)
12© OCTO 2010
![Page 13: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/13.jpg)
13© OCTO 2010
95 %front-end
5 %back-end
![Page 14: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/14.jpg)
14© OCTO 2010
En faire moins
pour plus de performances
sans perte fonctionnelleni perte graphique
![Page 15: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/15.jpg)
15© OCTO 2010
Moinsde requêtes HTTP
Caches HTTP
Cache-Control: max-age:360000
![Page 16: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/16.jpg)
16© OCTO 2010
Moinsde requêtes HTTP
Caches HTTPFusions de fichiersRéutilisationsSprites
![Page 17: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/17.jpg)
17© OCTO 2010
Moinsde requêtes HTTP
Caches HTTPFusions de fichiersRéutilisationsSprites
![Page 18: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/18.jpg)
18© OCTO 2010
Moinsde requêtes HTTP
Caches HTTPFusions de fichiersRéutilisationsSprites
![Page 19: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/19.jpg)
19© OCTO 2010
Moinsde volume échangé
Compression HTTPCompression des imagesMinimisation des codes
![Page 20: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/20.jpg)
20© OCTO 2010
Moinsde séquentiel
Domaines multiplesJavascript asynchroneLazy loading
![Page 21: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/21.jpg)
21© OCTO 2010
- requêtes- volume- séquentiel
et c’est seulement après qu’on optimise le code et le système …
si et seulement si vous en avez encore besoin
![Page 22: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/22.jpg)
22© OCTO 2010
YslowYahoo! Best PracticesGoogle Page SpeedWeb Page Test
Webperf User Group France / Paris
![Page 23: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/23.jpg)
23© OCTO 2010
questions, réactions, discussions(éventuellement en privé après)
![Page 24: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/24.jpg)
Performance des applications webquoi faire et pourquoi
Université du SI – Casa 2011
Éric Daspet
24© OCTO 2010
![Page 25: Performance des applications web - USI Casa 2011](https://reader035.vdocuments.mx/reader035/viewer/2022062614/54792c19b4af9f58688b47a1/html5/thumbnails/25.jpg)
• Photographies sous licences Creative Commons– Eye-Open, par calico_13
http://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
– 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
– Purbeck Way 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
– Danbo conoce a Domo - Danbo meets 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
– 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
– 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
– 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
25© OCTO 2010