hrvoje jurišić, inchoo - converge ict › wp-content › uploads › 2015 › 10 › ... · every...

Every second countsBuild faster Magento stores

Hrvoje Jurišić, Inchoo

Meet Magento GR 2015 @hrvojejurisic

http://inchoo.net

http://twitter.com/hrvojejurisic


Hrvoje JurisicMagento frontend developer @InchooAuthor of the famous Inchooers comic strip


http://inchoo.net

https://inchoo.net/tag/inchooers/




EDGE



Nobody likes waiting

@hrvojejurisicMeet Magento GR 2015



Numbers

Users expect

2 seconds

@hrvojejurisicSource: akamai.comMeet Magento GR 2015



http://www.akamai.com/html/about/press/releases/2009/press_091409.html?utm_source=Magentoblog&utm_medium=blog&utm_campaign=blogarticles

After 3 seconds40% will leave

Meet Magento GR 2015 @hrvojejurisicSource: akamai.com



http://www.akamai.com/html/about/press/releases/2009/press_091409.html?utm_source=Magentoblog&utm_medium=blog&utm_campaign=blogarticles

88% of customerswill never come back

Meet Magento GR 2015 @hrvojejurisicSource: gomez.com



http://www.gomez.com/pdfs/wp_why_web_performance_matters.pdf

44% of shoppersfear that slow checkout means something went

wrong with the transaction

Meet Magento GR 2015 @hrvojejurisicSource: Radware



http://www.webperformancetoday.com/2014/10/30/scary-ecommerce-web-performance-infographic/

Fast page loadbuilds TRUST




1 second delay7% less conversions

Meet Magento GR 2015 @hrvojejurisicSource: tagman.com



http://www.tagman.com/mdp-blog/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversions/

Google: 500ms latency

20% less traffic

Meet Magento GR 2015 @hrvojejurisicSource: Linden



http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html

Amazon: 100 ms latency

1% less revenue

Meet Magento GR 2015 @hrvojejurisicSource: highscalability.com



http://highscalability.com/latency-everywhere-and-it-costs-you-sales-how-crush-it


Bad performanceBad business



2014: eCommerce websites

21% slower than 2013

Meet Magento GR 2015 @hrvojejurisicSource: webperformancetoday.com



http://www.webperformancetoday.com/2014/02/18/new-findings-median-ecommerce-page-has-slowed-down-by-21-in-the-past-year/

2012 load time: 6.8s

2014 load time: 10.0s




http://www.webperformancetoday.com/2014/04/22/new-findings-retail-sites-use-cdn-slower-sites/

Meet Magento GR 2015 @hrvojejurisicSource: HTTP Archive

September 2013.



http://httparchive.org/interesting.php?a=All&l=Sep%2015%202015

Meet Magento GR 2015 @hrvojejurisicSource: HTTP Archive

September 2015.



http://httparchive.org/interesting.php?a=All&l=Sep%2015%202015

55% of eCommerce traffichappens on mobile device




http://www.webperformancetoday.com/2014/04/03/slow-pages-hurt-entire-user-experience-slides/

Mobile users expect sites to load as fast or even

faster than on their desktops

Meet Magento GR 2015 @hrvojejurisicSource: strangeloopnetworks.com



http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-user-expectations/mobile-device-users-expect-sites-to-load-fast/

Up to 97% of mobile cartsare abandoned




http://www.webperformancetoday.com/2015/02/04/11-reasons-care-mobile-performance-2015-infographic/


4G to the rescue??




not so fast….



Meet Magento GR 2015 @hrvojejurisicSource: igvita.com



http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/

Meet Magento GR 2015 @hrvojejurisicSource: Mobify



http://www.mobify.com/blog/web-performance-optimization/

HOW?




Speed is a featuretreat it as a part of

UX design




Every decisioncomes with a cost




Set a performance budget

Meet Magento GR 2015 @hrvojejurisicSource: timkalec.com



http://timkadlec.com/2013/01/setting-a-performance-budget/


● < 3 sec on wi-fi





● < 3 sec on wi-fi● < 5 sec on 3G





● < 3 sec on wi-fi● < 5 sec on 3G● < 500 Kb





● < 3 sec on wi-fi● < 5 sec on 3G● < 500 Kb● < 30 http requests




It’s a battle, make it personal




Optimization




Images




50% of top 100 retail stores fail to compress images

Meet Magento GR 2015 @hrvojejurisicSource: Radware



http://www.webperformancetoday.com/2015/09/08/deja-vu-all-over-again/


1. Optimize Images




a. Compressb. Use right formatc. Use Responsive Images



Latency





1. Optimize Images2. Use CDN



Requests




100 http requests in 2014170 http requests in 2015





1. Optimize Images2. Use CDN3. Reduce http requests




a. Use Spritesb. Use Icon Fontsc. Merge Javascript filesd. Merge CSS filese. Lazy Loading



Page weight





1. Optimize Images2. Use CDN3. Reduce http requests4. Reduce page weight




a. Optimize Imagesb. Lazy Loadingc. Gzip componentsd. Minify JS and CSS files



Parallel downloads





1. Optimize Images2. Use CDN3. Reduce http requests4. Reduce page weight5. Use multiple domains for static assets



Cache




The fastest http requestis the one not made





1. Optimize Images2. Use CDN3. Reduce http requests4. Reduce page weight5. Use multiple domains for static assets6. Use far future header expires



Rendering




CSS blocks renderingJS blocks HTML parser





1. Optimize Images2. Use CDN3. Reduce http requests4. Reduce page weight5. Use multiple domains for static assets6. Use far future header expires7. Optimize critical rendering path




a. CSS file at the topb. JS file async or at the bottom



We need renderabove the fold content!





a. CSS file at the topb. JS file async or at the bottom




a. CSS file at the topa. Inline critical CSS at the topb. JS file async or at the bottomc. Load the rest of CSS at the bottom



Tools





● Developer tools, Firebug● Webpagetest.org● PageSpeed ● YSlow



http://www.webpagetest.org

http://www.webpagetest.org

https://developers.google.com/speed/pagespeed/insights/

https://developers.google.com/speed/pagespeed/insights/

http://yslow.org/

http://yslow.org/

Remember




Speed is an importantfeature of a webstore




Every design decision hasan impact on performance




Follow best practicesfor page speed optimization




Thank you




Lots of Code and Fun in the Sun

http://www.youtube.com/watch?v=F0srMFSeXaI

hrvoje jurišić, inchoo - converge ict › wp-content › uploads › 2015 › 10 › ... · every...

Documents