Build Better Responsive websites. Hrvoje Jurišić

1. Build better
responsive websites
Hrvoje Jurišić, Inchoo

3. Nobody likes waiting

4. OMGcommerce 2014 @hrvojejurisic

5. Users expect
2 seconds
Source: akamai.com

6. After 3 seconds
40% will leave
Source: akamai.com

7. 88% of customers
will never come back
Source: gomez.com

8. 1 second delay
7% less conversions
Source: tagman.com

9. Amazon: 100 ms latency
1% less revenue
Source: highscalability.com

10. Bad performance
Bad business

11. 2013 load time: 7.2s
2014 load time: 10.7s
Source: http://www.radware.com/

12. 2013: 1007 KB
2014: 1677 KB
Source: http://www.radware.com/

13. Source: http://httparchive.org/

15. 55% of eCommerce traffic
happens on mobile device
Source: webperformancetoday.com

16. Mobile users expect sites to load
as fast or even faster
than on their desktops
Source: strangeloopnetworks.com

17. Meet Magento New York 2014 @hrvojejurisic

18. 4G to the
rescue??

19. not so
fast...

20. Source: igvita.com

21. Source: mobify.com

22. Source: facebook

24. Source: guypo.com
Page Size
Smallest resolution
vs
Biggest resolution

25. Popular themeforest Magento Theme

26. RWD is bad for
performance!

27. 6% of RWD sites
done right

29. RWD is bad for performance!

30. RWD is bad for performance!
Blame the
implementation,
not the technique

32. Speed is a feature
treat it as a part of UX design

33. Mobile first, content out
workflow
Source: http://www.lukew.com

34. Set a
performance budget
Source: http://timkadlec.com

36. Optimization

37. Foundations:

38. Foundations:
1. Reduce http requests

39. Foundations:
1. Reduce http requests
● Use CSS sprites
● Use icon fonts
● Merge javascript
● Merge CSS

40. Foundations:
1. Reduce http requests
2. Gzip components

41. Foundations:
1. Reduce http requests
2. Gzip components
3. Minify JS and CSS

42. Foundations:
1. Reduce http requests
2. Gzip components
3. Minify JS and CSS
4. Optimize images

43. Foundations:
1. Reduce http requests
2. Gzip components
3. Minify JS and CSS
4. Optimize images
5. CSS at the top

44. 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

45. 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

47. Tools
1. Firebug/Web inspector
2. webpagetest.org
3. Google PageSpeed

48. Case study:
Load time: 2.85s Start render: 2.95s Visually Complete: 3.1s Speed index: 3060

49. Javascript delivery
● Merge JS files
● Don’t block rendering

50. 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>

51. Javascript delivery - grouping js
Homepage JS
<script src="....ebbc8820d00736a6f2402ff7b21567b2.js"></script>

52. 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>

53. Javascript delivery - grouping js
Product page JS
<script src="....3c5329efd2e437592d48e1a3a4eac5b1.js"></script>

54. Javascript delivery - grouping js
Homepage JS
<script src="....ebbc8820d00736a6f2402ff7b21567b2.js"></script> 100KB
Product page JS
<script src="....3c5329efd2e437592d48e1a3a4eac5b1.js"></script> 120KB

55. 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>

56. 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

57. Javascript delivery - defer js
<action method="addJs">
<script>prototype/prototype.js</script>
<params>data-group="main" defer</params>
</action>

58. 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>

59. Load time: 2.66s
Start render: 1.3s
Visually Complete: 2.8s
Speed index: 2223

60. 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

61. 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/

62. Load time: 1.8s
Start render: 1.29s
Visually Complete: 2.3s
Speed index: 1746

63. 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”

64. Images delivery
<img
class="lazy"
src="default_image_url/loader"
data-small = "small_image_url"
data-big = "big_image_url"
alt=""
/>

65. Images delivery
/** Pseudocode **/
if (image_is_on_screen) {
if (resolution < 500px) && (pixel_density < 2 ) {
show small image
} else {
show big image
}
}
Script: echo.js

66. Load time: 1.50s
Start render: 1.29s
Visually Complete: 2.2s
Speed index: 1653

67. CSS delivery
● Start rendering early
● Inline Critical CSS
● Merge external CSS files
● Defer loading of non-critical CSS

68. CSS delivery - inline critical CSS
critical styles
non-critical styles

69. CSS delivery - inline critical CSS
/** Pseudocode **/
if (cssLoaded_cookie_exists) {
Load CSS normally
} else {
<style>
inject_critical_css
</style>
Load non-critical CSS async
set cssLoaded cookie
});
}
Script: loadCSS

70. 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

71. 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

72. Load time: 1.55s
Start render: 0.7s
Visually Complete: 2.1s
Speed index: 1547

73. Load time: 1.55s
Start render: 0.7s
Visually Complete: 2.1s
Speed index: 1547
Load time: 2.85s
Start render: 2.95s
Visually Complete: 3.1s
Speed index: 3060

74. Takeaways:
1. Performance matters

75. Takeaways:
1. Performance matters
2. Treat performance as a part of UX

76. Takeaways:
1. Performance matters
2. Treat performance as a part of UX
3. Set performance budget

77. Takeaways:
1. Performance matters
2. Treat performance as a part of UX
3. Set performance budget
4. Optimize

78. 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!

79. Thank you
Presentation: http://goo.gl/H0aNIc