Download pptx - Performance des applications web - USI Casa 2011

Performance des applications webquoi faire et pourquoi

Université du SI – Casa 2011

Éric Daspet

1© OCTO 2010



É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


+ 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


+ 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


+ 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


Caches HTTPFusions de fichiersRéutilisationsSprites

17© OCTO 2010



18© OCTO 2010



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)



É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