Faster Mobile Websites

Faster Mobile Websites

This talk was first presented at UpFront Conference on the 19th May 2015. http://upfrontconf.com/

Presentation Details
----------------------------------
As mobile device usage continues to grow, developers need to ensure that their mobile websites are fast and offer a high quality experience for all users. A fast mobile website can be the difference between winning or losing a customer. A few seconds delay in your page load time and you might find that users to your site easily become frustrated and navigate away to another site...or even worse, your competitors site!

Developers understand the need for fast, smooth websites - but how do you apply this to a mobile website and the vast amount of mobile devices out there? This talk is aimed at all developers that build websites and will dive into basic and advanced web performance techniques - there is something for everyone! The talk also covers free tools that developers can use to test and profile the performance of their mobile websites.

This talk will cover a variety of performance related issues specifically aimed at mobile websites and the techniques that developers can use to overcome them and will include:

- Mobile Network Overhead
- Critical Path Rendering
- Basic web performance techniques
- Responsive images
- Performance build automation
- Mobile Website profiling and debugging tools
- A step by step website optimization

http://deanhume.com

C620790ae5bf5b50c245b2e0ef95f338?s=128

Dean Hume

May 19, 2015
Tweet

Transcript

  1. Faster Mobile Websites

  2. Dean Hume @deanohume

  3. Why is speed so important?

  4. 100 millisecond delay

  5. 100 millisecond delay Decreased sales by 1%

  6. £1

  7. A slow site will : Affect the impression of your

    brand
  8. A slow site will : Affect the impression of your

    brand Increase user frustration
  9. A slow site will : Affect the impression of your

    brand Increase user frustration Cost your user’s money
  10. whatdoesmysitecost.com

  11. A slow site will : Affect the impression of your

    brand Increase user frustration Cost your user’s money Make your user’s use your competitors
  12. A slow site will : Affect the impression of your

    brand Increase user frustration Cost your user’s money Make your user’s use your competitors Affect your SEO rankings
  13. People != Patience

  14. None
  15. Mobile Devices?

  16. Mobile

  17. is Mobile

  18. Mobile HUGE is

  19. Mobile commerce will be 40% of eCommerce by the end

    of 2015 source: criteo.com/resources/mobile-commerce-q1-2015/
  20. Mobile transactions grew 10% in the last 3 months

  21. None
  22. So what can we do?

  23. None
  24. Understand Mobile Networks

  25. RRC Negotiation Network Overhead 100ms

  26. DNS Lookup RRC Negotiation Network Overhead 100ms 200ms

  27. DNS Lookup TCP Connection RRC Negotiation Network Overhead 100ms 200ms

    200ms
  28. DNS Lookup TCP Connection HTTP Request & Response RRC Negotiation

    Network Overhead 100ms 200ms 200ms 200ms
  29. Latency is

  30. Latency is bad.

  31. Latency is

  32. Latency is “the new web performance bottleneck.”

  33. 3G 4G

  34. 3G 200 - 3500 ms delay 4G

  35. 3G 200 - 3500 ms delay 4G 100 - 600

    ms delay
  36. In North America 92% of smartphones took > 200ms to

    load a 20KB file
  37. Deliver only the goods that will be used!

  38. None
  39. RAIL

  40. R A I L

  41. Response A I L

  42. Response Animation I L

  43. Response Animation Idle L

  44. Response Animation Idle Load

  45. RAIL in Action

  46. RAIL in Action 1. Reduce page size (Load)

  47. RAIL in Action 1. Reduce page size (Load) 2. Reduce

    HTTP requests (Load)
  48. RAIL in Action 1. Reduce page size (Load) 2. Reduce

    HTTP requests (Load) 3. Reduce Blocking (Load, Idle)
  49. RAIL in Action 1. Reduce page size (Load) 2. Reduce

    HTTP requests (Load) 3. Reduce Blocking (Load, Idle) 4. Improve render times (Animation, Idle, Response)
  50. 1. Reduce page size

  51. 1. Reduce page size Load

  52. • Optimize images • Remove unused CSS • Minify CSS

    and JS files • Responsive images Reduce page size
  53. Optimize images

  54. 160 KB 110 KB Before After

  55. kraken.io

  56. imageoptimization.info

  57. Remove unused CSS

  58. Before 107 KB After 30 KB

  59. 86% Unused CSS

  60. Chrome Developer Tools

  61. Grunt Gulp

  62. Grunt uncss Gulp uncss

  63. Responsive images

  64. None
  65. 72%

  66. <picture> <source media="(min-width: 1024px)" srcset="dest/1024/dog.jpg"> <source media="(min-width: 640px)" srcset="dest/640/dog.jpg"> <source

    srcset="dest/320/dog.jpg"> <img src="dest/640/dog.jpg" alt="The fallback image."> <p>This is some accessible text.</p> </picture>
  67. <picture> <source media="(min-width: 1024px)" srcset="dest/1024/dog.jpg"> <source media="(min-width: 640px)" srcset="dest/640/dog.jpg"> <source

    srcset="dest/320/dog.jpg"> <img src="dest/640/dog.jpg" alt="The fallback image."> <p>This is some accessible text.</p> </picture>
  68. <picture> <source media="(min-width: 1024px)" srcset="dest/1024/dog.jpg"> <source media="(min-width: 640px)" srcset="dest/640/dog.jpg"> <source

    srcset="dest/320/dog.jpg"> <img src="dest/640/dog.jpg" alt="The fallback image."> <p>This is some accessible text.</p> </picture>
  69. Responsive -images Gulp- Responsive

  70. responsiveimages.org

  71. responsiveimages.org scottjehl.github.io/picturefill Polyfill Polyfill

  72. 2. Reduce HTTP Requests

  73. 2. Reduce HTTP Requests Load

  74. ★ Combine Styles and Scripts Reduce HTTP Requests

  75. ★ Combine Styles and Scripts ★ Spriting Reduce HTTP Requests

  76. ★ Combine Styles and Scripts ★ Spriting ★ Caching Reduce

    HTTP Requests
  77. ★ Combine Styles and Scripts ★ Spriting ★ Caching ★

    Do you really need that? Reduce HTTP Requests
  78. Combine

  79. Grunt Gulp

  80. Automate all the things! yeoman.io/blog/performance-optimization.html

  81. Spriting

  82. None
  83. None
  84. 1 request

  85. 1 request many images

  86. - No whitespace Sprites

  87. - No whitespace - Optimize & cache Sprites

  88. - No whitespace - Optimize & cache - Aim for

    similar palettes Sprites
  89. Caching

  90. - Beware of proxies Caching

  91. - Beware of proxies - Standardize your file capitalization Caching

  92. - Beware of proxies - Standardize your file capitalization -

    Determine the best cache lifetime Caching
  93. - Beware of proxies - Standardize your file capitalization -

    Determine the best cache lifetime - Minimize churn Caching
  94. Do you really need that?

  95. “When you want to be fast, you have to give

    up the things slowing you down.” Addy Osmani
  96. CSS instead of images Consider :

  97. CSS instead of images Social Widgets Consider :

  98. None
  99. “Across the 61 million mobile sessions we studied, we found

    that only 0.2% of mobile users do any social sharing.” source: http://moovweb.com/blog/anyone-use-social-sharing-buttons-mobile/
  100. CSS instead of images Social Widgets 3rd Party Scripts Consider

    :
  101. CSS instead of images Social Widgets 3rd Party Scripts Carousels

    Consider :
  102. shouldiuseacarousel.com

  103. Deliver only the goods that will be used!

  104. None
  105. 3. Reduce Blocking

  106. 3. Reduce Blocking Load / Idle

  107. HTML

  108. HTML CSS

  109. HTML CSS JS

  110. HTML CSS JS Blocking Blocking

  111. “More Weight Doesn't Mean More Wait” Scott Jehl

  112. Finding the Critical Path

  113. None
  114. 14 KB

  115. None
  116. Grunt Critical Critical

  117. <!doctype html> <head> <style> /* inlined critical CSS */ </style>

    <script> loadCSS('deferred.css'); </script> </head> <body> ...body goes here </body> </html>
  118. <!doctype html> <head> <style> /* inlined critical CSS */ </style>

    <script> loadCSS('deferred.css'); </script> </head> <body> ...body goes here </body> </html>
  119. Inline?

  120. 1 Roundtrip 14 KB

  121. 4. Improve Rendering

  122. 4. Improve Rendering Load / Idle Animation, Idle, Response

  123. None
  124. Dev Tools are your Best Friend

  125. Profiling tools are everywhere

  126. Find your slowest points

  127. Find your slowest points

  128. Find your slowest points

  129. Stay Jank Free! jankfree.org

  130. http://bit.ly/60-fps Building 60 FPS Web Apps

  131. discover-devtools.codeschool.com

  132. None
  133. github.com/zeman/perfmap

  134. Recap 1. Reduce page size 2. Reduce HTTP requests 3.

    Reduce Blocking 4. Improve render times
  135. Show me the Money

  136. None
  137. Stats 52 HTTP Requests 950 KB Total 250 KB of

    CSS 158 KB of JavaScript Speed Index - 2075
  138. 15 seconds 3G Dulles, VA

  139. None
  140. Grunt-UnCSS

  141. Grunt-UnCSS Kraken.io

  142. Grunt-UnCSS Grunt-Responsive-images Kraken.io

  143. Grunt-UnCSS Grunt-Responsive-images Grunt-Critical-CSS Kraken.io

  144. Grunt-UnCSS Grunt-Responsive-images Grunt-Critical-CSS Grunt-Contrib-htmlmin Kraken.io

  145. After 32 HTTP Requests 402 KB Total 3.7 KB of

    CSS 44 KB of JavaScript Speed Index - 1675
  146. After (52) 32 HTTP Requests (950) 402 KB Total (250)

    3.7 KB of CSS (158) 44 KB of JavaScript (2075) Speed Index - 1675
  147. 3.7 seconds 3G Dulles, VA 3G Dulles, VA

  148. Critical Path 0 0.5 1.0 1.5 2.0 2.5

  149. bit.ly/upfront-conf

  150. Testing

  151. webpagetest.org

  152. Pagespeed Insights

  153. Device Emulator Chrome

  154. Remote debugging Android

  155. Remote debugging iOS

  156. Remote debugging iOS developer.apple.com/safari/tools

  157. Summary The importance of a fast website

  158. Summary The importance of a fast website The latency delay

    in mobile networks
  159. Summary The importance of a fast website The latency delay

    in mobile networks RAIL
  160. Summary The importance of a fast website The latency delay

    in mobile networks RAIL Critical Path
  161. Summary The importance of a fast website The latency delay

    in mobile networks RAIL Critical Path Improve rendering
  162. Summary The importance of a fast website The latency delay

    in mobile networks RAIL Critical Path Improve rendering Profiling & testing tools
  163. None
  164. Think lean Think fast!

  165. Thank you @deanohume