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

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
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
22. So what can we do?
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!
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
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
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 :
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!
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
114. 14 KB
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
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
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
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
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
164. Think lean Think fast!
165. Thank you @deanohume