Performances

1,421 views

Published on

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,421
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
33
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

















































  • Performances

    1. 1. Performances client
    2. 2. Performances client ?
    3. 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. 4. Depuis 5 ans…
    5. 5. Depuis 5 ans…• Poids des pages x3
    6. 6. Depuis 5 ans…• Poids des pages x3• Nombre de composants x2
    7. 7. Depuis 5 ans…• Poids des pages x3• Nombre de composants x2• Nombre de balises HTML x2
    8. 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. 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. 10. Est-ce utile ?
    11. 11. Est-ce utile ?• 500ms = -20% de traffic pour Google
    12. 12. Est-ce utile ?• 500ms = -20% de traffic pour Google• 100ms = -1% de ventes pour Amazon
    13. 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. 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. 15. Pourquoi le client ?
    16. 16. Pourquoi le client ?
    17. 17. Pourquoi le client ?
    18. 18. Pourquoi le client ?
    19. 19. Pourquoi le client ? 80 à 90% du chargement géré par le client 10 à 20% pour l’applicatif serveur
    20. 20. Un peu de réseau
    21. 21. Le mythe de l’ADSL Offres 8, 20, 28 Mbits
    22. 22. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM)
    23. 23. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM) Pour 8 Mbits :
    24. 24. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM) Pour 8 Mbits : -20% à -25% : 6 Mbits en IP
    25. 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. 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. 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. 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. 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. 30. Chargement d’une ressource
    31. 31. Chargement d’une ressourceNavigateur
    32. 32. Chargement d’une ressource TempsNavigateur
    33. 33. Chargement d’une ressourceServeur DNS Temps Navigateur
    34. 34. Chargement d’une ressourceServeur DNS Temps Navigateur
    35. 35. Chargement d’une ressourceServeur DNS Temps DNS Navigateur
    36. 36. Chargement d’une ressource ServeurServeur DNS Temps DNS Navigateur
    37. 37. Chargement d’une ressource ServeurServeur DNS Temps DNS Navigateur
    38. 38. Chargement d’une ressource ServeurServeur DNS Temps DNS TCP Navigateur
    39. 39. Chargement d’une ressource ServeurServeur DNS P Temps HTT DNS TCP Navigateur
    40. 40. Chargement d’une ressource ServeurServeur DNS P Temps Réponse HTTP HTT DNS TCP Navigateur
    41. 41. Chargement d’une ressource ServeurServeur DNS P Temps Réponse HTTP HTT DNS TCP Navigateur x nombrede domaine
    42. 42. Chargement d’une ressource ServeurServeur DNS P Temps Réponse HTTP HTT DNS TCP Navigateur x nombre x nombre de ressourcede domaine
    43. 43. Évaluer les performances
    44. 44. Outils• YSlow + Firebug• WebPageTest
    45. 45. Agir
    46. 46. Chargement d’une page
    47. 47. Chargement d’une page• HTML
    48. 48. Chargement d’une page• HTML • Images
    49. 49. Chargement d’une page• HTML • Images • CSS
    50. 50. Chargement d’une page• HTML • Images • CSS • Images CSS
    51. 51. Chargement d’une page• HTML • Images • CSS • Images CSS • Javascript
    52. 52. Chargement d’une page• HTML • Images • CSS • Images CSS • Javascript • Exécution
    53. 53. Chargement d’une page• HTML • Images • CSS • Images CSS • Javascript • Exécution• Rendu
    54. 54. Objectifs
    55. 55. Objectifs• Moins de requête HTTP
    56. 56. Objectifs• Moins de requête HTTP• Ressources moins lourdes
    57. 57. Objectifs• Moins de requête HTTP• Ressources moins lourdes• Améliorer le temps de traitement
    58. 58. static.example.org
    59. 59. static.example.org• Domaine ou sous-domaine dédié aux ressources statiques
    60. 60. static.example.org• Domaine ou sous-domaine dédié aux ressources statiques• Paralléliser les téléchargements
    61. 61. static.example.org• Domaine ou sous-domaine dédié aux ressources statiques• Paralléliser les téléchargements• Désactiver les cookies
    62. 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. 63. Toutes ressources
    64. 64. Toutes ressources• Expiration <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 month" ExpiresByType text/css "access plus 2 weeks" </IfModule>
    65. 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. 66. Ressources texte
    67. 67. Ressources texte• GZip<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/css</IfModule>
    68. 68. HTML
    69. 69. HTML• Cache serveur
    70. 70. HTML• Cache serveur• Réduisez le nombre d’éléments
    71. 71. HTML• Cache serveur• Réduisez le nombre d’éléments document.getElementsByTagName(*).length
    72. 72. CSS & Javascript
    73. 73. CSS & Javascript • CSS : au début
    74. 74. CSS & Javascript • CSS : au début • Javascript : à la fin
    75. 75. CSS & Javascript • CSS : au début • Javascript : à la fin
    76. 76. CSS & Javascript • CSS : au début • Javascript : à la fin 1. Externalisez
    77. 77. CSS & Javascript • CSS : au début • Javascript : à la fin 1. Externalisez 2. Combinez
    78. 78. CSS & Javascript • CSS : au début • Javascript : à la fin 1. Externalisez 2. Combinez 3. Minimifiez
    79. 79. « Minimification »
    80. 80. « Minimification »43471 octets 9431 octets
    81. 81. « Minimification »43471 octets 9431 octets ~ -78%
    82. 82. GZip43471 octets 12920 octets
    83. 83. GZip43471 octets 12920 octets ~ -70%
    84. 84. « Minimification » + GZip43471 octets 3867 octets
    85. 85. « Minimification » + GZip43471 octets 3867 octets ~ -91%
    86. 86. Javascript
    87. 87. Javascript• N’utilisez pas de packer
    88. 88. Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués
    89. 89. Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements
    90. 90. Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements• Rendez l’Ajax « cachable »
    91. 91. Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements• Rendez l’Ajax « cachable » • Minimifiez + GZip
    92. 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. 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. 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. 95. Javascript eval() is evil
    96. 96. Javascript eval() is evil NON
    97. 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. 98. JavascriptOptimisez vos boucles
    99. 99. Javascript Optimisez vos bouclesvar users = []; // 1000+ itemsfor (var i = 0; i < users.length; i++) { … }
    100. 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. 101. JavascriptAttention aux fonctions anonymes
    102. 102. Javascript Attention aux fonctions anonymes$(…).click(function(e) { … }); // jQuery stylevar fn = function(a, b) { return a * b; };
    103. 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. 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. 105. JavascriptPré-compiler les RegExp
    106. 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. 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. 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. 109. Javascriptlength est aussi un setter
    110. 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. 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. 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. 113. Javascriptobj.x === obj["x"]
    114. 114. Javascriptobj.x === obj["x"]var angle = 60, result;if (useSin) { result = Math.sin(angle);} else { result = Math.cos(angle);}return result;
    115. 115. Javascriptobj.x === obj["x"]var angle = 60;if (useSin) { return Math.sin(angle);} else { return Math.cos(angle);}
    116. 116. Javascript obj.x === obj["x"]var angle = 60;return (useSin) ? Math.sin(angle) : Math.cos(angle);
    117. 117. Javascript obj.x === obj["x"]return Math[useSin ? "sin" : "cos"](60);
    118. 118. JavascriptMicro-optimisations
    119. 119. JavascriptMicro-optimisations var a = 1; var b = 2; var a = 1, b = 2;
    120. 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. 121. JavascriptMicro-optimisations
    122. 122. JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}
    123. 123. JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}if (1 == 1 || true) {}if (true || 1 == 1) {}
    124. 124. JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}if (1 == 1 || true) {}if (true || 1 == 1) {} new Date().getTime()
    125. 125. JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}if (1 == 1 || true) {}if (true || 1 == 1) {} new Date().getTime() Date.now()
    126. 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. 127. JavascriptMicro-optimisations
    128. 128. JavascriptMicro-optimisations delete obj.x
    129. 129. Javascript Micro-optimisations delete obj.xobjet.tres.interessant.mais.bien.cache
    130. 130. Javascript Utilisez DocumentFragmentvar fragment = document.createDocumentFragment();var div = document.createElement(div);…fragment.appendChild(div);document.getElementById(box) .appendChild(fragment.cloneNode(true));
    131. 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. 132. CSS
    133. 133. CSS• Évitez filter
    134. 134. CSS• Évitez filter• Évitez @import
    135. 135. CSS• Évitez filter• Évitez @import• Évitez expression
    136. 136. CSS• Évitez filter• Évitez @import• Évitez expression• Évitez les reflows
    137. 137. CSS• Évitezfilter• Évitez@import• Évitezexpression• Évitez les reflows• Optimisez les sélecteurs
    138. 138. CSS• Évitez filter• Évitez @import• Évitez expression• Évitez les reflows• Optimisez les sélecteurs #box .footer ul li a span
    139. 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. 140. Images• Pas de GIF• Optimisez les images• Supprimez les metas (smush.it, pngcrush, jpegtrans)
    141. 141. Images• Pas de GIF• Optimisez les images + = PNG24 (3932 octets)• Supprimez les metas (smush.it, pngcrush, jpegtrans)
    142. 142. Images• Pas de GIF• Optimisez les images + = + = PNG24 (3932 octets) PNG8 64 couleurs (661 octets)• Supprimez les metas (smush.it, pngcrush, jpegtrans)
    143. 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. 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. 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. 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. 147. Images
    148. 148. Images• Spécifiez les dimensions
    149. 149. Images• Spécifiez les dimensions• Ne les redimensionnez pas
    150. 150. Images• Spécifiez les dimensions• Ne les redimensionnez pas• Utilisez les sprites
    151. 151. Favicon
    152. 152. Favicon• Pensez-y, évite une 404
    153. 153. Favicon• Pensez-y, évite une 404• Image/icone optimisée
    154. 154. En général
    155. 155. En général✓ Faites le moins de requête DNS
    156. 156. En général✓ Faites le moins de requête DNS✓ Faites le moins de requête HTTP
    157. 157. En général✓ Faites le moins de requête DNS✓ Faites le moins de requête HTTP✓ Évitez les redirections
    158. 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. 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. 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. 161. Contact Nicolas Le Gallme@neovov.com

    ×