Give Responsive Design a Mobile Performance Boost

454 views

Published on

Jon Arne Sæterås at ModUX 2013
http://moduxcon.com

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
454
On SlideShare
0
From Embeds
0
Number of Embeds
49
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Give Responsive Design a Mobile Performance Boost

  1. 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. 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. 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. 4. WHY IS MOBILE SLOWER? fredag 20. september 13
  5. 5. WHY IS MOBILE SLOWER? • Processing Power • Browser • Battery Preserving Strategies fredag 20. september 13
  6. 6. WHY IS MOBILE SLOWER? • Network Latency • Available Bandwidth • Processing Power • Browser • Battery Preserving Strategies fredag 20. september 13
  7. 7. WHY IS MOBILE SLOWER? • Network Latency • Available Bandwidth • The Implementation • Processing Power • Browser • Battery Preserving Strategies fredag 20. september 13
  8. 8. CURRENT STATE OF THE WEB AND MOBILE fredag 20. september 13
  9. 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. 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. 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. 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. 13. 1.6 MB in 94 requests on average •100-200 ms pr roundtrip •Depends....(DNS, pipelining, concurrentTCP connections etc.) 9,4Seconds latency in total fredag 20. september 13
  14. 14. 1.6 MB in 94 requests on average •100-200 ms pr roundtrip •Depends....(DNS, pipelining, concurrentTCP connections etc.) 9,4Seconds latency in total Hold that thought... more on this now. fredag 20. september 13
  15. 15. MOBILE NETWORKS ARE FREAKING MAGIC! a quick look on how they work fredag 20. september 13
  16. 16. 2.1 s to connect. Latency, anything from 100 - >500ms fredag 20. september 13
  17. 17. 2.40 s, html page loaded TCP stuff fredag 20. september 13
  18. 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. 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. 20. GOOGLE: 10.2 S. http://analytics.blogspot.nl/2012/04/global-site-speed-overview-how-fast-are.html fredag 20. september 13
  21. 21. Load time: 7.3 s Size: 7.3 MB Load time: 7.7 s Size: 7.2 MB fredag 20. september 13
  22. 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. 23. WHO CARES? The users care! fredag 20. september 13
  24. 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. 25. WHY USERS CARE? http://mobiforge.com/designing/blog/performance-money-part-1-end-users-wallet = EuropeanVodafone account roaming in US fredag 20. september 13
  26. 26. SO, WHAT IS OUR CURRENT APPROACH TO THIS? fredag 20. september 13
  27. 27. ENTER RESPONSIVE WEB DESIGN Yay! fredag 20. september 13
  28. 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. 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. 30. RWD IS A TECHNIQUE Nothing wrong with the technique! It is brilliant! The famous Iceberg: @brad_frost fredag 20. september 13
  31. 31. RWD IS A TECHNIQUE Nothing wrong with the technique! It is brilliant! The famous Iceberg: @brad_frost fredag 20. september 13
  32. 32. RWD != MOBILE FRIENDLY but an important step in the right direction fredag 20. september 13
  33. 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. 34. http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html fredag 20. september 13
  35. 35. http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html fredag 20. september 13
  36. 36. PRIMARY ISSUES • Over downloading • Unused assets • Large images • Stuff... • Network issues • High Latency • Bandwidth • Flaky connection fredag 20. september 13
  37. 37. PARET0 PRINCIPLE Responsive Design is 20% of the work, and might get you 80% of the way fredag 20. september 13
  38. 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. 39. THE LAST 20% will improve performance by 80% fredag 20. september 13
  40. 40. THE LAST 20% will improve performance by 80% fredag 20. september 13
  41. 41. SOMETIMES IT MAKES SENSE TO MULTISERVE fredag 20. september 13
  42. 42. When all you have is a hammer, every problem looks like a nail fredag 20. september 13
  43. 43. When all you have is a hammer, every problem looks like a nail RWD device or browser fredag 20. september 13
  44. 44. HOW CAN WE FIX THIS? fredag 20. september 13
  45. 45. HOW CAN WE FIX THIS? Adaptive Design fredag 20. september 13
  46. 46. THE VALUE CHAIN Adaptive Responsive developer server internet telco  network device browser fredag 20. september 13
  47. 47. RANT There is a web server.A very capable one, too. Use it! fredag 20. september 13
  48. 48. SERVER? How to make the server side available to front end devs fredag 20. september 13
  49. 49. fredag 20. september 13
  50. 50. http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/ fredag 20. september 13
  51. 51. RESS REsponsive design with Server Side components fredag 20. september 13
  52. 52. A BALANCING ACT no right answer fredag 20. september 13
  53. 53. PURPOSE OF RESS • Reduce need for client side processing • Eliminate “over downloading” fredag 20. september 13
  54. 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. 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. 56. THERE IS A DIFFERENCE fredag 20. september 13
  57. 57. THERE IS A DIFFERENCE Feature Detection var  appCache=  function()  {    return  !!window.applicationCache; }; fredag 20. september 13
  58. 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. 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. 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. 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. 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. 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. 64. EXAMPLE if  ($supports_h264) echo  ‘<video  .../>’; else echo  ‘<a  href=”...”>Download</a>’; fredag 20. september 13
  65. 65. OUR APPROACH fredag 20. september 13
  66. 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. 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. 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. 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. 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. 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. 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. 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. 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. 75. FTW? Does adaptive design have a positive impact on performance? fredag 20. september 13
  76. 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. 77. BUT... fredag 20. september 13
  78. 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. 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. 80. MARSHALLHEADPHONES.COM • Down from 1.6MB to 432KB • Load time down from 6,1s to 1,9s fredag 20. september 13
  81. 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. 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. 83. PERFORMANCE FRONT END STARTS WITH THE BACK END Too much is left to the browser to figure out. fredag 20. september 13
  84. 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. 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 theTop 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. 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 theTop 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. 87. POOR IMPLEMENTATION SLOWS RENDERING DOWN, BUT SPEED IS REALLY ABOUT HOW FASTTHE USER CAN ACHIEVE HIS GOALS WHAT IS SPEED, ANYWAY? fredag 20. september 13
  88. 88. John Arne Sæterås twitter: @jonarnes http://www.slideshare.net/jonarnes/ THANK YOU ? fredag 20. september 13

×