Performances Web - Afup 2008

108,204 views

Published on

Conférence Performance Web au forum PHP Afup 2008.

Plus d'info sur http://performance.survol.fr/

Éric Daspet : http://eric.daspet.name/

Published in: Technology
  • Be the first to comment

Performances Web - Afup 2008

  1. 1. Performance Éric Daspet - Forum PHP AFUP 2008
  2. 2. Éric Daspet http://eric.daspet.name/ YAHOO! http://performance.survol.fr/ (livre en préparation)
  3. 3. Le web a changé
  4. 4. 2003 : 100Ko et 25 composants 2008 : 300Ko et 50 composants
  5. 5. de 250Ko à 312Ko ces douzes derniers mois WebSiteOptimization.com/speed/tweak/average-web-page
  6. 6. Est-ce important ?
  7. 7. France Telecom 10,1s Le Monde 7,9s TF1 5s FaceBook 4,6s Free (portail) 4,4s AlloCiné 4s Skyrock 3,7s Amazon France 3,7s Daily Motion 2,4s Yahoo! France 1,8s Google (résultats) 0,24s
  8. 8. Et vous ?
  9. 9. +100 ms
  10. 10. Amazon : ventes -1% +100 ms
  11. 11. +400 ms
  12. 12. Yahoo! : abandons +5 à 9% +400 ms
  13. 13. +500 ms
  14. 14. Google : recherches -20% +500 ms
  15. 15. -30% poids
  16. 16. Google : +30% trafic -30% poids
  17. 17. France Telecom 10,1s Le Monde 7,9s TF1 5s FaceBook 4,6s Free (portail) 4,4s AlloCiné 4s Skyrock 3,7s Amazon France 3,7s Daily Motion 2,4s Yahoo! France 1,8s Google (résultats) 0,24s
  18. 18. #1 “Users really respond to speed” Marissa Mayer VP Search & User Experience, Google
  19. 19. Où agir ?
  20. 20. Où agir ? Optimiser le code PHP ? Index de base de données ? Requêtes SQL ? Ajouter des serveurs ? Installer APC ? Changer de développeur ? Mettre des caches applicatifs ?
  21. 21. Exemple et ça continue encore, et encore... en réalité c’est 7 à 8 fois plus long
  22. 22. Importance du Front-End
  23. 23. Importance du Front-End Back-end = 5%
  24. 24. Importance du Front-End Front-end = 95%
  25. 25. France Telecom 34,7% Le Monde 0,7% TF1 1,8% FaceBook 7,2% Free (portail) 1% AlloCiné 1,5% Skyrock 1% Amazon France 25,1% Daily Motion 8,5% Yahoo! France 30,7% Google (résultats) 68,8%
  26. 26. #2 S’occuper du frontend offre le meilleur ROI
  27. 27. 28
  28. 28. #3 Moins de requêtes HTTP Des composants moins lourds Des téléchargements parallèles http://developer.yahoo.com/performance
  29. 29. Technique
  30. 30. #4 Cache HTTP
  31. 31. Premier accès Second accès Le gain est évident, non ?
  32. 32. Expires: Wed, 24 Oct 2018 21:32:59 GMT Cache-Control: public;max-age=315360000 (mod_expires sous Apache) ExpiresDefault quot;access plus 1 month 15 days 2 hoursquot; ExpiresByType image/gif quot;modification plus 5 hours 3 minutesquot;
  33. 33. Une version = Une URL monscript-1.4.js monscript.js?20081113T123559 monscript.js?<?= filemtime($a); ?>
  34. 34. CDN content delivery network latence faible - cache automatique
  35. 35. Prefetch charger des composants en bas de page ils seront mis en cache et utilisés plus tard
  36. 36. Requêtes Ajax aussi à vous de le gérer en PHP
  37. 37. Résultats surprenants 1.00 0.75 0.50 0.25 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 uu avec cache vide pv avec cache vide
  38. 38. #5Minimisation Compression Concaténation
  39. 39. mod_deflate mod_gzip environ 80%
  40. 40. Retirer les espaces blancs Réagencer le code environ 70% YUI compressor - http://developer.yahoo.com/yui/compressor/ Compressor Rater - http://compressorrater.thruhere.net/
  41. 41. Concaténer (moins de requêtes HTTP) 30 minutes à faire en PHP
  42. 42. #6 Compression d’images
  43. 43. Images : 45.6% du poids total Top 10 sites web
  44. 44. erreur #1 Utiliser GIF quand PNG est plus léger
  45. 45. erreur #2 Ne pas passer les images par PNGcrush
  46. 46. erreur #3 Ne pas retirer les méta données
  47. 47. erreur #4 Utiliser des PNG pleines couleurs au lieu de PNG8 Design Qualité versus Optimisation Ingénierie
  48. 48. Deux problèmes distincts Design Qualité versus Optimisation Ingénierie
  49. 49. erreur #5 Utiliser Alpha Image Loader 100ms yahoo search
  50. 50. #7 Sprites
  51. 51. background-image: url(sprites.png) ; background-position: -100px -200px; background-repeat: no-repeat ; width: 15px ; height: 15px ; On évite des dizaines de requêtes HTTP
  52. 52. Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.
  53. 53. Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.
  54. 54. Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.
  55. 55. Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.
  56. 56. CSS: … HTML: http://alistapart.com/articles/sprites
  57. 57. L’image combinée est plus légère CSS: … HTML: http://alistapart.com/articles/sprites
  58. 58. #8 Parallélisation
  59. 59. Téléchargements parallèles Deux composants en parallèle par domaine GIF GIF GIF GIF GIF GIF d’après HTTP/1.1
  60. 60. Téléchargements parallèles
  61. 61. Téléchargements parallèles html component component Deux en parallèle component component component component component component component component 0 0.425 0.850 1.275 1.700 Quatre en parallèle Huit en parallèle
  62. 62. Téléchargements parallèles html component component Deux en parallèle component component component component component component component component 0 0.425 0.850 1.275 1.700 html component component Quatre en parallèle component component component component component component component component 0 0.375 0.750 1.125 1.500 Huit en parallèle
  63. 63. Téléchargements parallèles html component component Deux en parallèle component component component component component component component component 0 0.425 0.850 1.275 1.700 html component component Quatre en parallèle component component component component component component component component 0 0.375 0.750 1.125 1.500 html component component component component component Huit en parallèle component component component component component 0 0.375 0.750 1.125 1.500
  64. 64. Optimiser les téléchargements parallèles 1.4 36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) 1.2 1.0 0.8 temps de réponse (secondes) 0.6 0.4 0.2 0 1 2 4 5 10 alias
  65. 65. #9 Javascript
  66. 66. Le JS bloque tout
  67. 67. Mettez vos JS en bas juste avant </body>
  68. 68. Ou chargez les dynamiquement var js = document.createElement('script'); js.src = 'myscript.js'; var head = document.getElementsByTagName('head')[0]; head.appendChild(js);
  69. 69. Utilisez une classe “js” pour styler en attendant JS : document.documentElement.className = “js” CSS : .js #menu { display: none ; }
  70. 70. Pour chaque <td> si td.clientWidth > 100 alors td.style.width = 100
  71. 71. Initialise liste vide Pour chaque <td> si td.clientWidth > 100 alors ajoute <td> à la liste Pour chaque item de liste item.style.width = 100
  72. 72. 72
  73. 73. Outils
  74. 74. Firebug Développement web évolué
  75. 75. YSlow Apperçus et analyses
  76. 76. AOL Page Test Graphiques en cascade
  77. 77. http://developer.yahoo.com/performance
  78. 78. Éric Daspet http://eric.daspet.name/ YAHOO! http://performance.survol.fr/ (livre en préparation)
  79. 79. Images sous licence CC http://www.flickr.com/photos/giuntinijerome/3046524272 http://www.flickr.com/photos/bright/118197469/ http://www.flickr.com/photos/xxxtoff/219781763/ http://www.flickr.com/photos/deadsquid/2614952166/Scr http://www.flickr.com/photos/boozysmurf/53877099/ http://www.flickr.com/photos/12495774@N02/2405297371/ http://www.flickr.com/photos/dullhunk/202872717/ Merci à Nicole Sullivan (une partie des slides sont d’elle) Contenu en partie sous licence CC http://creativecommons.org/licenses/by-nc-nd/2.0/fr/

×