Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Magento Performance Improvements with Client Side Optimizations

Discussion of various optimizations that can be applied to Magento community and enterprise installations for speed improvements. Techniques include common WPO techniques such as gzip, cache control, CSS spriting, domain sharding, byte code caches, reverse proxies and more. Various steps are applied to an Amazon AWS instance with the results from Webpagetest.org shown afterwards.

  • Identifiez-vous pour voir les commentaires

Magento Performance Improvements with Client Side Optimizations

  1. 1. Performance Matters Exploring Optimizing Magento Page Loads Thomas Powell Joe Lima [email_address] [email_address]
  2. 2. Punchline First <ul><ul><li>Speed effects outcomes online </li></ul></ul><ul><ul><li>Magento can be accelerated using common Web optimization techniques including: </li></ul></ul><ul><ul><ul><li>Gzip Compression </li></ul></ul></ul><ul><ul><ul><li>Reverse Proxy Cache </li></ul></ul></ul><ul><ul><ul><li>Cache Control </li></ul></ul></ul><ul><ul><ul><li>JavaScript Optimizations </li></ul></ul></ul><ul><ul><ul><li>Request Reduction </li></ul></ul></ul><ul><ul><ul><li>CDNs </li></ul></ul></ul>
  3. 3. Speed is Not Optional <ul><li>“ First and foremost, we believe that speed is more than a feature. Speed is the most important feature. If your application is slow, people won ’ t use it. ” </li></ul><ul><li>Fred Wilson, Well known Internet VC </li></ul><ul><li>Source: 10 Golden Principles of Successful Web Apps </li></ul><ul><li>http://thinkvitamin.com/web-apps/fred-wilsons-10-golden-principles-of-successful-web-apps/ </li></ul>
  4. 4. Many Stats Support This
  5. 5. We Must be Faster! <ul><ul><li>The floor is ~1 second </li></ul></ul><ul><ul><li>Don ’ t buy into the broadband fallacy </li></ul></ul><ul><ul><ul><li>Human nature will prove you wrong </li></ul></ul></ul><ul><ul><ul><li>… as will latency </li></ul></ul></ul><ul><ul><li>Given 99% rule of usability you are being compared against Google, Amazon, etc. whether you like it or not </li></ul></ul>
  6. 6. Why Slow? <ul><li>3 fundamental reasons – from most to least controllable </li></ul><ul><li>Server </li></ul><ul><li>Network </li></ul><ul><li>Client </li></ul>
  7. 7. Our Golden Rules <ul><li>Do less, less often </li></ul><ul><li>Send less, less often </li></ul><ul><li>Keep your clients close </li></ul>
  8. 8. Hardware & Bandwith Doesn ’ t Cure ‘ Slowitis ’ <ul><ul><li>More hardware will help address page generation times but little else </li></ul></ul><ul><ul><li>Bandwidth is only one part of your delivery challenge </li></ul></ul><ul><ul><ul><li>Effective throughput on average for the Web is only around 5mbps </li></ul></ul></ul><ul><ul><li>Note both are essential for scaling! </li></ul></ul>
  9. 9. Speeding Up Magento <ul><ul><li>Admittedly Magento doesn ’ t have a glowing reputation for speed in the community </li></ul></ul><ul><ul><ul><li>Realistically though few apps/sites do, especially if they are feature rich </li></ul></ul></ul><ul><ul><li>General Trade-off – more features, flexibility usually equals less speed </li></ul></ul>
  10. 10. Stock Community Edition
  11. 11. Stock Enterprise Edition
  12. 12. Front-end Focus <ul><li>“ Five years ago most of the attention on web performance was focused on the backend. Since then we ’ ve learned that 80% of the time users wait for a web page to load is the responsibility of the frontend. ” </li></ul><ul><li>-Steve Souders, Google Head Performance Engineer and Author of “ High Performance Web Sites ” </li></ul><ul><li>“ 97% of mobile end-user response time happens at front-end” - Joshua Bixby, President of Strange Loop Networks </li></ul>
  13. 13. Let ’ s Start Optimizing
  14. 14. Gzip Compression <ul><ul><li>HTML, CSS, JS compression </li></ul></ul><ul><ul><ul><li>Widely supported </li></ul></ul></ul><ul><ul><ul><li>Significant speed up for long latency connections </li></ul></ul></ul><ul><ul><li>Approach 1 – Server Level – mod_deflate </li></ul></ul><ul><ul><li>Approach 2 – PHP Level </li></ul></ul><ul><ul><ul><li>Hosting issues only legit reason to do there </li></ul></ul></ul>
  15. 15. Simple Configuration <ul><li>Often installed but not enabled </li></ul>
  16. 16. Gzip On
  17. 17. TTFB Too Long <ul><ul><li>Time to first byte being so long is an indication, in our control environment, of long server side generation times </li></ul></ul><ul><ul><li>If this has already been addressed, and then shows up in the production environment, it is typically an indication of a capacity problem </li></ul></ul>
  18. 18. Addressing Page Build Times <ul><ul><li>APC – Alternative PHP Cache </li></ul></ul><ul><ul><ul><li>Avoid interpret time and cache opcode for second fetch run improvement </li></ul></ul></ul><ul><ul><li>http://magebase.com/magento-tutorials/speeding-up-magento-with-apc-or-memcached/ </li></ul></ul>
  19. 19. After APC
  20. 20. Page Caching <ul><ul><li>TTFB is still pretty long </li></ul></ul><ul><ul><li>Consider the issue of static dynamics </li></ul></ul><ul><ul><ul><li>Is content changing or not? If not, cache it! </li></ul></ul></ul><ul><ul><li>Varnish Cache www.varnish-cache.org </li></ul></ul><ul><ul><ul><li>Magento-varnish https://github.com/madalinoprea/magneto-varnish </li></ul></ul></ul>
  21. 21. After Varnish <ul><li>You will have a delay on first request to prime the cache, but afterwards… </li></ul>
  22. 22. Too Many Requests <ul><li>Too many HTTP requests can really slow a page down. </li></ul>
  23. 23. CSS and JS Bundling <ul><li>Easy to fix CSS and JS issues in Magento </li></ul>
  24. 24. Minification <ul><ul><li>Don ’ t just bundle “ crunch ” your CSS and JavaScript (and HTML!) </li></ul></ul><ul><ul><ul><li>Focus most on JavaScript because of byte count and parse time </li></ul></ul></ul><ul><ul><ul><li>http://code.google.com/p/minify http://code.google.com/closure/compiler http://marijnhaverbeke.nl/uglifyjs </li></ul></ul></ul>
  25. 25. JS Blocking! <ul><ul><li>Non-deferred JS will block browser execution </li></ul></ul><ul><ul><li>Simple solution: move code to the bottom </li></ul></ul><ul><ul><li>Better solution: load order manager </li></ul></ul>
  26. 26. Render Time after Shifting JS Magento Pitfall – Inline Script Execution
  27. 27. Image Issues <ul><ul><li>Images are not optimized well </li></ul></ul><ul><ul><li>Fix with jpegmini.com, smush.it, Photoshop, etc. </li></ul></ul>
  28. 28. Image Optimization <ul><li>There are just too many image requests </li></ul>
  29. 29. CSS Sprites <ul><li>Bundle images into single (or small number of images) </li></ul><ul><li>Then use CSS rules to show just the portion of the sprite file at a particular point in the page </li></ul>
  30. 30. Sprite Result <ul><ul><li>Sub 2s render! </li></ul></ul><ul><ul><li>We went a little overboard though </li></ul></ul>
  31. 31. Repeat View <ul><ul><li>Set cache control headers (Expires, Max-Age, etc.) so browser and proxies aren ’ t guessing about caching </li></ul></ul><ul><ul><li>For Apache use mod_headers and mod_expires </li></ul></ul><ul><ul><ul><li>Set static object expiration far in future and change object name if updated </li></ul></ul></ul><ul><ul><ul><li>Don ’ t cache “ base ” resource long term </li></ul></ul></ul><ul><ul><ul><li>Note lots of user cache flushing </li></ul></ul></ul>
  32. 32. Getting Close
  33. 33. Big Problem - Distance <ul><li>Point source hosting you can ’ t be close to everyone and distance matters </li></ul><ul><li>http://assets.en.oreilly.com/1/event/44/TCP%20and%20the%20Lower%20Bound%20of%20Web%20Performance%20Presentation.pdf </li></ul>
  34. 34. Kiwis don’t enjoy our store
  35. 35. Bandwidth doesn ’ t matter (much) <ul><li>http://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/ </li></ul>
  36. 36. Round Trips Matter <ul><li>Lower round-trip time = Better page load time </li></ul>
  37. 37. Content Distribution Networks <ul><ul><li>CDNs reduce latency by moving large static assets closer to end users </li></ul></ul><ul><ul><ul><li>Amazon Cloudfront, MaxCDN, etc. </li></ul></ul></ul><ul><ul><li>Considerations </li></ul></ul><ul><ul><ul><li>Cost </li></ul></ul></ul><ul><ul><ul><li>Sharded domain name – images.yoursite.com </li></ul></ul></ul><ul><ul><ul><ul><li>Might want this for SSL traffic as well! </li></ul></ul></ul></ul><ul><ul><ul><li>JS on CDN can have some origin issues </li></ul></ul></ul>
  38. 38. All As!
  39. 39. Google still wins!
  40. 40. Always More <ul><ul><li>3 rd party components are killing performance – think before you slap that script in </li></ul></ul><ul><ul><li>JS optimization (lazy load, microlibs, etc.) </li></ul></ul><ul><ul><li>Prefetching and pre-rendering tricks </li></ul></ul><ul><ul><li>Really should track end user performance with deliver & render analytics </li></ul></ul><ul><ul><li>Of course no matter how fancy you get this does only address single request which improves scale but doesn't ’ t solve it! </li></ul></ul>
  41. 41. How to do all or most of this? <ul><ul><li>Hand optimize as we did-server, Magento config & template changes </li></ul></ul><ul><ul><li>Software add-on(s) like Nitrogento </li></ul></ul><ul><ul><li>An appliance like StangeLoop Site Optimizer ( www.strangeloopnetworks.com ) or smart load balancer </li></ul></ul><ul><ul><li>A proxy service like www.cloudfare.com </li></ul></ul>
  42. 42. Example: Nitrogento
  43. 43. Nitrogento Result
  44. 44. Wrap Up <ul><li>Thanks for listening! Now on </li></ul><ul><li>to your questions either now or later </li></ul><ul><li>Thomas Powell ( [email_address] ) & Joe Lima ( [email_address] ) </li></ul><ul><li> +1 858.270.2086 www.pint.com [email_address] @PINTSD </li></ul>