performance des applications web - usi casa 2011
Post on 29-Nov-2014
1.740 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related