Build Better Responsive websites. Hrvoje Jurišić

Build better responsive websitesHrvoje Jurišić, Inchoo

Nobody likes waiting

OMGcommerce 2014 @hrvojejurisic

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:

Thank you

Presentation: http://goo.gl/H0aNIc