Give Responsive Design a Mobile Performance Boost at ModUXcon

RESS, Adaptive, call it what you want.... This presentation is about how we can use the server to increase performance front end. Great performance front end, starts at the back end.

1. John Arne Sæterås Twitter: @jonarnes Head of innovation at Mobiletech http://www.slideshare.net/jonarnes/ August 18, 2010 YEP, WEB ON MOBILE IS SLOW fredag 20. september 13
2. 100 ms faster: 1% increased revenue 1 sec delay: 2.8% drop in revenue http://www.slideshare.net/stubbornella/designing-fast-websites-presentation http://slideshare.net/markstanton/speed-matters SLOW IS NOT COOL ...even less cool on mobile fredag 20. september 13
3. THE VALUE CHAIN developer server internet telco  network device Doesn’t really make things more difficult, but reveal a few issues browser fredag 20. september 13
4. WHY IS MOBILE SLOWER? fredag 20. september 13
5. WHY IS MOBILE SLOWER? • Processing Power • Browser • Battery Preserving Strategies fredag 20. september 13
6. WHY IS MOBILE SLOWER? • Network Latency • Available Bandwidth • Processing Power • Browser • Battery Preserving Strategies fredag 20. september 13
7. WHY IS MOBILE SLOWER? • Network Latency • Available Bandwidth • The Implementation • Processing Power • Browser • Battery Preserving Strategies fredag 20. september 13
8. CURRENT STATE OF THE WEB AND MOBILE fredag 20. september 13
9. 1.6 MB 4% 9% 6% 3% 17% 63% Images Scripts CSS Flash Other HTML in 94 requests on average http://httparchive.org/ fredag 20. september 13
10. ASIDE... •In 2030 • Average web site is 320MB • Average (mobile) bandwidth is 93Mbps http://mpulp.mobi/2013/06/page-weight-and-mobile-bandwidth-in-year-2030/ fredag 20. september 13
11. 1.6 MB in 94 requests on average • Avg. speed: 2Mbps (cisco) • 1 Mbps = 0.12 MB/s • 1.6 / 0.24 = 6,7s 6, 7Seconds download time http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html fredag 20. september 13
12. 1.6 MB in 94 requests on average • Avg. speed: 2Mbps (cisco) • 1 Mbps = 0.12 MB/s • 1.6 / 0.24 = 6,7s 6, 7Seconds download time Hold that thought... more on this later. http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html fredag 20. september 13
13. 1.6 MB in 94 requests on average •100-200 ms pr roundtrip •Depends....(DNS, pipelining, concurrent TCP connections etc.) 9, 4Seconds latency in total fredag 20. september 13
14. 1.6 MB in 94 requests on average •100-200 ms pr roundtrip •Depends....(DNS, pipelining, concurrent TCP connections etc.) 9, 4Seconds latency in total Hold that thought... more on this now. fredag 20. september 13
15. MOBILE NETWORKS ARE FREAKING MAGIC! a quick look on how they work fredag 20. september 13
16. 2.1 s to connect. Latency, anything from 100 - >500ms fredag 20. september 13
17. 2.40 s, html page loaded TCP stuff fredag 20. september 13
18. 3-60 seconds.... Infographic: http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=YmB5ErqPR7b Now download assets fredag 20. september 13
19. 1.6 MB in 94 requests on average •Wake up radio (one time) •TCP and DNS (one time) •94 round trips (6 req pr conn.) •Downloading 1.6 mb over 2Mbps 10,6Seconds total + rendering time in the browser + server response time Disclaimer: lots of assumptions in this calculation! fredag 20. september 13
20. GOOGLE: 10.2 S. http://analytics.blogspot.nl/2012/04/global-site-speed-overview-how-fast-are.html fredag 20. september 13
21. Load time: 7.3 s Size: 7.3 MB Load time: 7.7 s Size: 7.2 MB fredag 20. september 13
22. SERVE A PAGE TO A MOBILE DEVICE IN LESS THAN 1 SECOND? A great overview by Ilya Grigorik bit.ly/mobile-barrier fredag 20. september 13
23. WHO CARES? The users care! fredag 20. september 13
24. WHO CARES? The users care! Telco Network 53,53 % Other 46,47 % How users connect. Page views per connection type. (Scandinavian Countries). Source: Mobiletech fredag 20. september 13
25. WHY USERS CARE? http://mobiforge.com/designing/blog/performance-money-part-1-end-users-wallet = European Vodafone account roaming in US fredag 20. september 13
26. SO, WHAT IS OUR CURRENT APPROACH TO THIS? fredag 20. september 13
27. ENTER RESPONSIVE WEB DESIGN Yay! fredag 20. september 13
28. RESPONSIVE WEB DESIGN Doh... Much smaller 6% Same size 72% Smaller 22% http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/ fredag 20. september 13
29. RESPONSIVE WEB DESIGN Doh... Much smaller 6% Same size 72% Smaller 22% http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/ Also about the same number of HTTP requests fredag 20. september 13
30. RWD IS A TECHNIQUE Nothing wrong with the technique! It is brilliant! The famous Iceberg: @brad_frost fredag 20. september 13
31. RWD IS A TECHNIQUE Nothing wrong with the technique! It is brilliant! The famous Iceberg: @brad_frost fredag 20. september 13
32. RWD != MOBILE FRIENDLY but an important step in the right direction fredag 20. september 13
33. Load time: 9.07s * Size: 288.14 kb Load time: 2.36 s * Size: 36.59 kb *) Load event fired. - More on how the built the new BBC News site: http://slidesha.re/14IYNOO fredag 20. september 13
34. http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html fredag 20. september 13
35. http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html fredag 20. september 13
36. PRIMARY ISSUES • Over downloading • Unused assets • Large images • Stuff... • Network issues • High Latency • Bandwidth • Flaky connection fredag 20. september 13
37. PARET0 PRINCIPLE Responsive Design is 20% of the work, and might get you 80% of the way fredag 20. september 13
38. PARET0 PRINCIPLE Responsive Design is 20% of the work, and might get you 80% of the way the “80/20 rule” fredag 20. september 13
39. THE LAST 20% will improve performance by 80% fredag 20. september 13
40. THE LAST 20% will improve performance by 80% fredag 20. september 13
41. SOMETIMES IT MAKES SENSE TO MULTISERVE fredag 20. september 13
42. When all you have is a hammer, every problem looks like a nail fredag 20. september 13
43. When all you have is a hammer, every problem looks like a nail RWD device or browser fredag 20. september 13
44. HOW CAN WE FIX THIS? fredag 20. september 13
45. HOW CAN WE FIX THIS? Adaptive Design fredag 20. september 13
46. THE VALUE CHAIN Adaptive Responsive developer server internet telco  network device browser fredag 20. september 13
47. RANT There is a web server. A very capable one, too. Use it! fredag 20. september 13
48. SERVER? How to make the server side available to front end devs fredag 20. september 13
49. fredag 20. september 13
50. http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/ fredag 20. september 13
51. RESS REsponsive design with Server Side components fredag 20. september 13
52. A BALANCING ACT no right answer fredag 20. september 13
53. PURPOSE OF RESS • Reduce need for client side processing • Eliminate “over downloading” fredag 20. september 13
54. INGREDIENTS OF RESS Hello, I know exactly how to make you shine! Information about the requesting device, network, etc. Request/Response fredag 20. september 13
55. NOT A CRIME! 82% of top 100 Alexa sites use Device Detection In the case of Mashable, we also detect the type of device and change the site’s behavior accordingly. “ ” http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/ http://mashable.com/2012/12/11/responsive-web-design/ fredag 20. september 13
56. THERE IS A DIFFERENCE fredag 20. september 13
57. THERE IS A DIFFERENCE Feature Detection var  appCache=  function()  {    return  !!window.applicationCache; }; fredag 20. september 13
58. THERE IS A DIFFERENCE User-Agent sniffing var  isiPhone  =  /iPhone/i.test(navigator.userAgent); Feature Detection var  appCache=  function()  {    return  !!window.applicationCache; }; fredag 20. september 13
59. THERE IS A DIFFERENCE User-Agent sniffing var  isiPhone  =  /iPhone/i.test(navigator.userAgent); Feature Detection var  appCache=  function()  {    return  !!window.applicationCache; }; Device Detection GET  http://ddr.demo.wew.io/c/dual_orientation Using the User-Agent (++) as a key to look up in a data base. fredag 20. september 13
60. NYT HORROR var ua = navigator.userAgent; window.BBDevice = { isOldBB: false, indexOfVersion: ua.indexOf("Version/"), indexOfBB: ua.indexOf("BlackBerry"), fullVersion: null, version: null }; if (window.BBDevice.indexOfBB >= 0) { existingClasses = document.body.className = existingClasses + " bb"; if (ua.indexOf("WebKit") < 0) { existingClasses = document.body.className = existingClasses + " oldbb"; window.BBDevice.isOldBB = true; window.BBDevice.fullVersion = ua.substr(window.BBDevice.indexOfBB); window.BBDevice.fullVersion = window.BBDevice.fullVersion.substr(window.BBDevice.fullVersion.indexOf("/") + 1, window.BBDevice.fullVersion.indexOf(" ")); window.BBDevice.version = window.BBDevice.fullVersion.substr(0, window.BBDevice.fullVersion.indexOf(".")); } else { if (window.BBDevice.indexOfVersion >= 0) { window.BBDevice.indexOfVersion = window.BBDevice.indexOfVersion + 8; window.BBDevice.fullVersion = ua.substr(window.BBDevice.indexOfVersion); window.BBDevice.fullVersion = window.BBDevice.fullVersion.substr(0, window.BBDevice.fullVersion.indexOf(" ")); window.BBDevice.version = window.BBDevice.fullVersion.substr(0, window.BBDevice.fullVersion.indexOf(".")); } } } else if (ua.indexOf("MSIE 9.0") >= 0 || ua.indexOf("IEMobile/9.0") >= 0) { existingClasses = document.body.className = existingClasses + " win75"; } http://mpulp.mobi/2013/05/user-agent-sniffing-on-the-new-nyt-mobile-site/ http://mobile.nytimes.com fredag 20. september 13
61. FEATURES OF A DDR • Nice place to store “tacit knowledge” • “Business rules” • Specifics to your site • Override feature detected features • If a feature works, but not well enough to make it useable • False positives (not a HUGE issue, but still) • Available server side too • Adapt and optimize stuff before sending to client fredag 20. september 13
62. FEATURES OF A DDR • Nice place to store “tacit knowledge” • “Business rules” • Specifics to your site • Override feature detected features • If a feature works, but not well enough to make it useable • False positives (not a HUGE issue, but still) • Available server side too • Adapt and optimize stuff before sending to client Device Description Repository fredag 20. september 13
63. EXAMPLE if  ($type_of_device  ==  ”smartTV”) include(TVnav.php); else include(nav.php); http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/ fredag 20. september 13
64. EXAMPLE if  ($supports_h264) echo  ‘<video  .../>’; else echo  ‘<a  href=”...”>Download</a>’; fredag 20. september 13
65. OUR APPROACH fredag 20. september 13
66. DEVICE DETECTION Single Capability Request GET  http://ddr.demo.wew.io/c/model_name Response {"model_name":"iPhone"}     Capability Sets Request GET  http://ddr.demo.wew.io/cset/mySet Response {"capa1":"first  capa  value","capa2":"second  capa  value"  ...} Examples and documentation: https://github.com/whateverweb/device-detection fredag 20. september 13
67. EXAMPLE var  http  =  new  XMLHttpRequest(); http.open("GET",  "http://ddr.demo.wew.io/c/brand_name",  true); http.onreadystatechange  =  function()  { if  (http.readyState  ==  4) console.log(http.responseText); } http.send(); fredag 20. september 13
68. EXAMPLE public  function  get($capa){   foreach(getallheaders()  as  $key  =>  $value)  {     if  ($key  !="Host")          $this-­‐>headers[]  =  $key  .  ':  '  .  $value;   }   $url  =  $this-­‐>service  .  $capa;   $curl  =  curl_init($url);   curl_setopt($curl,  CURLOPT_RETURNTRANSFER,  true);   curl_setopt($curl,  CURLOPT_HTTPHEADER,  $this-­‐>headers);       $this-­‐>response  =  curl_exec($curl);   curl_close($curl);   return  json_decode($this-­‐>response)-­‐>$capa; } fredag 20. september 13
69. IMAGE OPTIMIZING <img  src="http://img.demo.wew.io/http://example.com/image.jpg"/> Simple Usage Advanced Usage <img  src=”http://img.demo.wew.io/vpw_1024/bp_w/pc/w_31/m_48/n_98/http:// example.com/img.png”/> Examples and documentation: https://github.com/whateverweb/Image-Server fredag 20. september 13
70. EXAMPLE <div  data-­‐picture  data-­‐alt="A  beautiful  butterfly">   <div  data-­‐src="http://img.demo.wew.io/px_100/http://exampe.com/image.png"></div>   <div  data-­‐src="http://img.demo.wew.io/px_320/http://exampe.com/image.png"   data-­‐media="(min-­‐width:  320px)"></div>   <div  data-­‐src="http://img.demo.wew.io/px_320/@_2/http://exampe.com/image.png"   data-­‐media="(min-­‐width:  320px)  and  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:  2.0)"></div>   <noscript>          <img  src="http://img.demo.wew.io/px_10/http://exampe.com/image.png">   </noscript> </div> Picturefill: https://github.com/scottjehl/picturefill. Full example: https://github.com/whateverweb/Image-Server/blob/master/examples/picturefill/index.html Using Picturefill fredag 20. september 13
71. CSS OPTIMIZATION Device Capabilities as Media Features Removing overhead and excess styles Examples and documentation: https://github.com/whateverweb/CSS-processor @media  (-­‐wew-­‐pointing-­‐method:  touchscreen){                              a  {     padding:  10px; }             } @media  all  and  (min-­‐width:  1500px){     //removed  for  devices  where  1500px  is  impossible.  e.g.  iPhones                  body{color:  green;}                 } fredag 20. september 13
72. CSS OPTIMIZATION Device Capabilities as Media Features Removing overhead and excess styles Examples and documentation: https://github.com/whateverweb/CSS-processor @media  (-­‐wew-­‐pointing-­‐method:  touchscreen){                              a  {     padding:  10px; }             } @media  all  and  (min-­‐width:  1500px){     //removed  for  devices  where  1500px  is  impossible.  e.g.  iPhones                  body{color:  green;}                 } Server Side rendering fredag 20. september 13
73. EXAMPLE @import  url('http://demo.wew.io/styles/iPadStyles.css')   all  and  (-­‐wew-­‐model-­‐name:  iPad); @import  url(http://demo.wew.io/CSS-­‐processor/examples/inlining/right.css)   all  and  (min-­‐device-­‐width:  480px); fredag 20. september 13
74. EXAMPLE <!doctype  html> <html> <head>    <link  rel="stylesheet"  href="//css.demo.wew.io/http://example.com/style.css”/> </head> <body>  <img  src="http://img.demo.wew.io/http://example.com/image.jpg"/> <script>  var  w=new  wew();  w.getSet("myset",cb); </script> </body> </html> •Markup lives anywhere •CSS and images are proxied, optimized and cached •Device data available client side fredag 20. september 13
75. FTW? Does adaptive design have a positive impact on performance? fredag 20. september 13
76. EFFECT 0 108 215 323 430 Size No WeW With WeW 0 1 000 2 000 3 000 4 000 Time 0 575 1 150 1 725 2 300 Latency 20% less data transfer 50% faster download 73% reduced latency fredag 20. september 13
77. BUT... fredag 20. september 13
78. CAN’T DO MAGIC 0 975 1 950 2 925 3 900 Onload no WeW with WeW Only 4% faster in total Due to lazy loading of assets and repaints etc. fredag 20. september 13
79. CAN’T DO MAGIC 0 975 1 950 2 925 3 900 Onload no WeW with WeW Only 4% faster in total Due to lazy loading of assets and repaints etc. Lazy loading good or bad? Depends... fredag 20. september 13
80. MARSHALLHEADPHONES.COM • Down from 1.6MB to 432KB • Load time down from 6,1s to 1,9s fredag 20. september 13
81. FUN-FACT Loading apple.com consume 1.41% of battery life. http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf 12 - 4% in 8 mins of web surfing fredag 20. september 13
82. FUN-FACT Loading apple.com consume 1.41% of battery life. http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf Not so 12 - 4% in 8 mins of web surfing fredag 20. september 13
83. PERFORMANCE FRONT END STARTS WITH THE BACK END Too much is left to the browser to figure out. fredag 20. september 13
84. SUMMING UP developer server internet telco  network device browser We... ...must do stuff here... ...to relieve... ...and... ...to make life easier for... ...and... fredag 20. september 13
85. THE RULES 1. Make Fewer HTTP Requests 2. Use a Content Delivery Network 3. Add an Expires Header 4. Gzip Components 5. Put Stylesheets at the Top 6. Put Scripts at the Bottom 7. Avoid CSS Expressions 8. Make JavaScript and CSS External 9. Reduce DNS Lookups 10.Minify JavaScript 11.Avoid Redirects 12.Remove Duplicate Scripts 13.Configure ETags 14.Make AJAX Cacheable By Steve Souders: http://stevesouders.com/hpws/rules.php Most of these are implemented server side. fredag 20. september 13
86. THE RULES 1. Make Fewer HTTP Requests 2. Use a Content Delivery Network 3. Add an Expires Header 4. Gzip Components 5. Put Stylesheets at the Top 6. Put Scripts at the Bottom 7. Avoid CSS Expressions 8. Make JavaScript and CSS External 9. Reduce DNS Lookups 10.Minify JavaScript 11.Avoid Redirects 12.Remove Duplicate Scripts 13.Configure ETags 14.Make AJAX Cacheable By Steve Souders: http://stevesouders.com/hpws/rules.php Most of these are implemented server side. fredag 20. september 13
87. POOR IMPLEMENTATION SLOWS RENDERING DOWN, BUT SPEED IS REALLY ABOUT HOW FAST THE USER CAN ACHIEVE HIS GOALS WHAT IS SPEED, ANYWAY? fredag 20. september 13
88. John Arne Sæterås twitter: @jonarnes http://www.slideshare.net/jonarnes/ THANK YOU ? fredag 20. september 13