Your SlideShare is downloading. ×
Makingweb: Great front end performance starts on the server.
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Makingweb: Great front end performance starts on the server.

344
views

Published on

How mobile connectivity is different, issues reviled and how the server can help fix them.

How mobile connectivity is different, issues reviled and how the server can help fix them.

Published in: Technology, Business

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
344
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. YEP, WEB ON MOBILE IS SLOW August 18, 2010 John Arne Sæterås Twitter: @jonarnes Head of innovation at Mobiletech http://www.slideshare.net/jonarnes/ torsdag 24. oktober 13
  • 2. THESE TWO GUYS... ....are really impatient torsdag 24. oktober 13
  • 3. SLOW IS NOT COOL ...even less cool on mobile 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 torsdag 24. oktober 13
  • 4. THE VALUE CHAIN developer server internet telco  network device Doesn’t really make things more difficult, but reveal a few issues torsdag 24. oktober 13 browser
  • 5. WHY IS MOBILE SLOWER? • Processing Power • Browser • Battery Preserving Strategies • Network Latency • Available Bandwidth • The Implementation torsdag 24. oktober 13
  • 6. CURRENT STATE OF THE WEB AND MOBILE torsdag 24. oktober 13
  • 7. 1.6 MB in 94 requests on average 9%4% 6% 3% 17% 63% Images CSS Other Scripts Flash HTML http://httparchive.org/ torsdag 24. oktober 13
  • 8. ASIDE... • In 2030 • Average 320MB web site is • Average (mobile) bandwidth is 93Mbps http://mpulp.mobi/2013/06/page-weight-and-mobile-bandwidth-in-year-2030/ torsdag 24. oktober 13
  • 9. 1.6 MB in 94 requests on average 6,7 Ho ld mo that re o t n t houg his ht. lat .. er. Seconds download time • Avg. speed: 2Mbps (cisco) • 1 Mbps = 0.12 MB/s • 1.6 / 0.24 = 6,7s http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html torsdag 24. oktober 13
  • 10. 1.6 MB in 94 requests on average 9,4 Ho ld mo that re o t n t houg ht. his no .. w. torsdag 24. oktober 13 Seconds latency in total • 100-200 ms pr roundtrip • Depends....(DNS, pipelining, concurrent TCP connections etc.)
  • 11. MOBILE NETWORKS ARE FREAKING MAGIC! a quick look on how they work torsdag 24. oktober 13
  • 12. Tower signaling. User opens app. .01 s. 2.1 s. Only needed when device is idle torsdag 24. oktober 13 App is “on line” Device promoted to full power state. Process takes about 2 seconds Wakes the radio. Device sends a request to the cell tower to use the network App does a DNS lookup. Roundtrip is 100-200 ms. 2.2 s.
  • 13. Browser rendering Fetches linked resources. More DNS lookups (one for each unique domain) and TCP connections. TCP connection HTML document returned 2.4 s. 2.4 s, the HTML page is downloaded Page displayed Puh... 3-60 s. 2.6 s. Latency, anything from 100 - >500ms http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=YmB5ErqPR7b torsdag 24. oktober 13
  • 14. 1.6 MB in 94 requests on average 10,6 Seconds total + rendering time in the browser + server response time • Wake up radio (one time) • TCP and DNS (one time) • 94 round trips (6 req pr conn.) • Downloading 1.6 mb over 2Mbps Disclaimer: lots of assumptions in this calculation! torsdag 24. oktober 13
  • 15. GOOGLE: 10.2 S. http://analytics.blogspot.nl/2012/04/global-site-speed-overview-how-fast-are.html torsdag 24. oktober 13
  • 16. MAKINGWEB.NO • Load •1 MB • 58 torsdag 24. oktober 13 event fired: 12,77 s. requests
  • 17. SERVE A PAGE TO A MOBILE DEVICE IN LESS THAN 1 SECOND? A great overview by Ilya Grigorik bit.ly/mobile-barrier torsdag 24. oktober 13
  • 18. WHO CARES? Telco Network 53,53 % The users care! Other 46,47 % How users connect. Page views per connection type. (Scandinavian Countries). Source: Mobiletech torsdag 24. oktober 13
  • 19. WHY USERS CARE? ➜ European Vodafone account roaming in US http://mobiforge.com/designing/blog/performance-money-part-1-end-users-wallet torsdag 24. oktober 13
  • 20. SO, WHAT IS OUR CURRENT APPROACH TO THIS? torsdag 24. oktober 13
  • 21. ENTER RESPONSIVE WEB DESIGN Yay! torsdag 24. oktober 13
  • 22. Same size 72% RESPONSIVE WEB DESIGN Doh... Als oa bou nu t th HT mb e sa er o TP me f req ues ts Much smaller Smaller 6% 22% http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/ torsdag 24. oktober 13
  • 23. RWD IS A TECHNIQUE Nothing wrong with the technique! It is brilliant! The famous Iceberg: @brad_frost torsdag 24. oktober 13
  • 24. RWD != MOBILE FRIENDLY but an important step in the right direction torsdag 24. oktober 13
  • 25. Load time: 2.36 s * Size: 36.59 kb Load time: 9.07s * Size: 288.14 kb *) Load event fired. - More on how the built the new BBC News site: http://slidesha.re/14IYNOO torsdag 24. oktober 13
  • 26. http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html torsdag 24. oktober 13
  • 27. PRIMARY ISSUES • Over downloading • Unused • Large • Stuff... torsdag 24. oktober 13 assets images • Network • High issues Latency • Bandwidth • Flaky connection
  • 28. the “80 /20 rul e PARET0 PRINCIPLE torsdag 24. oktober 13 ” Responsive Design is 20% of the work, and might get you 80% of the way
  • 29. Ou r ex 80 %o amp l ff 10, e: Sh loa 6 a dt im s. g ving e of ive 2,1 s a s THE LAST 20% will improve performance by 80% torsdag 24. oktober 13
  • 30. SOMETIMES IT MAKES SENSE TO MULTI-SERVE ...or at leas t do layout adjustmen ts to compo nents torsdag 24. oktober 13
  • 31. RW D When all you have is a hammer, every problem looks like a nail dev ice torsdag 24. oktober 13 or b row ser
  • 32. HOW CAN WE FIX THIS? What can we do to help front end developers make use of server side stuff? torsdag 24. oktober 13
  • 33. THE VALUE CHAIN developer Adaptive torsdag 24. oktober 13 server internet telco  network device browser Responsive
  • 34. RANT There is a web server. A very capable one, too. Use it! torsdag 24. oktober 13
  • 35. SERVER? How to make the server side available to front end devs torsdag 24. oktober 13
  • 36. torsdag 24. oktober 13
  • 37. http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/ torsdag 24. oktober 13
  • 38. RESS REsponsive design with Server Side components torsdag 24. oktober 13
  • 39. A BALANCING ACT no right answer torsdag 24. oktober 13
  • 40. PURPOSE OF RESS • Reduce need for client side processing • Eliminate “over • Let downloading” the server do the work instead of the browser torsdag 24. oktober 13
  • 41. RESS IN A NUT SHELL • RWD • The provide a sensible default or fallback server does the optimization t size e ce ass rkup Redu e ma v electi rving S Ad se tworks e cial n y So inif M zip e Cach etc. torsdag 24. oktober 13
  • 42. INGREDIENTS OF RESS Hello, I know exactly how to make you shine! Request/Response Information about the requesting device, network, etc. torsdag 24. oktober 13
  • 43. No, this is NOT what I mean... torsdag 24. oktober 13
  • 44. 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/ torsdag 24. oktober 13
  • 45. THERE IS A DIFFERENCE Feature Detection var  appCache=  function()  {    return  !!window.applicationCache; }; User-Agent sniffing var  isiPhone  =  /iPhone/i.test(navigator.userAgent); 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. torsdag 24. oktober 13
  • 46. 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:// m obile.n ytimes .com http://mpulp.mobi/2013/05/user-agent-sniffing-on-the-new-nyt-mobile-site/ torsdag 24. oktober 13
  • 47. 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 torsdag 24. oktober 13 n tio rip esc ory e D sit c evi epo D R
  • 48. 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/ torsdag 24. oktober 13
  • 49. EXAMPLE if  ($supports_h264) echo  ‘<video  .../>’; else echo  ‘<a  href=”...”>Download</a>’; torsdag 24. oktober 13
  • 50. WHAT WE ENDED UP WITH torsdag 24. oktober 13
  • 51. 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 torsdag 24. oktober 13
  • 52. 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(); torsdag 24. oktober 13
  • 53. 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; } torsdag 24. oktober 13
  • 54. IMAGE OPTIMIZING Simple Usage <img  src="http://img.demo.wew.io/http://example.com/image.jpg"/> 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 torsdag 24. oktober 13
  • 55. EXAMPLE Using Picturefill <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 torsdag 24. oktober 13
  • 56. CSS OPTIMIZATION Device Capabilities as Media Features S ver er ide S nd re g rin e @media  (-­‐wew-­‐pointing-­‐method:  touchscreen){                a  {     padding:  10px; }             } Removing overhead and excess styles @media  all  and  (min-­‐width:  1500px){     //removed  for  devices  where  1500px  is  impossible.  e.g.  iPhones                  body{color:  green;}                 } Examples and documentation: https://github.com/whateverweb/CSS-processor torsdag 24. oktober 13
  • 57. 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); torsdag 24. oktober 13
  • 58. 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> torsdag 24. oktober 13 • Markup lives anywhere • CSS and images are proxied, optimized and cached • Device data available client side
  • 59. FTW? Does adaptive design have a positive impact on performance? torsdag 24. oktober 13
  • 60. EFFECT No WeW 430 323 215 108 0 4 000 3 000 2 000 1 000 0 Size 20% less data transfer torsdag 24. oktober 13 With WeW 2 300 1 725 1 150 575 0 Time 50% faster download Latency 73% reduced latency
  • 61. BUT... torsdag 24. oktober 13
  • 62. CAN’T DO MAGIC no WeW with WeW 3 900 Due to lazy loading of assets and repaints etc. 2 925 1 950 975 La zy or b loa ad din ?D gg epe nd ood s... torsdag 24. oktober 13 0 Onload Only 4% faster in total
  • 63. MARSHALLHEADPHONES.COM • Down • Load from 1.6MB to 432KB time down from 6,1s to 1,9s torsdag 24. oktober 13
  • 64. No ts o FUN-FACT Loading apple.com consume 1.41% of battery life. 12 - 4% in 8 mins of web surfing http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf torsdag 24. oktober 13
  • 65. PERFORMANCE FRONT END STARTS WITH THE BACK END Too much is left to the browser to figure out. torsdag 24. oktober 13
  • 66. SUMMING UP We... developer torsdag 24. oktober 13 ...must do stuff here... server ...to relieve... internet ...and... telco  network ...to make life easier for... device ...and... browser
  • 67. 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 torsdag 24. oktober 13 Most of these are implemented server side.
  • 68. WHAT IS SPEED, ANYWAY? POOR IMPLEMENTATION SLOWS RENDERING DOWN, BUT SPEED IS REALLY ABOUT HOW FAST THE USER CAN ACHIEVE HIS GOALS torsdag 24. oktober 13
  • 69. THANK YOU ? John Arne Sæterås twitter: @jonarnes http://www.slideshare.net/jonarnes/ torsdag 24. oktober 13