hrvoje jurišić, inchoo - converge ict › wp-content › uploads › 2015 › 10 › ... · every...
Post on 30-May-2020
3 Views
Preview:
TRANSCRIPT
Every second countsBuild faster Magento stores
Hrvoje Jurišić, Inchoo
Meet Magento GR 2015 @hrvojejurisic
Hrvoje JurisicMagento frontend developer @InchooAuthor of the famous Inchooers comic strip
Meet Magento GR 2015 @hrvojejurisic
Meet Magento GR 2015 @hrvojejurisic
Meet Magento GR 2015 @hrvojejurisic
EDGE
Nobody likes waiting
@hrvojejurisicMeet Magento GR 2015
Numbers
Users expect
2 seconds
@hrvojejurisicSource: akamai.comMeet Magento GR 2015
After 3 seconds40% will leave
Meet Magento GR 2015 @hrvojejurisicSource: akamai.com
88% of customerswill never come back
Meet Magento GR 2015 @hrvojejurisicSource: gomez.com
44% of shoppersfear that slow checkout means something went
wrong with the transaction
Meet Magento GR 2015 @hrvojejurisicSource: Radware
Fast page loadbuilds TRUST
Meet Magento GR 2015 @hrvojejurisic
1 second delay7% less conversions
Meet Magento GR 2015 @hrvojejurisicSource: tagman.com
Google: 500ms latency
20% less traffic
Meet Magento GR 2015 @hrvojejurisicSource: Linden
Amazon: 100 ms latency
1% less revenue
Meet Magento GR 2015 @hrvojejurisicSource: highscalability.com
Meet Magento GR 2015 @hrvojejurisic
Bad performanceBad business
2014: eCommerce websites
21% slower than 2013
Meet Magento GR 2015 @hrvojejurisicSource: webperformancetoday.com
2012 load time: 6.8s
2014 load time: 10.0s
Meet Magento GR 2015 @hrvojejurisicSource: webperformancetoday.com
Meet Magento GR 2015 @hrvojejurisicSource: HTTP Archive
September 2013.
Meet Magento GR 2015 @hrvojejurisicSource: HTTP Archive
September 2015.
55% of eCommerce traffichappens on mobile device
Meet Magento GR 2015 @hrvojejurisicSource: webperformancetoday.com
Mobile users expect sites to load as fast or even
faster than on their desktops
Meet Magento GR 2015 @hrvojejurisicSource: strangeloopnetworks.com
Up to 97% of mobile cartsare abandoned
Meet Magento GR 2015 @hrvojejurisicSource: webperformancetoday.com
Meet Magento GR 2015 @hrvojejurisic
4G to the rescue??
Meet Magento GR 2015 @hrvojejurisic
not so fast….
Meet Magento GR 2015 @hrvojejurisicSource: igvita.com
Meet Magento GR 2015 @hrvojejurisicSource: Mobify
HOW?
Meet Magento GR 2015 @hrvojejurisic
Speed is a featuretreat it as a part of
UX design
Meet Magento GR 2015 @hrvojejurisic
Every decisioncomes with a cost
Meet Magento GR 2015 @hrvojejurisic
Set a performance budget
Meet Magento GR 2015 @hrvojejurisicSource: timkalec.com
Set a performance budget
● < 3 sec on wi-fi
Meet Magento GR 2015 @hrvojejurisic
Set a performance budget
● < 3 sec on wi-fi● < 5 sec on 3G
Meet Magento GR 2015 @hrvojejurisic
Set a performance budget
● < 3 sec on wi-fi● < 5 sec on 3G● < 500 Kb
Meet Magento GR 2015 @hrvojejurisic
Set a performance budget
● < 3 sec on wi-fi● < 5 sec on 3G● < 500 Kb● < 30 http requests
Meet Magento GR 2015 @hrvojejurisic
It’s a battle, make it personal
Meet Magento GR 2015 @hrvojejurisic
Optimization
Meet Magento GR 2015 @hrvojejurisic
Images
Meet Magento GR 2015 @hrvojejurisic
50% of top 100 retail stores fail to compress images
Meet Magento GR 2015 @hrvojejurisicSource: Radware
Meet Magento GR 2015 @hrvojejurisic
1. Optimize Images
Meet Magento GR 2015 @hrvojejurisic
a. Compressb. Use right formatc. Use Responsive Images
Latency
Meet Magento GR 2015 @hrvojejurisic
Meet Magento GR 2015 @hrvojejurisic
Meet Magento GR 2015 @hrvojejurisic
1. Optimize Images2. Use CDN
Meet Magento GR 2015 @hrvojejurisic
Requests
Meet Magento GR 2015 @hrvojejurisic
100 http requests in 2014170 http requests in 2015
Meet Magento GR 2015 @hrvojejurisic
Meet Magento GR 2015 @hrvojejurisic
1. Optimize Images2. Use CDN3. Reduce http requests
Meet Magento GR 2015 @hrvojejurisic
a. Use Spritesb. Use Icon Fontsc. Merge Javascript filesd. Merge CSS filese. Lazy Loading
Page weight
Meet Magento GR 2015 @hrvojejurisic
Meet Magento GR 2015 @hrvojejurisic
Meet Magento GR 2015 @hrvojejurisic
1. Optimize Images2. Use CDN3. Reduce http requests4. Reduce page weight
Meet Magento GR 2015 @hrvojejurisic
a. Optimize Imagesb. Lazy Loadingc. Gzip componentsd. Minify JS and CSS files
Parallel downloads
Meet Magento GR 2015 @hrvojejurisic
Meet Magento GR 2015 @hrvojejurisic
Meet Magento GR 2015 @hrvojejurisic
1. Optimize Images2. Use CDN3. Reduce http requests4. Reduce page weight5. Use multiple domains for static assets
Meet Magento GR 2015 @hrvojejurisic
Cache
Meet Magento GR 2015 @hrvojejurisic
The fastest http requestis the one not made
Meet Magento GR 2015 @hrvojejurisic
Meet Magento GR 2015 @hrvojejurisic
1. Optimize Images2. Use CDN3. Reduce http requests4. Reduce page weight5. Use multiple domains for static assets6. Use far future header expires
Rendering
Meet Magento GR 2015 @hrvojejurisic
Meet Magento GR 2015 @hrvojejurisic
CSS blocks renderingJS blocks HTML parser
Meet Magento GR 2015 @hrvojejurisic
Meet Magento GR 2015 @hrvojejurisic
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
Meet Magento GR 2015 @hrvojejurisic
a. CSS file at the topb. JS file async or at the bottom
Meet Magento GR 2015 @hrvojejurisic
We need renderabove the fold content!
Meet Magento GR 2015 @hrvojejurisic
Meet Magento GR 2015 @hrvojejurisic
a. CSS file at the topb. JS file async or at the bottom
Meet Magento GR 2015 @hrvojejurisic
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
Meet Magento GR 2015 @hrvojejurisic
Tools
Meet Magento GR 2015 @hrvojejurisic
Meet Magento GR 2015 @hrvojejurisic
● Developer tools, Firebug● Webpagetest.org● PageSpeed ● YSlow
Remember
Meet Magento GR 2015 @hrvojejurisic
Speed is an importantfeature of a webstore
Meet Magento GR 2015 @hrvojejurisic
Every design decision hasan impact on performance
Meet Magento GR 2015 @hrvojejurisic
Follow best practicesfor page speed optimization
Meet Magento GR 2015 @hrvojejurisic
Thank you
Meet Magento GR 2015 @hrvojejurisic
top related