Your SlideShare is downloading. ×
0
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Performances
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Performances

1,158

Published on

Cours sur les performances côté client.

Cours sur les performances côté client.

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,158
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

















































  • Transcript

    • 1. Performances client
    • 2. Performances client ?
    • 3. Malgré l’augmentation des débits, le web est lent Site web Temps de chargement TF1 5,0s Allociné 4,0s Facebook 4,6s Skyrock 3,7s Yahoo! France 1,8s DailyMotion 2,4s Le Monde 7,9s Amazon France 3,7s
    • 4. Depuis 5 ans…
    • 5. Depuis 5 ans…• Poids des pages x3
    • 6. Depuis 5 ans…• Poids des pages x3• Nombre de composants x2
    • 7. Depuis 5 ans…• Poids des pages x3• Nombre de composants x2• Nombre de balises HTML x2
    • 8. Depuis 5 ans…• Poids des pages x3• Nombre de composants x2• Nombre de balises HTML x2 En moyenne, plus de 300 ko par page … pour seulement 500 mots
    • 9. Depuis 5 ans…• Poids des pages x3• Nombre de composants x2• Nombre de balises HTML x2 En moyenne, plus de 300 ko par page … pour seulement 500 mots Source
    • 10. Est-ce utile ?
    • 11. Est-ce utile ?• 500ms = -20% de traffic pour Google
    • 12. Est-ce utile ?• 500ms = -20% de traffic pour Google• 100ms = -1% de ventes pour Amazon
    • 13. Est-ce utile ?• 500ms = -20% de traffic pour Google• 100ms = -1% de ventes pour Amazon• -30% du poids = +25% d’utilisateurs pour Google Maps
    • 14. Est-ce utile ?• 500ms = -20% de traffic pour Google• 100ms = -1% de ventes pour Amazon• -30% du poids = +25% d’utilisateurs pour Google Maps• 400ms = 5 à 9% dabandons pour Yahoo!
    • 15. Pourquoi le client ?
    • 16. Pourquoi le client ?
    • 17. Pourquoi le client ?
    • 18. Pourquoi le client ?
    • 19. Pourquoi le client ? 80 à 90% du chargement géré par le client 10 à 20% pour l’applicatif serveur
    • 20. Un peu de réseau
    • 21. Le mythe de l’ADSL Offres 8, 20, 28 Mbits
    • 22. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM)
    • 23. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM) Pour 8 Mbits :
    • 24. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM) Pour 8 Mbits : -20% à -25% : 6 Mbits en IP
    • 25. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM) Pour 8 Mbits : -20% à -25% : 6 Mbits en IP -2% à -3% : 5,8 Mbits en TCP/IP
    • 26. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM) Pour 8 Mbits : -20% à -25% : 6 Mbits en IP -2% à -3% : 5,8 Mbits en TCP/IPDébit théorique maximal sur une ligne optimale
    • 27. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM) Pour 8 Mbits : -20% à -25% : 6 Mbits en IP -2% à -3% : 5,8 Mbits en TCP/IPDébit théorique maximal sur une ligne optimale TV par ADSL : 5Mbits
    • 28. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM) Pour 8 Mbits : -20% à -25% : 6 Mbits en IP -2% à -3% : 5,8 Mbits en TCP/IPDébit théorique maximal sur une ligne optimale TV par ADSL : 5Mbits Il y a encore du RTC en France
    • 29. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM) Pour 8 Mbits : -20% à -25% : 6 Mbits en IP -2% à -3% : 5,8 Mbits en TCP/IPDébit théorique maximal sur une ligne optimale TV par ADSL : 5Mbits Il y a encore du RTC en France 3G : 3,6Mbits théorique (~2Mbits en pratique)
    • 30. Chargement d’une ressource
    • 31. Chargement d’une ressourceNavigateur
    • 32. Chargement d’une ressource TempsNavigateur
    • 33. Chargement d’une ressourceServeur DNS Temps Navigateur
    • 34. Chargement d’une ressourceServeur DNS Temps Navigateur
    • 35. Chargement d’une ressourceServeur DNS Temps DNS Navigateur
    • 36. Chargement d’une ressource ServeurServeur DNS Temps DNS Navigateur
    • 37. Chargement d’une ressource ServeurServeur DNS Temps DNS Navigateur
    • 38. Chargement d’une ressource ServeurServeur DNS Temps DNS TCP Navigateur
    • 39. Chargement d’une ressource ServeurServeur DNS P Temps HTT DNS TCP Navigateur
    • 40. Chargement d’une ressource ServeurServeur DNS P Temps Réponse HTTP HTT DNS TCP Navigateur
    • 41. Chargement d’une ressource ServeurServeur DNS P Temps Réponse HTTP HTT DNS TCP Navigateur x nombrede domaine
    • 42. Chargement d’une ressource ServeurServeur DNS P Temps Réponse HTTP HTT DNS TCP Navigateur x nombre x nombre de ressourcede domaine
    • 43. Évaluer les performances
    • 44. Outils• YSlow + Firebug• WebPageTest
    • 45. Agir
    • 46. Chargement d’une page
    • 47. Chargement d’une page• HTML
    • 48. Chargement d’une page• HTML • Images
    • 49. Chargement d’une page• HTML • Images • CSS
    • 50. Chargement d’une page• HTML • Images • CSS • Images CSS
    • 51. Chargement d’une page• HTML • Images • CSS • Images CSS • Javascript
    • 52. Chargement d’une page• HTML • Images • CSS • Images CSS • Javascript • Exécution
    • 53. Chargement d’une page• HTML • Images • CSS • Images CSS • Javascript • Exécution• Rendu
    • 54. Objectifs
    • 55. Objectifs• Moins de requête HTTP
    • 56. Objectifs• Moins de requête HTTP• Ressources moins lourdes
    • 57. Objectifs• Moins de requête HTTP• Ressources moins lourdes• Améliorer le temps de traitement
    • 58. static.example.org
    • 59. static.example.org• Domaine ou sous-domaine dédié aux ressources statiques
    • 60. static.example.org• Domaine ou sous-domaine dédié aux ressources statiques• Paralléliser les téléchargements
    • 61. static.example.org• Domaine ou sous-domaine dédié aux ressources statiques• Paralléliser les téléchargements• Désactiver les cookies
    • 62. static.example.org• Domaine ou sous-domaine dédié aux ressources statiques• Paralléliser les téléchargements• Désactiver les cookies• Entre 2 et 4 domaines/sous-domaines, pas plus
    • 63. Toutes ressources
    • 64. Toutes ressources• Expiration <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 month" ExpiresByType text/css "access plus 2 weeks" </IfModule>
    • 65. Toutes ressources• Expiration <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 month" ExpiresByType text/css "access plus 2 weeks" </IfModule>• ETag ETag: "10C24BC-4AB-457E1C1F" Par défaut : FileETag INode MTime Size Désactiver : FileETag None
    • 66. Ressources texte
    • 67. Ressources texte• GZip<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/css</IfModule>
    • 68. HTML
    • 69. HTML• Cache serveur
    • 70. HTML• Cache serveur• Réduisez le nombre d’éléments
    • 71. HTML• Cache serveur• Réduisez le nombre d’éléments document.getElementsByTagName(*).length
    • 72. CSS & Javascript
    • 73. CSS & Javascript • CSS : au début
    • 74. CSS & Javascript • CSS : au début • Javascript : à la fin
    • 75. CSS & Javascript • CSS : au début • Javascript : à la fin
    • 76. CSS & Javascript • CSS : au début • Javascript : à la fin 1. Externalisez
    • 77. CSS & Javascript • CSS : au début • Javascript : à la fin 1. Externalisez 2. Combinez
    • 78. CSS & Javascript • CSS : au début • Javascript : à la fin 1. Externalisez 2. Combinez 3. Minimifiez
    • 79. « Minimification »
    • 80. « Minimification »43471 octets 9431 octets
    • 81. « Minimification »43471 octets 9431 octets ~ -78%
    • 82. GZip43471 octets 12920 octets
    • 83. GZip43471 octets 12920 octets ~ -70%
    • 84. « Minimification » + GZip43471 octets 3867 octets
    • 85. « Minimification » + GZip43471 octets 3867 octets ~ -91%
    • 86. Javascript
    • 87. Javascript• N’utilisez pas de packer
    • 88. Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués
    • 89. Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements
    • 90. Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements• Rendez l’Ajax « cachable »
    • 91. Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements• Rendez l’Ajax « cachable » • Minimifiez + GZip
    • 92. Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements• Rendez l’Ajax « cachable » • Minimifiez + GZip • Attention aux requêtes DNS
    • 93. Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements• Rendez l’Ajax « cachable » • Minimifiez + GZip • Attention aux requêtes DNS • Évitez les redirections
    • 94. Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements• Rendez l’Ajax « cachable » • Minimifiez + GZip • Attention aux requêtes DNS • Évitez les redirections • Configurez les ETag
    • 95. Javascript eval() is evil
    • 96. Javascript eval() is evil NON
    • 97. Javascript new is evilnew Boolean(); // Argl…new Number(); // Stop…new String(); // Je souffrenew Object(); // Arrêtez…new Array(); // Cen est tropnew Function(); // PAN! var bool = false; var nb = 0; var str = ""; var obj = {}; var array = []; var fn = function() {};
    • 98. JavascriptOptimisez vos boucles
    • 99. Javascript Optimisez vos bouclesvar users = []; // 1000+ itemsfor (var i = 0; i < users.length; i++) { … }
    • 100. Javascript Optimisez vos boucles var users = []; // 1000+ items for (var i = 0; i < users.length; i++) { … }for (var i = 0, j = users.length; i < j; i++) { … }
    • 101. JavascriptAttention aux fonctions anonymes
    • 102. Javascript Attention aux fonctions anonymes$(…).click(function(e) { … }); // jQuery stylevar fn = function(a, b) { return a * b; };
    • 103. Javascript Attention aux fonctions anonymes$(…).click(function(e) { … }); // jQuery stylevar fn = function(a, b) { return a * b; }; // Mieux ! function fn(a, b) { return a * b; }
    • 104. Javascript Attention aux fonctions anonymes$(…).click(function(e) { … }); // jQuery stylevar fn = function(a, b) { return a * b; }; // Mieux ! function fn(a, b) { return a * b; } var fn = function fn(a, b) { return a * b; }; var obj = { fn: function fn(a, b) { return a * b; } }
    • 105. JavascriptPré-compiler les RegExp
    • 106. Javascript Pré-compiler les RegExpfor (var index = 0, l = links.length; index < l; index++) { if (links[index].href.match(/www.mydomain.tld/i)) { // … }}
    • 107. Javascript Pré-compiler les RegExpvar rDomain = /www.mydomain.tld/i;for (var index = 0, l = links.length; index < l; index++) { if (links[index].href.match(rDomain)) { // … }}
    • 108. Javascript Pré-compiler les RegExpvar rDomain = /www.mydomain.tld/i;for (var index = 0, l = links.length; index < l; index++) { if (rDomain.test(links[index].href)) { // … }}
    • 109. Javascriptlength est aussi un setter
    • 110. Javascript length est aussi un settervar names = ["Geoffrey", "Lorraine", "Thomas", "Clément", "Julien", "Vincent","Elodie", "Bruno", "Derek", "Lina", "Cyril", "Matti", "Thomas", "Estelle", "Ludovic","Cédric", "Laurent", "Benjamin", "Mathieu", "Michel", "Kris", "Joffrey", "Alexandre","Surya", "Antoine", "Ornella", "Simon", "Pierre", "Julien", "Jérémy", "Stéphane","Arnaud", "Florent", "Albéric", "Julien", "Michaël", "Arnaud", "Dimitri", "Sylvain","Alexandre", "Thomas", "François", "Robin", "Tugdual", "Prakash", "Carine", "Thomas","Grégory", "Jean-Kamal", "Anand", "Loïc", "Xavier", "Guillaume", "Damien", "Adrien","Antoine", "Lucas", "Romain", "Charles", "Loïc", "Maxime", "Gaëtan", "Clément", "Jean-Michel", "Hedi", "Lydie", "Raphaël", "Maxime", "Ludovic", "Audrey", "Frédéric"];
    • 111. Javascript length est aussi un settervar names = ["Geoffrey", "Lorraine", "Thomas", "Clément", "Julien", "Vincent","Elodie", "Bruno", "Derek", "Lina", "Cyril", "Matti", "Thomas", "Estelle", "Ludovic","Cédric", "Laurent", "Benjamin", "Mathieu", "Michel", "Kris", "Joffrey", "Alexandre","Surya", "Antoine", "Ornella", "Simon", "Pierre", "Julien", "Jérémy", "Stéphane","Arnaud", "Florent", "Albéric", "Julien", "Michaël", "Arnaud", "Dimitri", "Sylvain","Alexandre", "Thomas", "François", "Robin", "Tugdual", "Prakash", "Carine", "Thomas","Grégory", "Jean-Kamal", "Anand", "Loïc", "Xavier", "Guillaume", "Damien", "Adrien","Antoine", "Lucas", "Romain", "Charles", "Loïc", "Maxime", "Gaëtan", "Clément", "Jean-Michel", "Hedi", "Lydie", "Raphaël", "Maxime", "Ludovic", "Audrey", "Frédéric"]; names.slice(0, 10); // Bien names.length = 10; // Super rapide
    • 112. Javascript length est aussi un settervar names = ["Geoffrey", "Lorraine", "Thomas", "Clément", "Julien", "Vincent","Elodie", "Bruno", "Derek", "Lina", "Cyril", "Matti", "Thomas", "Estelle", "Ludovic","Cédric", "Laurent", "Benjamin", "Mathieu", "Michel", "Kris", "Joffrey", "Alexandre","Surya", "Antoine", "Ornella", "Simon", "Pierre", "Julien", "Jérémy", "Stéphane","Arnaud", "Florent", "Albéric", "Julien", "Michaël", "Arnaud", "Dimitri", "Sylvain","Alexandre", "Thomas", "François", "Robin", "Tugdual", "Prakash", "Carine", "Thomas","Grégory", "Jean-Kamal", "Anand", "Loïc", "Xavier", "Guillaume", "Damien", "Adrien","Antoine", "Lucas", "Romain", "Charles", "Loïc", "Maxime", "Gaëtan", "Clément", "Jean-Michel", "Hedi", "Lydie", "Raphaël", "Maxime", "Ludovic", "Audrey", "Frédéric"]; names.slice(0, 10); // Bien names.length = 10; // Super rapide names = []; // Bien names.length = 0; // Terriblement rapide
    • 113. Javascriptobj.x === obj["x"]
    • 114. Javascriptobj.x === obj["x"]var angle = 60, result;if (useSin) { result = Math.sin(angle);} else { result = Math.cos(angle);}return result;
    • 115. Javascriptobj.x === obj["x"]var angle = 60;if (useSin) { return Math.sin(angle);} else { return Math.cos(angle);}
    • 116. Javascript obj.x === obj["x"]var angle = 60;return (useSin) ? Math.sin(angle) : Math.cos(angle);
    • 117. Javascript obj.x === obj["x"]return Math[useSin ? "sin" : "cos"](60);
    • 118. JavascriptMicro-optimisations
    • 119. JavascriptMicro-optimisations var a = 1; var b = 2; var a = 1, b = 2;
    • 120. Javascript Micro-optimisations var a = 1; var b = 2; var a = 1, b = 2;times = times || 3;times |= 3; // Valeur numérique uniquement
    • 121. JavascriptMicro-optimisations
    • 122. JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}
    • 123. JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}if (1 == 1 || true) {}if (true || 1 == 1) {}
    • 124. JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}if (1 == 1 || true) {}if (true || 1 == 1) {} new Date().getTime()
    • 125. JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}if (1 == 1 || true) {}if (true || 1 == 1) {} new Date().getTime() Date.now()
    • 126. JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}if (1 == 1 || true) {}if (true || 1 == 1) {} new Date().getTime() Date.now() +new Date
    • 127. JavascriptMicro-optimisations
    • 128. JavascriptMicro-optimisations delete obj.x
    • 129. Javascript Micro-optimisations delete obj.xobjet.tres.interessant.mais.bien.cache
    • 130. Javascript Utilisez DocumentFragmentvar fragment = document.createDocumentFragment();var div = document.createElement(div);…fragment.appendChild(div);document.getElementById(box) .appendChild(fragment.cloneNode(true));
    • 131. JavascriptMinimisez les accès au DOM $(#box a).click(…); $(#box a).addClass(…); $(#box a).attr(…); var box = $(#box a); box.click(…); box.addClass(…); box.attr(…);
    • 132. CSS
    • 133. CSS• Évitez filter
    • 134. CSS• Évitez filter• Évitez @import
    • 135. CSS• Évitez filter• Évitez @import• Évitez expression
    • 136. CSS• Évitez filter• Évitez @import• Évitez expression• Évitez les reflows
    • 137. CSS• Évitezfilter• Évitez@import• Évitezexpression• Évitez les reflows• Optimisez les sélecteurs
    • 138. CSS• Évitez filter• Évitez @import• Évitez expression• Évitez les reflows• Optimisez les sélecteurs #box .footer ul li a span
    • 139. CSS• Évitez filter• Évitez @import• Évitez expression• Évitez les reflows• Optimisez les sélecteurs #box .footer ul li a span .footer-link span
    • 140. Images• Pas de GIF• Optimisez les images• Supprimez les metas (smush.it, pngcrush, jpegtrans)
    • 141. Images• Pas de GIF• Optimisez les images + = PNG24 (3932 octets)• Supprimez les metas (smush.it, pngcrush, jpegtrans)
    • 142. Images• Pas de GIF• Optimisez les images + = + = PNG24 (3932 octets) PNG8 64 couleurs (661 octets)• Supprimez les metas (smush.it, pngcrush, jpegtrans)
    • 143. Images• Pas de GIF• Optimisez les images + = + = + = PNG24 (3932 octets) PNG8 64 couleurs (661 octets) PNG8 64 couleurs (673 octets)• Supprimez les metas (smush.it, pngcrush, jpegtrans)
    • 144. Images• Pas de GIF• Optimisez les images + = + = + = PNG24 (3932 octets) PNG8 64 couleurs (661 octets) PNG8 64 couleurs (673 octets)• Supprimez les metas (smush.it, pngcrush, jpegtrans) PNG8 64 couleurs (673 octets)
    • 145. Images• Pas de GIF• Optimisez les images + = + = + = PNG24 (3932 octets) PNG8 64 couleurs (661 octets) PNG8 64 couleurs (673 octets)• Supprimez les metas (smush.it, pngcrush, jpegtrans) PNG8 64 couleurs (673 octets) PNG8 64 couleurs (628 octets)
    • 146. Images• Pas de GIF• Optimisez les images + = + = + = PNG24 (3932 octets) PNG8 64 couleurs (661 octets) PNG8 64 couleurs (673 octets)• Supprimez les metas (smush.it, pngcrush, jpegtrans) PNG8 64 couleurs (673 octets) PNG8 64 couleurs (628 octets) - 6,7%
    • 147. Images
    • 148. Images• Spécifiez les dimensions
    • 149. Images• Spécifiez les dimensions• Ne les redimensionnez pas
    • 150. Images• Spécifiez les dimensions• Ne les redimensionnez pas• Utilisez les sprites
    • 151. Favicon
    • 152. Favicon• Pensez-y, évite une 404
    • 153. Favicon• Pensez-y, évite une 404• Image/icone optimisée
    • 154. En général
    • 155. En général✓ Faites le moins de requête DNS
    • 156. En général✓ Faites le moins de requête DNS✓ Faites le moins de requête HTTP
    • 157. En général✓ Faites le moins de requête DNS✓ Faites le moins de requête HTTP✓ Évitez les redirections
    • 158. En général✓ Faites le moins de requête DNS✓ Faites le moins de requête HTTP✓ Évitez les redirections✓ Évitez les 404
    • 159. Ressources (outils)• Firebug http://getfirebug.com• YSlow http://developer.yahoo.com/yslow/• WebPagetest http://www.webpagetest.org• Yottaa http://www.yottaa.com• YUI Compressor http://developer.yahoo.com/yui/ compressor/• Smush.it http://www.smushit.com/ysmush.it/• SpriteMe http://spriteme.org
    • 160. Ressources• Comprendre le cache http://www.mnot.net/cache_docs/index.fr.html• Performance Playground http://jsperf.com• Éric Daspet http://performance.survol.fr• Stoyan Stephanov http://www.phpied.com• Steve Souders http://www.stevesouders.com/blog/
    • 161. Contact Nicolas Le Gallme@neovov.com

    ×