Optimizing Magento Front-end for Mobile Performance

My talk from Meet Magento Poland

Transcript

1. Hrvoje Jurišić Optimizing Magento front-end for Mobile performance
2. Hrvoje Jurišić •Magento front-end developer •Working @Inchoo since 2009. •Author of Inchooers comic strip twitter: @hrvojejurisic web: http://inchoo.net/author/hrvoje/
3. Inchoo •Located in Osijek, Croatia •Magento Gold Solution Partner •14 Magento Certified Developers •35 employees twitter: @inchoo web: http://inchoo.net
5. 320 x 480 px != at a street corner in a hurry
6. 1920 x 1200 px != at the office or at home
7. ALWAYS OPTIMIZE!
8. The Web is getting fatter.
9. The top eCommerce sites in the world are 22% slower than they were last year. http://www.yottaa.com
10. August 2013. Average web page weights 1.5MB http://httparchive.org
11. 94% of responsive sites are roughly the same size across all resolutions
12. Page Size per Resolution
13. 2013 vs 2012 http://www.guypo.com/
14. Popular Magento Theme on Themeforest
15. RWD sucks!
16. RWD is just fine.
17. RWD is just fine. We are doing it WRONG! http://timkadlec.com
18. Performance is about respecting your customers
19. 88% smartphone users had a negative experience shopping on mobile. http://www.getelastic.com
20. 40% users turned to competitor’s website after bad mobile experience http://www.themobileplaybook.com
21. 100ms = 1% revenue http://highscalability.com
22. Bad Performance is Bad Business
23. Speed is a feature
24. Treat performance as a part of UX design
25. Set a Performance Budget
26. Set a Performance Budget • < 3 sec on wi-fi
27. Set a Performance Budget • < 3 sec on wi-fi • < 5 sec on 3G
28. Set a Performance Budget • < 3 sec on wi-fi • < 5 sec on 3G • < 400 Kb
29. Set a Performance Budget • < 3 sec on wi-fi • < 5 sec on 3G • < 400 Kb • < 20 http requests
30. Set a Performance Budget • < 3 sec on wi-fi • < 5 sec on 3G • < 400 Kb • < 20 http requests • …..
31. Set a Performance Budget Adding a new feature to the site:
32. Set a Performance Budget Adding a new feature to the site: • Optimize an existing feature or asset on the page.
33. 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.
34. 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
35. Why so slow?
36. • Network Latency • Too many http requests • Too many bytes • Poor caching • Rendering What makes websites slow?
37. http://www.igvita.com Network latency
39. http://www.mobify.com 3G & 4G network carrier latency & packet loss
40. You can’t beat the latency
41. • Pre-fetch DNS • HTML, images, Javascript, CSS... <link href="//my.domain.com" rel="dns-prefetch" /> Pre-fetch resources
42. • Deploys content across multiple servers • Servers distributed across multiple locations • Closer to user, faster delivery Use Content Delivery Network
43. • Network Latency • Too many http requests • Too many bytes • Poor caching • Rendering What makes websites slow?
44. • Use CSS sprites • Use Icon Fonts • Merge Javascript • Merge CSS Reduce http requests
45. 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>
46. 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
47. 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
48. • Network Latency • Too many http requests • Too many bytes • Poor caching • Rendering What makes websites slow?
49. • Gzip components • Minify Javascript and CSS • Optimize Images • Use conditional loading Reduce weight of the page
50. 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
51. 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. }
52. • Network Latency • Too many http requests • Too many bytes • Poor caching • Rendering What makes websites slow?
53. • 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
54. • Network Latency • Too many http requests • Too many bytes • Poor caching • Rendering What makes websites slow?
55. • Put CSS at the top • Put JS at the bottom :) • Load JS asynchronously :) • Use responsive images • Use 3D transforms for animations Speed up rendering
56. 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(!)
58. Illusion of speed != actual speed
59. Prepare to be deprecated
60. Technology changes. Best practices too.
61. Experiment. Learn. Share.
62. Questions?