Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Optimizing Magento Front-end for Mobile Performance

Hrvoje Jurišić
November 05, 2013

Optimizing Magento Front-end for Mobile Performance

My talk from Meet Magento Poland

Hrvoje Jurišić

November 05, 2013
Tweet

More Decks by Hrvoje Jurišić

Other Decks in Design

Transcript

  1. Hrvoje Jurišić •Magento front-end developer •Working @Inchoo since 2009. •Author

    of Inchooers comic strip twitter: @hrvojejurisic web: http://inchoo.net/author/hrvoje/
  2. Inchoo •Located in Osijek, Croatia •Magento Gold Solution Partner •14

    Magento Certified Developers •35 employees twitter: @inchoo web: http://inchoo.net
  3. The top eCommerce sites in the world are 22% slower

    than they were last year. http://www.yottaa.com
  4. Set a Performance Budget • < 3 sec on wi-fi

    • < 5 sec on 3G • < 400 Kb
  5. Set a Performance Budget • < 3 sec on wi-fi

    • < 5 sec on 3G • < 400 Kb • < 20 http requests
  6. Set a Performance Budget • < 3 sec on wi-fi

    • < 5 sec on 3G • < 400 Kb • < 20 http requests • …..
  7. Set a Performance Budget Adding a new feature to the

    site: • Optimize an existing feature or asset on the page.
  8. Set a Performance Budget Adding a new feature to the

    site: • Optimize an existing feature or asset on the page. • Remove an existing feature or asset from the page.
  9. Set a Performance Budget Adding a new feature to the

    site: • Optimize an existing feature or asset on the page. • Remove an existing feature or asset from the page. • Don’t add the new feature or asset. http://timkadlec.com
  10. • Network Latency • Too many http requests • Too

    many bytes • Poor caching • Rendering What makes websites slow?
  11. • Deploys content across multiple servers • Servers distributed across

    multiple locations • Closer to user, faster delivery Use Content Delivery Network
  12. • Network Latency • Too many http requests • Too

    many bytes • Poor caching • Rendering What makes websites slow?
  13. • Use CSS sprites • Use Icon Fonts • Merge

    Javascript • Merge CSS Reduce http requests
  14. Merging JS Trick: Group Javascript per pages <default> <reference name="head">

    <action method="addJs"> <script>prototype/prototype.js</script> <params>data-group="main"</params> </action> <action method="addJs"> <script>scriptaculous/builder.js</script> <params>data-group="main"</params> </action> ... </reference> </default>
  15. Merging JS Trick: Group Javascript per pages <catalog_product_view> <reference name="head">

    <action method="addJs"> <script>varien/product.js</script> <params>data-group="product"</params> </action> <action method="addJs"> <script>varien/configurable.js</script> <params>data-group="product"</params> </action> </reference> </catalog_product_view> http://fishpig.co.uk
  16. Controversial: Use Multiple Domains for Static Assets Browsers can establish

    4-6 simultaneous connections per server http://www.mobify.com http://www.stevesouders.com Pros: • Maximize parallel download Cons: • Additional http requests • New connections = More Latency • Use maximal 2 domains • Do it only if you have more than 20 assets to download • Make sure to use cookie-less domain for serving images
  17. • Network Latency • Too many http requests • Too

    many bytes • Poor caching • Rendering What makes websites slow?
  18. • Gzip components • Minify Javascript and CSS • Optimize

    Images • Use conditional loading Reduce weight of the page
  19. Optimizing Images • Use right format • Use CSS3 for

    gradients, shadows... • Optimize Compression • Use Data URI’s for small images • Use SVG images Data URI: <img width="16" height="16" alt="star" src="data:image/gif;base64, R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/ zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5 BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp 5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" /> DATA URI convertor: http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ http://css-tricks.com/data-uris/ http://www.mobify.com
  20. Conditional loading Example: CSS: @media all and (min-width: 600px) {

    body:after { content: 'desktop'; display: none; } } JS: var size = window.getComputedStyle(document.body,':after') .getPropertyValue('content'); if (size=='desktop') { //load desktop stuff. }
  21. • Network Latency • Too many http requests • Too

    many bytes • Poor caching • Rendering What makes websites slow?
  22. • Use far future header expires ◦ cache files on

    client side ◦ no request is made ◦ problems with file updates <link rel="stylesheet" href="style.css?v223" type="text/css" /> Cache as much as you can
  23. • Network Latency • Too many http requests • Too

    many bytes • Poor caching • Rendering What makes websites slow?
  24. • Put CSS at the top • Put JS at

    the bottom :) • Load JS asynchronously :) • Use responsive images • Use 3D transforms for animations Speed up rendering
  25. Controversial: Inline critical CSS and load rest at the bottom

    • Browser blocks rendering until it loads CSS. • Put critical “above the fold” CSS inline in HTML <head> • Load the rest at the bottom of the document Pros: Browser will start painting earlier Cons: Extra work to isolate critical CSS for every page(!)