• Save
Magento Performance Improvements with Client Side Optimizations
Upcoming SlideShare
Loading in...5
×
 

Magento Performance Improvements with Client Side Optimizations

on

  • 6,724 views

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, ...

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.

Statistics

Views

Total Views
6,724
Views on SlideShare
6,715
Embed Views
9

Actions

Likes
7
Downloads
0
Comments
1

4 Embeds 9

http://paper.li 4
https://twitter.com 2
http://inbound.org 2
http://a0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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

Magento Performance Improvements with Client Side Optimizations Magento Performance Improvements with Client Side Optimizations Presentation Transcript

  • Performance Matters Exploring Optimizing Magento Page Loads Thomas Powell Joe Lima [email_address] [email_address]
  • 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
  • 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/
  • Many Stats Support This
  • 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
  • Why Slow?
    • 3 fundamental reasons – from most to least controllable
    • Server
    • Network
    • Client
  • Our Golden Rules
    • Do less, less often
    • Send less, less often
    • Keep your clients close
  • 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!
  • 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
  • Stock Community Edition
  • Stock Enterprise Edition
  • 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
  • Let ’ s Start Optimizing
  • 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
  • Simple Configuration
    • Often installed but not enabled
  • Gzip On
  • 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
  • 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/
  • After APC
  • 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
  • After Varnish
    • You will have a delay on first request to prime the cache, but afterwards…
  • Too Many Requests
    • Too many HTTP requests can really slow a page down.
  • CSS and JS Bundling
    • Easy to fix CSS and JS issues in Magento
  • 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
  • JS Blocking!
      • Non-deferred JS will block browser execution
      • Simple solution: move code to the bottom
      • Better solution: load order manager
  • Render Time after Shifting JS Magento Pitfall – Inline Script Execution
  • Image Issues
      • Images are not optimized well
      • Fix with jpegmini.com, smush.it, Photoshop, etc.
  • Image Optimization
    • There are just too many image requests
  • 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
  • Sprite Result
      • Sub 2s render!
      • We went a little overboard though
  • 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
  • Getting Close
  • 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
  • Kiwis don’t enjoy our store
  • Bandwidth doesn ’ t matter (much)
    • http://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/
  • Round Trips Matter
    • Lower round-trip time = Better page load time
  • 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
  • All As!
  • Google still wins!
  • 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!
  • 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
  • Example: Nitrogento
  • Nitrogento Result
  • 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