Successfully reported this slideshow.
Your SlideShare is downloading. ×

Front-End Performance Starts On the Server

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Front-End Performance Starts On the Server

  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 7. juni 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 7. juni 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 7. juni 13
  4. 4. WHY IS MOBILE SLOWER? • Network Latency • Available Bandwidth • The Implementation • Processing Power • Browser • Battery Preserving Strategies fredag 7. juni 13
  5. 5. CURRENT STATE OF THE WEB AND MOBILE fredag 7. juni 13
  6. 6. 1.4 MB 4%9% 7% 3% 16% 61% Images Scripts CSS Flash Other HTML in 92 requests on average http://httparchive.org/ fredag 7. juni 13
  7. 7. 1.4 MB in 92 requests on average • Avg. speed: 2Mbps (cisco) • 1 Mbps = 0.12 MB/s • 1.4 / 0.24 = 6s 6Seconds 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 7. juni 13
  8. 8. 1.4 MB in 92 requests on average •100-200 ms pr roundtrip •Depends....(DNS, pipelining, concurrentTCP connections etc.) 9,1Seconds latency in total Hold that thought... more on this now. fredag 7. juni 13
  9. 9. MOBILE NETWORKS ARE FREAKING MAGIC! don’t get me started on handovers! fredag 7. juni 13
  10. 10. 2.1 s to connect. Latency, anything from 100 - >500ms fredag 7. juni 13
  11. 11. 2.40 s, html page loaded TCP stuff fredag 7. juni 13
  12. 12. 3-60 seconds.... Infographic: http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=YmB5ErqPR7b Now download assets fredag 7. juni 13
  13. 13. SERVE A PAGE TO A MOBILE DEVICE IN LESS THAN 1 SECOND? A great overview by Ilyva Gricorik: bit.ly/mobile-barrier fredag 7. juni 13
  14. 14. 1.4 MB in 92 requests on average •Wake up radio (one time) •TCP and DNS (one time) •92 round trips (6 req pr conn.) •Downloading 1.4 mb over 2Mbps 10,1Seconds total + rendering time in the browser + server response time Disclaimer: lots of assumptions in this calculation! fredag 7. juni 13
  15. 15. GOOGLE: 10.2 S. http://analytics.blogspot.nl/2012/04/global-site-speed-overview-how-fast-are.html fredag 7. juni 13
  16. 16. Load time: 9.7 s Size: 1.6 MB Load time: 9.1 s Size: 1.2 MB fredag 7. juni 13
  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 fredag 7. juni 13
  18. 18. WHY USERS CARE? http://mobiforge.com/designing/blog/performance-money-part-1-end-users-wallet = EuropeanVodafone account roaming in US fredag 7. juni 13
  19. 19. HOW DO WE APPROACH THIS? fredag 7. juni 13
  20. 20. ENTER RESPONSIVE WEB DESIGN Yay! fredag 7. juni 13
  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 fredag 7. juni 13
  22. 22. RWD IS A TECHNIQUE Nothing wrong with the technique! It is brilliant! The famous Iceberg: @brad_frost fredag 7. juni 13
  23. 23. RWD != MOBILE OPTIMIZED but an important step in the right direction fredag 7. juni 13
  24. 24. Load time: 3.81s Size: 135.20 kb Load time: 2.36 s Size: 36.59 kb More on how the built the new BBC News site: http://slidesha.re/14IYNOO fredag 7. juni 13
  25. 25. http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html fredag 7. juni 13
  26. 26. PRIMARY ISSUES • Over downloading • Unused assets • Large images • Stuff... • Network issues • High Latency • Bandwidth • Flaky connection fredag 7. juni 13
  27. 27. MORE ISSUES ...but that’s another story http://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/ fredag 7. juni 13
  28. 28. PARET0 PRINCIPLE Responsive Design is 20% of the work, and might get you 80% of the way the “80/20 rule” fredag 7. juni 13
  29. 29. THE LAST 20% will improve performance by 80% fredag 7. juni 13
  30. 30. When all you have is a hammer, every problem looks like a nail fredag 7. juni 13
  31. 31. HOW CAN WE FIX THIS? Adaptive Design fredag 7. juni 13
  32. 32. THE VALUE CHAIN Adaptive Responsive developer server internet telco  network device browser fredag 7. juni 13
  33. 33. RANT There is a web server.A very capable one, too. Use it! fredag 7. juni 13
  34. 34. SERVER? How to make the server side available to front end devs fredag 7. juni 13
  35. 35. fredag 7. juni 13
  36. 36. http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/ fredag 7. juni 13
  37. 37. RESS REsponsive design with Server Side components fredag 7. juni 13
  38. 38. A BALANCING ACT no right answer fredag 7. juni 13
  39. 39. PURPOSE OF RESS • Reduce need for client side processing • Eliminate “over downloading” fredag 7. juni 13
  40. 40. INGREDIENTS OF RESS Hello, I know exactly how to make you shine! Information about the requesting device Request/Response fredag 7. juni 13
  41. 41. 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 7. juni 13
  42. 42. 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 7. juni 13
  43. 43. 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 7. juni 13
  44. 44. 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 7. juni 13
  45. 45. 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 7. juni 13
  46. 46. EXAMPLE if  ($supports_h264) echo  ‘<video  .../>’; else echo  ‘<a  href=”...”>Download</a>’; fredag 7. juni 13
  47. 47. OUR APPROACH fredag 7. juni 13
  48. 48. 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 7. juni 13
  49. 49. 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 7. juni 13
  50. 50. 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 7. juni 13
  51. 51. 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 7. juni 13
  52. 52. 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 7. juni 13
  53. 53. 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 7. juni 13
  54. 54. 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 7. juni 13
  55. 55. 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 clientside fredag 7. juni 13
  56. 56. FTW? Does adaptive design have a positive impact on performance? fredag 7. juni 13
  57. 57. 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 7. juni 13
  58. 58. BUT... fredag 7. juni 13
  59. 59. 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 7. juni 13
  60. 60. FUN-FACT Loading apple.com consume 1.41% of battery life. http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf Not so fredag 7. juni 13
  61. 61. PERFORMANCE FRONT END STARTS WITH THE BACK END Too much is left to the browser to figure out. fredag 7. juni 13
  62. 62. 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 fredag 7. juni 13
  63. 63. BASICALLY SAYS • Make as few HTTP requests as possible • Reduce the size of what is downloaded • Make page rendering fast fredag 7. juni 13
  64. 64. MORE TIPS • Don’t wake the radio • Inline more that feels natural • Use the server! What about “eternal scrolling” Inline “structural” CSS and jsDon’t let the browser decide everything fredag 7. juni 13
  65. 65. POOR IMPLEMENTATION SLOWS RENDERING DOWN, POOR INFORMATION SLOWS PEOPLE DOWN WHAT IS SPEED, ANYWAY? fredag 7. juni 13
  66. 66. John Arne Sæterås twitter: @jonarnes http://www.slideshare.net/jonarnes/ THANK YOU ? fredag 7. juni 13

×