Build better responsive websitesHrvoje Jurišić, Inchoo
Nobody likes waiting
Users expect
2 seconds
Source: akamai.com
After 3 seconds40% will leave
Source: akamai.com
88% of customerswill never come back
Source: gomez.com
1 second delay7% less conversions
Source: tagman.com
Amazon: 100 ms latency
1% less revenue
Source: highscalability.com
Bad performanceBad business
2013 load time: 7.2s
2014 load time: 10.7s
Source: http://www.radware.com/
2013: 1007 KB
2014: 1677 KB
Source: http://www.radware.com/
Source: http://httparchive.org/
55% of eCommerce traffichappens on mobile device
Source: webperformancetoday.com
Mobile users expect sites to load
as fast or even faster than on their desktops
Source: strangeloopnetworks.com
@hrvojejurisicMeet Magento New York 2014
4G to the rescue??
not so fast...
Source: igvita.com
Source: mobify.com
Source: facebook
Source: guypo.com
Page SizeSmallest resolution vsBiggest resolution
Popular themeforest Magento Theme
RWD is bad for performance!
6% of RWD sitesdone right
RWD is bad for performance!
Blame the implementation,not the technique
RWD is bad for performance!
Speed is a featuretreat it as a part of UX design
Mobile first, content outworkflow
Source: http://www.lukew.com
Set a performance budget
Source: http://timkadlec.com
Optimization
Foundations:
1. Reduce http requests
Foundations:
1. Reduce http requests
● Use CSS sprites● Use icon fonts● Merge javascript● Merge CSS
Foundations:
1. Reduce http requests
2. Gzip components
Foundations:
1. Reduce http requests
2. Gzip components
3. Minify JS and CSS
Foundations:
1. Reduce http requests
2. Gzip components
3. Minify JS and CSS
4. Optimize images
Foundations:
1. Reduce http requests
2. Gzip components
3. Minify JS and CSS
4. Optimize images
5. CSS at the top
Foundations:
1. Reduce http requests
2. Gzip components
3. Minify JS and CSS
4. Optimize images
5. CSS at the top
6. JS at the bottom or async
Foundations:
1. Reduce http requests
2. Gzip components
3. Minify JS and CSS
4. Optimize images
5. CSS at the top
6. JS at the bottom or async
7. Use CDN
Foundations:
Tools
1. Firebug/Web inspector2. webpagetest.org3. Google PageSpeed
Case study:
Load time: 2.85s Start render: 2.95s Visually Complete: 3.1s Speed index: 3060
Javascript delivery
● Merge JS files
● Don’t block rendering
Javascript delivery - grouping js
<default><reference name="head">
<action method="addJs"><script>prototype/prototype.js</script>
</action>. . .. . .. . .
<action method="addJs"><script>scriptaculous/builder.js</script>
</action></reference>
</default>
Javascript delivery - grouping js
Homepage JS
<script src="....ebbc8820d00736a6f2402ff7b21567b2.js"></script>
Javascript delivery - grouping js
<catalog_product_view><reference name="head">
<action method="addJs"><script>varien/product.js</script>
</action> <action method="addJs">
<script>varien/configurable.js</script></action>
</reference></catalog_product_view>
Javascript delivery - grouping js
Product page JS
<script src="....3c5329efd2e437592d48e1a3a4eac5b1.js"></script>
Javascript delivery - grouping js
Homepage JS
<script src="....ebbc8820d00736a6f2402ff7b21567b2.js"></script> 100KB
Product page JS
<script src="....3c5329efd2e437592d48e1a3a4eac5b1.js"></script> 120KB
Javascript delivery - grouping js
<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>
Javascript delivery - grouping js
Homepage JS
<script src="....ebbc8820d00736a6f2402ff7b21567b2.js" data-group="main"> - 100Kb
Product page JS
<script src="....ebbc8820d00736a6f2402ff7b21567b2.js" data-group="main"> - cached <script src="....3c5329efd2e437592d48e1a3a4eac5b1.js"> - 20Kb
Javascript delivery - defer js
<action method="addJs"><script>prototype/prototype.js</script><params>data-group="main" defer</params>
</action>
Javascript delivery - defer js
<script type="text/javascript"> document.addEventListener( "DOMContentLoaded", function(){ Mage.Cookies.path = '<?php echo $this->getPath()?>'; Mage.Cookies.domain = '<?php echo $this->getDomain()?>'; }, false );</script>
Load time: 2.66s Start render: 1.3s Visually Complete: 2.8s Speed index: 2223
Font serving
● Choose fallback font wisely
● Prepare for failure - style fallback font
● Don’t block rendering
● Minimize FOUT
● Store Base64 encoded font in local storage
Font serving /** Pseudocode **/
if (fonts_in_localStorage) {
inject cached Font style sheet
} else {
// Don't block the loading of the page;
on(window, "load", function() {
load webfont.css
store fonts_in_localStorage
});
}
Script: https://gist.github.com/
Load time: 1.8s Start render: 1.29s Visually Complete: 2.3s Speed index: 1746
Images delivery
● Don’t waste user’s bandwidth
● Load image when needed: “Lazy loading”
● Load images based on screen size and pixel density:
“Responsive images”
Images delivery
<img class="lazy"src="default_image_url/loader"
data-small = "small_image_url" data-big = "big_image_url" alt="" />
Images delivery /** Pseudocode **/
if (image_is_on_screen) {
if (resolution < 500px) && (pixel_density < 2 ) {
show small image
} else {
show big image
}
}
Script: echo.js
Load time: 1.50s Start render: 1.29s Visually Complete: 2.2s Speed index: 1653
CSS delivery
● Start rendering early
● Inline Critical CSS
● Merge external CSS files
● Defer loading of non-critical CSS
CSS delivery - inline critical CSS
critical styles
non-critical styles
CSS delivery - inline critical CSS
/** Pseudocode **/
if (cssLoaded_cookie_exists) {Load CSS normally
} else {<style>
inject_critical_css</style>Load non-critical CSS asyncset cssLoaded cookie});
}
Script: loadCSS
CSS delivery - critical CSS
SCSS
_account.scss_breadcrumbs.scss_buttons.scss_cart.scss_checkout.scss_footer.scss_forms.scss_header.scss_global.scss_navigation.scss_search.scss. . . . . .
styles.scss styles.css
CSS delivery - critical CSS
SCSS
_account.scss_breadcrumbs.scss_buttons.scss_cart.scss_checkout.scss_footer.scss_forms.scss_header.scss_global.scss_navigation.scss_search.scss. . . . . .
critical.scss critical.css
Load time: 1.55s Start render: 0.7s Visually Complete: 2.1s Speed index: 1547
Load time: 1.55s Start render: 0.7s Visually Complete: 2.1sSpeed index: 1547
Load time: 2.85s Start render: 2.95s Visually Complete: 3.1sSpeed index: 3060
1. Performance matters
Takeaways:
1. Performance matters
2. Treat performance as a part of UX
Takeaways:
1. Performance matters
2. Treat performance as a part of UX
3. Set performance budget
Takeaways:
1. Performance matters
2. Treat performance as a part of UX
3. Set performance budget
4. Optimize
Takeaways:
1. Performance matters
2. Treat performance as a part of UX
3. Set performance budget
4. Optimize
5. RWD is NOT bad for performance!
Takeaways: