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