Performance des sites web
parlons un peu de latence
http://www.slideshare.net/edaspet/performance-des-sites-web-latence-af...
Consultant Web
http://www.sqli.com/ – edaspet@sqli.com
Société de service en ingénierie informatique
Recrute ! experts, ar...
Performance
« Puzzle 1: How Many Palindromes? », par Chuck Coker, sous licence Creative Commons by-nd 2.0
http://www.flick...
Money
« Money », par Dave Barger, sous licence Creative Commons by-nc-sa 2.0
http://www.flickr.com/photos/lalunablanca/105...
Clin d’oeil
« eye-open », par Lee Ann Barker, sous licence Creative Commons by-nc-nd 2.0
http://www.flickr.com/photos/cali...
« eye-closed 2 », par Lee Ann Barker, sous licence Creative Commons by-nc-nd 2.0
http://www.flickr.com/photos/calico_13/41...
« eye-open », par Lee Ann Barker, sous licence Creative Commons by-nc-nd 2.0
http://www.flickr.com/photos/calico_13/419846...
Money
« Money », par Dave Barger, sous licence Creative Commons by-nc-sa 2.0
http://www.flickr.com/photos/lalunablanca/105...
Université du Système
d'information 2010 –
Performance des sites web –
Front-end
Front-end Back-end
Université du Système
d'information 2010 –
Performance des sites web –
95 %
front-end
5 %
back-end
Pigeons
« Racing Pigeons », par Michael Porter, sous licence Creative Commons by-nc-nd 2.0
http://www.flickr.com/photos/li...
Pertes de paquets
« Springbreak '06 - Shooting Clay Pigeons », par James McCauley, sous licence Creative Commons by 2.0
ht...
Congestion
« St Marks Pigeons », par Jon Lucas, sous licence Creative Commons by-nc 2.0
http://www.flickr.com/photos/jonlu...
Latence et ordonnancement
Navigateur web
Serveur web
Navigateur web
Serveur web
Navigateur web
Serveur web
Requête DNS
www.sqli.com
Navigateur web
Serveur web
Réponse DNS
www.sqli.com = 1.2.3.4
Navigateur web
Serveur web
Latence (ping)
Moyenne ADSL France : 50ms
Peut dépasser les 100ms avec l’international
Voire le...
Navigateur web
Serveur web
SYN TCP
La connexion est initiée
On peut communiquer
Navigateur web
Serveur web
ACK TCP
La connexion est initiée
On peut communiquer
Navigateur web
Serveur web
Requête HTTP
(GET, POST)
avec :
- cookies
- données de formulaires
- entêtes HTTP diverses
< 1k...
Navigateur web
Serveur web
Réponse
(longue à télécharger)
Navigateur web
Serveur web
Navigateur web
Serveur web
Latence et ordonnancement
« Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0
http://www.flickr.com/photos/ari/2...
« Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0
http://www.flickr.com/photos/ari/2...
« Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0
http://www.flickr.com/photos/ari/2...
« Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0
http://www.flickr.com/photos/ari/2...
« Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0
http://www.flickr.com/photos/ari/2...
« Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0
http://www.flickr.com/photos/ari/2...
« Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0
http://www.flickr.com/photos/ari/2...
« Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0
http://www.flickr.com/photos/ari/2...
« Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0
http://www.flickr.com/photos/ari/2...
Contenus plus petits
Compression HTTP (gzip)
Minimisation des contenus (espaces blancs)
Recompression des images (avec et ...
Accélérer le rendu
Chargement différé via AJAX
Ordonner et prioriser le contenu
Envoyer immédiatement les blocs sans calcu...
Mais aussi
Utiliser le cache HTTP
Vraiment utiliser le cache HTTP 
Précharger les contenus à l’avance
« Grade 9th Math pr...
Et bien sûr
Optimiser le javascript
Diminuer la complexité
Éviter les sélecteurs CSS/Jquery horriblement lents
« Grade 9th...
« Suburban Construction », par Tudor, sous licence Creative Commons by-sa 2.0
http://www.flickr.com/photos/tudor/118825485...
En FR :
• liste de diffusion
• perf planet fr
• livre à venir 
En EN :
• Yahoo! perf
• Google perf
• perf planet
« fahren...
« late night discussion… », par Phil Hilfiker, sous licence Creative Commons by-nc-nd 2.0
http://www.flickr.com/photos/hi-...
Consultant Web
http://www.sqli.com/ – edaspet@sqli.com
Société de service en ingénierie informatique
Recrute ! experts, ar...
Upcoming SlideShare
Loading in...5
×

Performance des sites web - Latence - AFUP 2010

1,301

Published on

(Les liens des différents outils et sites sont visibles dans le powerpoint téléchargeable ici même)

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,301
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Performance des sites web - Latence - AFUP 2010

  1. 1. Performance des sites web parlons un peu de latence http://www.slideshare.net/edaspet/performance-des-sites-web-latence-afup-2010
  2. 2. Consultant Web http://www.sqli.com/ – edaspet@sqli.com Société de service en ingénierie informatique Recrute ! experts, architectes, chefs de projet, … PHP, Magento, Symfony, Zend Framework Auteur « PHP 5 avancé », éditions Eyrolles Fondateur des conférences « Paris Web » Groupe utilisateur webperf français Livre webperf en cours de rédaction http://http://eric.daspet.name/ PHP, Web, Performance, Innovation Qualité, Excellence technique Éric Daspet
  3. 3. Performance « Puzzle 1: How Many Palindromes? », par Chuck Coker, sous licence Creative Commons by-nd 2.0 http://www.flickr.com/photos/caveman_92223/2879809588 - http://creativecommons.org/licenses/by-nd/2.0/deed.fr
  4. 4. Money « Money », par Dave Barger, sous licence Creative Commons by-nc-sa 2.0 http://www.flickr.com/photos/lalunablanca/1058204843/ - http://creativecommons.org/licenses/by-nc-sa/2.0/deed.fr
  5. 5. Clin d’oeil « eye-open », par Lee Ann Barker, sous licence Creative Commons by-nc-nd 2.0 http://www.flickr.com/photos/calico_13/419846038/ - http://creativecommons.org/licenses/by-nc-nd/2.0/deed.fr
  6. 6. « eye-closed 2 », par Lee Ann Barker, sous licence Creative Commons by-nc-nd 2.0 http://www.flickr.com/photos/calico_13/419383830/ - http://creativecommons.org/licenses/by-nc-nd/2.0/deed.fr
  7. 7. « eye-open », par Lee Ann Barker, sous licence Creative Commons by-nc-nd 2.0 http://www.flickr.com/photos/calico_13/419846038/ - http://creativecommons.org/licenses/by-nc-nd/2.0/deed.fr
  8. 8. Money « Money », par Dave Barger, sous licence Creative Commons by-nc-sa 2.0 http://www.flickr.com/photos/lalunablanca/1058204843/ - http://creativecommons.org/licenses/by-nc-sa/2.0/deed.fr Latence +100ms => ventes -1% Chargement +500ms => trafic -20% Chargement +400ms => abandon +5-9% Chargement +1s => revenu pub -2,8% Chargement -2,2s => transformation +15%
  9. 9. Université du Système d'information 2010 – Performance des sites web – Front-end
  10. 10. Front-end Back-end Université du Système d'information 2010 – Performance des sites web – 95 % front-end 5 % back-end
  11. 11. Pigeons « Racing Pigeons », par Michael Porter, sous licence Creative Commons by-nc-nd 2.0 http://www.flickr.com/photos/libraryman/63499041/ - http://creativecommons.org/licenses/by-nc-nd/2.0/deed.fr
  12. 12. Pertes de paquets « Springbreak '06 - Shooting Clay Pigeons », par James McCauley, sous licence Creative Commons by 2.0 http://www.flickr.com/photos/nukeit1/116466154/ - http://creativecommons.org/licenses/by/2.0/deed.fr
  13. 13. Congestion « St Marks Pigeons », par Jon Lucas, sous licence Creative Commons by-nc 2.0 http://www.flickr.com/photos/jonlucas/8710833/ - http://creativecommons.org/licenses/by-nc/2.0/deed.fr
  14. 14. Latence et ordonnancement
  15. 15. Navigateur web Serveur web
  16. 16. Navigateur web Serveur web
  17. 17. Navigateur web Serveur web Requête DNS www.sqli.com
  18. 18. Navigateur web Serveur web Réponse DNS www.sqli.com = 1.2.3.4
  19. 19. Navigateur web Serveur web Latence (ping) Moyenne ADSL France : 50ms Peut dépasser les 100ms avec l’international Voire les 300ms sur réseau mobile
  20. 20. Navigateur web Serveur web SYN TCP La connexion est initiée On peut communiquer
  21. 21. Navigateur web Serveur web ACK TCP La connexion est initiée On peut communiquer
  22. 22. Navigateur web Serveur web Requête HTTP (GET, POST) avec : - cookies - données de formulaires - entêtes HTTP diverses < 1ko idéalement
  23. 23. Navigateur web Serveur web Réponse (longue à télécharger)
  24. 24. Navigateur web Serveur web
  25. 25. Navigateur web Serveur web
  26. 26. Latence et ordonnancement
  27. 27. « Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0 http://www.flickr.com/photos/ari/2217206582/- http://creativecommons.org/licenses/by-nd/2.0/deed.fr
  28. 28. « Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0 http://www.flickr.com/photos/ari/2217206582/- http://creativecommons.org/licenses/by-nd/2.0/deed.fr Fusion JS Fusion CSS
  29. 29. « Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0 http://www.flickr.com/photos/ari/2217206582/- http://creativecommons.org/licenses/by-nd/2.0/deed.fr Fusion Images « sprites CSS »
  30. 30. « Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0 http://www.flickr.com/photos/ari/2217206582/- http://creativecommons.org/licenses/by-nd/2.0/deed.fr Fusion Images « sprites CSS »
  31. 31. « Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0 http://www.flickr.com/photos/ari/2217206582/- http://creativecommons.org/licenses/by-nd/2.0/deed.fr Fusion Images « sprites CSS »
  32. 32. « Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0 http://www.flickr.com/photos/ari/2217206582/- http://creativecommons.org/licenses/by-nd/2.0/deed.fr CDN Content Delivery Network
  33. 33. « Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0 http://www.flickr.com/photos/ari/2217206582/- http://creativecommons.org/licenses/by-nd/2.0/deed.fr URI en data: Documents mhtml Archives JAR
  34. 34. « Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0 http://www.flickr.com/photos/ari/2217206582/- http://creativecommons.org/licenses/by-nd/2.0/deed.fr Chargements parallèles - domaines multiples
  35. 35. « Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0 http://www.flickr.com/photos/ari/2217206582/- http://creativecommons.org/licenses/by-nd/2.0/deed.fr Connexions persistantes (keep alive HTTP)
  36. 36. Contenus plus petits Compression HTTP (gzip) Minimisation des contenus (espaces blancs) Recompression des images (avec et sans pertes) « Grade 9th Math problem », par Arjin, sous licence Creative Commons by-nd 2.0 http://www.flickr.com/photos/arjin/3271430123/ - http://creativecommons.org/licenses/by-nd/2.0/deed.fr
  37. 37. Accélérer le rendu Chargement différé via AJAX Ordonner et prioriser le contenu Envoyer immédiatement les blocs sans calcul serveur Chargement asynchrone du javascript, ou en bas de page « Grade 9th Math problem », par Arjin, sous licence Creative Commons by-nd 2.0 http://www.flickr.com/photos/arjin/3271430123/ - http://creativecommons.org/licenses/by-nd/2.0/deed.fr
  38. 38. Mais aussi Utiliser le cache HTTP Vraiment utiliser le cache HTTP  Précharger les contenus à l’avance « Grade 9th Math problem », par Arjin, sous licence Creative Commons by-nd 2.0 http://www.flickr.com/photos/arjin/3271430123/ - http://creativecommons.org/licenses/by-nd/2.0/deed.fr
  39. 39. Et bien sûr Optimiser le javascript Diminuer la complexité Éviter les sélecteurs CSS/Jquery horriblement lents « Grade 9th Math problem », par Arjin, sous licence Creative Commons by-nd 2.0 http://www.flickr.com/photos/arjin/3271430123/ - http://creativecommons.org/licenses/by-nd/2.0/deed.fr
  40. 40. « Suburban Construction », par Tudor, sous licence Creative Commons by-sa 2.0 http://www.flickr.com/photos/tudor/1188254856/ - http://creativecommons.org/licenses/by-sa/2.0/deed.fr Outils • webpagetest.org • Firebug • Yslow et Page Speed • Dynatrace Ajax
  41. 41. En FR : • liste de diffusion • perf planet fr • livre à venir  En EN : • Yahoo! perf • Google perf • perf planet « fahrenheit burn », par Michael Bina, sous licence Creative Commons by-nc-sa 2.0 http://www.flickr.com/photos/mrtwism/40371169/ - http://creativecommons.org/licenses/by-nc-sa/2.0/deed.fr https://sites.google.com/a/survol.fr/webperf-user-group/
  42. 42. « late night discussion… », par Phil Hilfiker, sous licence Creative Commons by-nc-nd 2.0 http://www.flickr.com/photos/hi-phi/64055296/ - http://creativecommons.org/licenses/by-nc-nd/2.0/deed.fr
  43. 43. Consultant Web http://www.sqli.com/ – edaspet@sqli.com Société de service en ingénierie informatique Recrute ! experts, architectes, chefs de projet, … PHP, Magento, Symfony, Zend Framework Auteur « PHP 5 avancé », éditions Eyrolles Fondateur des conférences « Paris Web » Groupe utilisateur webperf français Livre webperf en cours de rédaction http://http://eric.daspet.name/ PHP, Web, Performance, Innovation Qualité, Excellence technique Éric Daspet http://www.slideshare.net/edaspet/performance-des-sites-web-latence-afup-2010
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×