Embed Size (px)
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...
Citation preview
Performance des applications webquoi faire et pourquoi
Université du SI – Casa 2011
Éric Daspet
1© OCTO 2010
Performance des applications webquoi faire et pourquoi
Université du SI – Casa 2011
Éric Daspet
2© OCTO 2010
Pourquoi ?
« Users really respond to speed »
3© OCTO 2010
Marissa Meyer, VP user experience, Google
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
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
?
6© OCTO 2010
7© OCTO 2010
8© OCTO 2010
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
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
Chargement complet d’un écran
4 à 10 secondes
tout compris :images, javascript,
flash, rendu, initialisation, …
11© OCTO 2010
12© OCTO 2010
13© OCTO 2010
95 %front-end
5 %back-end
14© OCTO 2010
En faire moins
pour plus de performances
sans perte fonctionnelleni perte graphique
15© OCTO 2010
Moinsde requêtes HTTP
Caches HTTP
Cache-Control: max-age:360000
16© OCTO 2010
Moinsde requêtes HTTP
Caches HTTPFusions de fichiersRéutilisationsSprites
17© OCTO 2010
Moinsde requêtes HTTP
Caches HTTPFusions de fichiersRéutilisationsSprites
18© OCTO 2010
Moinsde requêtes HTTP
Caches HTTPFusions de fichiersRéutilisationsSprites
19© OCTO 2010
Moinsde volume échangé
Compression HTTPCompression des imagesMinimisation des codes
20© OCTO 2010
Moinsde séquentiel
Domaines multiplesJavascript asynchroneLazy loading
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
22© OCTO 2010
YslowYahoo! Best PracticesGoogle Page SpeedWeb Page Test
Webperf User Group France / Paris
23© OCTO 2010
questions, réactions, discussions(éventuellement en privé après)
Performance des applications webquoi faire et pourquoi
Université du SI – Casa 2011
Éric Daspet
24© OCTO 2010
• 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
