performance des sites web parlons un peu de latence
DESCRIPTION
Performance des sites web parlons un peu de latence. éric daspet , sqli. http://www.slideshare.net/edaspet/performance-des-sites-web-latence-afup-2010. Éric Daspet. PHP, Web, Performance, Innovation Qualité, Excellence technique. Consultant Web http://www.sqli.com/ – [email protected] - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/1.jpg)
Performance des sites webparlons un peu de latence
éric daspet, sqli
http://www.slideshare.net/edaspet/performance-des-sites-web-latence-afup-2010
![Page 2: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/2.jpg)
Consultant Web
http://www.sqli.com/ – [email protected]été de service en ingénierie informatique
Recrute ! experts, architectes, chefs de projet, …PHP, Magento, Symfony, Zend Framework
Auteur « PHP 5 avancé », éditions EyrollesFondateur des conférences « Paris Web »
Groupe utilisateur webperf françaisLivre webperf en cours de rédaction
http://http://eric.daspet.name/
PHP, Web, Performance, InnovationQualité, Excellence technique
Éric Daspet
![Page 3: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/3.jpg)
Performance
« Puzzle 1: How Many Palindromes? », par Chuck Coker, sous licence Creative Commons by-nd 2.0http://www.flickr.com/photos/caveman_92223/2879809588 - http://creativecommons.org/licenses/by-nd/2.0/deed.fr
![Page 4: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/4.jpg)
Money
« Money », par Dave Barger, sous licence Creative Commons by-nc-sa 2.0http://www.flickr.com/photos/lalunablanca/1058204843/ - http://creativecommons.org/licenses/by-nc-sa/2.0/deed.fr
![Page 5: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/5.jpg)
Clin d’oeil
« eye-open », par Lee Ann Barker, sous licence Creative Commons by-nc-nd 2.0http://www.flickr.com/photos/calico_13/419846038/ - http://creativecommons.org/licenses/by-nc-nd/2.0/deed.fr
![Page 6: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/6.jpg)
« eye-closed 2 », par Lee Ann Barker, sous licence Creative Commons by-nc-nd 2.0http://www.flickr.com/photos/calico_13/419383830/ - http://creativecommons.org/licenses/by-nc-nd/2.0/deed.fr
![Page 7: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/7.jpg)
« eye-open », par Lee Ann Barker, sous licence Creative Commons by-nc-nd 2.0http://www.flickr.com/photos/calico_13/419846038/ - http://creativecommons.org/licenses/by-nc-nd/2.0/deed.fr
![Page 8: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/8.jpg)
Money
« Money », par Dave Barger, sous licence Creative Commons by-nc-sa 2.0http://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%
![Page 9: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/9.jpg)
Université du Système d'information 2010 – Performance des sites web – Éric Daspet, SQLI
Front-end
![Page 10: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/10.jpg)
Université du Système d'information 2010 – Performance des sites web – Éric Daspet, SQLI
Front-end Back-end
95 %front-end
5 %back-end
![Page 11: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/11.jpg)
Pigeons
« Racing Pigeons », par Michael Porter, sous licence Creative Commons by-nc-nd 2.0http://www.flickr.com/photos/libraryman/63499041/ - http://creativecommons.org/licenses/by-nc-nd/2.0/deed.fr
![Page 12: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/12.jpg)
Pertes de paquets
« Springbreak '06 - Shooting Clay Pigeons », par James McCauley, sous licence Creative Commons by 2.0http://www.flickr.com/photos/nukeit1/116466154/ - http://creativecommons.org/licenses/by/2.0/deed.fr
![Page 13: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/13.jpg)
Congestion
« St Marks Pigeons », par Jon Lucas, sous licence Creative Commons by-nc 2.0http://www.flickr.com/photos/jonlucas/8710833/ - http://creativecommons.org/licenses/by-nc/2.0/deed.fr
![Page 14: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/14.jpg)
Latence et ordonnancement
![Page 15: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/15.jpg)
Navigateur web
Serveur web
![Page 16: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/16.jpg)
Navigateur web
Serveur web
![Page 17: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/17.jpg)
Navigateur web
Serveur web
Requête DNSwww.sqli.com
![Page 18: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/18.jpg)
Navigateur web
Serveur web
Réponse DNSwww.sqli.com = 1.2.3.4
![Page 19: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/19.jpg)
Navigateur web
Serveur web
Latence (ping)Moyenne ADSL France : 50msPeut dépasser les 100ms avec l’internationalVoire les 300ms sur réseau mobile
![Page 20: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/20.jpg)
Navigateur web
Serveur web
SYN TCPLa connexion est initiéeOn peut communiquer
![Page 21: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/21.jpg)
Navigateur web
Serveur web
ACK TCPLa connexion est initiéeOn peut communiquer
![Page 22: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/22.jpg)
Navigateur web
Serveur web
Requête HTTP(GET, POST)avec :- cookies- données de formulaires- entêtes HTTP diverses
< 1ko idéalement
![Page 23: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/23.jpg)
Navigateur web
Serveur web
Réponse(longue à télécharger)
![Page 24: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/24.jpg)
Navigateur web
Serveur web
![Page 25: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/25.jpg)
Navigateur web
Serveur web
![Page 26: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/26.jpg)
Latence et ordonnancement
![Page 27: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/27.jpg)
« Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0http://www.flickr.com/photos/ari/2217206582/- http://creativecommons.org/licenses/by-nd/2.0/deed.fr
![Page 28: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/28.jpg)
« Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0http://www.flickr.com/photos/ari/2217206582/- http://creativecommons.org/licenses/by-nd/2.0/deed.fr
Fusion JSFusion CSS
![Page 29: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/29.jpg)
« Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0http://www.flickr.com/photos/ari/2217206582/- http://creativecommons.org/licenses/by-nd/2.0/deed.fr
Fusion Images« sprites CSS »
![Page 30: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/30.jpg)
« Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0http://www.flickr.com/photos/ari/2217206582/- http://creativecommons.org/licenses/by-nd/2.0/deed.fr
Fusion Images« sprites CSS »
![Page 31: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/31.jpg)
« Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0http://www.flickr.com/photos/ari/2217206582/- http://creativecommons.org/licenses/by-nd/2.0/deed.fr
Fusion Images« sprites CSS »
![Page 32: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/32.jpg)
« Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0http://www.flickr.com/photos/ari/2217206582/- http://creativecommons.org/licenses/by-nd/2.0/deed.fr
CDNContent Delivery Network
![Page 33: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/33.jpg)
« Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0http://www.flickr.com/photos/ari/2217206582/- http://creativecommons.org/licenses/by-nd/2.0/deed.fr
URI en data:Documents mhtml Archives JAR
![Page 34: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/34.jpg)
« Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0http://www.flickr.com/photos/ari/2217206582/- http://creativecommons.org/licenses/by-nd/2.0/deed.fr
Chargements parallèles- domaines multiples
![Page 35: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/35.jpg)
« Solving the Rubik's Cube », par Steve Rhodes, sous licence Creative Commons by-nd 2.0http://www.flickr.com/photos/ari/2217206582/- http://creativecommons.org/licenses/by-nd/2.0/deed.fr
Connexions persistantes(keep alive HTTP)
![Page 36: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/36.jpg)
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
![Page 37: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/37.jpg)
Accélérer le rendu
Chargement différé via AJAXOrdonner et prioriser le contenu
Envoyer immédiatement les blocs sans calcul serveurChargement 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
![Page 38: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/38.jpg)
Mais aussi
Utiliser le cache HTTPVraiment 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
![Page 39: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/39.jpg)
Et bien sûr
Optimiser le javascriptDiminuer 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
![Page 40: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/40.jpg)
« Suburban Construction », par Tudor, sous licence Creative Commons by-sa 2.0http://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
![Page 41: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/41.jpg)
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/
![Page 42: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/42.jpg)
« late night discussion… », par Phil Hilfiker, sous licence Creative Commons by-nc-nd 2.0http://www.flickr.com/photos/hi-phi/64055296/ - http://creativecommons.org/licenses/by-nc-nd/2.0/deed.fr
![Page 43: Performance des sites web parlons un peu de latence](https://reader030.vdocuments.net/reader030/viewer/2022020320/56815c5f550346895dca66a0/html5/thumbnails/43.jpg)
Consultant Web
http://www.sqli.com/ – [email protected]été de service en ingénierie informatique
Recrute ! experts, architectes, chefs de projet, …PHP, Magento, Symfony, Zend Framework
Auteur « PHP 5 avancé », éditions EyrollesFondateur des conférences « Paris Web »
Groupe utilisateur webperf françaisLivre webperf en cours de rédaction
http://http://eric.daspet.name/
PHP, Web, Performance, InnovationQualité, Excellence technique
Éric Daspet
http://www.slideshare.net/edaspet/performance-des-sites-web-latence-afup-2010