Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Performances Web - Afup 2008

108,414 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
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ACCESS that WEBSITE Over for All Ebooks (Unlimited) ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... DOWNLOAD FULL EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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/

×