Mobile is slow - Over the Air 2013

1,168 views

Published on

Give Responsive Design a Mobile Performance Boost talk from Over the Air conference 2013

Published in: Technology, Business

Mobile is slow - Over the Air 2013

  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
  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
  3. 3. THE VALUE CHAIN developer server internet telco  network device Doesn’t really make things more difficult, but reveal a few issues browser
  4. 4. WHY IS MOBILE SLOWER? • Network Latency • Available Bandwidth • The Implementation • Processing Power • Browser • Battery Preserving Strategies
  5. 5. CURRENT STATE OF THE WEB AND MOBILE
  6. 6. 1.6 MB 4%9% 6% 3% 17% 63% Images Scripts CSS Flash Other HTML in 94 requests on average http://httparchive.org/
  7. 7. 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/
  8. 8. 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
  9. 9. 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.
  10. 10. MOBILE NETWORKS ARE FREAKING MAGIC! a quick look on how they work
  11. 11. 2.1 s to connect. Latency, anything from 100 - >500ms
  12. 12. 2.40 s, html page loaded TCP stuff
  13. 13. 3-60 seconds.... Infographic: http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=YmB5ErqPR7b Now download assets
  14. 14. 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!
  15. 15. GOOGLE: 10.2 S. http://analytics.blogspot.nl/2012/04/global-site-speed-overview-how-fast-are.html
  16. 16. SERVE A PAGE TO A MOBILE DEVICE IN LESS THAN 1 SECOND? A great overview by Ilya Grigorik bit.ly/mobile-barrier
  17. 17. WHO CARES? The users care! Telco Network 53,53 % Other 46,47 % How users connect. Page views per connection type. (Scandinavian Countries). Source: Mobiletech
  18. 18. WHY USERS CARE? http://mobiforge.com/designing/blog/performance-money-part-1-end-users-wallet ➜EuropeanVodafone account roaming in US
  19. 19. SO, WHAT IS OUR CURRENT APPROACH TO THIS?
  20. 20. ENTER RESPONSIVE WEB DESIGN Yay!
  21. 21. 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
  22. 22. RWD IS A TECHNIQUE Nothing wrong with the technique! It is brilliant! The famous Iceberg: @brad_frost
  23. 23. RWD != MOBILE FRIENDLY but an important step in the right direction
  24. 24. 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
  25. 25. http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html
  26. 26. PRIMARY ISSUES • Over downloading • Unused assets • Large images • Stuff... • Network issues • High Latency • Bandwidth • Flaky connection
  27. 27. PARET0 PRINCIPLE Responsive Design is 20% of the work, and might get you 80% of the way the “80/20 rule”
  28. 28. THE LAST 20% will improve performance by 80% Our example: Shaving 80%off 10,6 s. gives a load time of 2,1s
  29. 29. SOMETIMES IT MAKES SENSE TO MULTISERVE
  30. 30. When all you have is a hammer, every problem looks like a nail RWD device or browser
  31. 31. HOW CAN WE FIX THIS? Adaptive Design
  32. 32. THE VALUE CHAIN Adaptive Responsive developer server internet telco  network device browser
  33. 33. RANT There is a web server.A very capable one, too. Use it!
  34. 34. SERVER? How to make the server side available to front end devs
  35. 35. http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/
  36. 36. RESS REsponsive design with Server Side components
  37. 37. A BALANCING ACT no right answer
  38. 38. PURPOSE OF RESS • Reduce need for client side processing • Eliminate “over downloading” • Let the server do the work instead of the browser
  39. 39. INGREDIENTS OF RESS Hello, I know exactly how to make you shine! Information about the requesting device, network, etc. Request/Response
  40. 40. 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/
  41. 41. 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.
  42. 42. NYTIMES 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
  43. 43. FEATURES OF A DDR • Nice place to store custom stuff • “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
  44. 44. 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/
  45. 45. EXAMPLE if  ($supports_h264) echo  ‘<video  .../>’; else echo  ‘<a  href=”...”>Download</a>’;
  46. 46. OUR APPROACH
  47. 47. 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
  48. 48. 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();
  49. 49. 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; }
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. 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);
  54. 54. 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
  55. 55. FTW? Does adaptive design have a positive impact on performance?
  56. 56. 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
  57. 57. BUT...
  58. 58. 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...
  59. 59. MARSHALLHEADPHONES.COM • Down from 1.6MB to 432KB • Load time down from 6,1s to 1,9s
  60. 60. 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
  61. 61. PERFORMANCE FRONT END STARTS WITH THE BACK END Too much is left to the browser to figure out.
  62. 62. SUMMING UP developer server internet telco  network device browser We... ...must do stuff here... ...to relieve... ...and... ...to make life easier for... ...and...
  63. 63. 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.
  64. 64. POOR IMPLEMENTATION SLOWS RENDERING DOWN, BUT SPEED IS REALLY ABOUT HOW FASTTHE USER CAN ACHIEVE HIS GOALS WHAT IS SPEED, ANYWAY?
  65. 65. John Arne Sæterås twitter: @jonarnes http://www.slideshare.net/jonarnes/ THANK YOU ?

×