Front-End Performance Starts On the Server

998 views

Published on

How the server can help Responsive Web Design to perform better.

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
998
On SlideShare
0
From Embeds
0
Number of Embeds
94
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Front-End Performance Starts On the Server

  1. 1. John Arne SæteråsTwitter: @jonarnesHead of innovation at Mobiletechhttp://www.slideshare.net/jonarnes/August 18, 2010YEP, WEB ON MOBILE IS SLOWfredag 7. juni 13
  2. 2. 100 ms faster:1% increased revenue1 sec delay:2.8% drop in revenuehttp://www.slideshare.net/stubbornella/designing-fast-websites-presentationhttp://slideshare.net/markstanton/speed-mattersSLOW IS NOT COOL...even less cool on mobilefredag 7. juni 13
  3. 3. THE VALUE CHAINdeveloper server internet telco  network deviceDoesn’t really make things moredifficult, but reveal a few issuesbrowserfredag 7. juni 13
  4. 4. WHY IS MOBILE SLOWER?• Network Latency• Available Bandwidth• The Implementation• Processing Power• Browser• Battery Preserving Strategiesfredag 7. juni 13
  5. 5. CURRENT STATEOF THE WEBAND MOBILEfredag 7. juni 13
  6. 6. 1.4 MB4%9%7%3%16% 61%Images ScriptsCSS FlashOther HTMLin 92 requests on averagehttp://httparchive.org/fredag 7. juni 13
  7. 7. 1.4 MBin 92 requests on average• Avg. speed: 2Mbps (cisco)• 1 Mbps = 0.12 MB/s• 1.4 / 0.24 = 6s6SecondsdownloadtimeHold that thought...more on this later.http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.htmlfredag 7. juni 13
  8. 8. 1.4 MBin 92 requests on average•100-200 ms pr roundtrip•Depends....(DNS, pipelining,concurrentTCP connectionsetc.)9,1Secondslatency intotalHold that thought...more on this now.fredag 7. juni 13
  9. 9. MOBILENETWORKS AREFREAKINGMAGIC!don’t get me started onhandovers!fredag 7. juni 13
  10. 10. 2.1 s to connect.Latency, anything from100 - >500msfredag 7. juni 13
  11. 11. 2.40 s, html page loadedTCP stufffredag 7. juni 13
  12. 12. 3-60 seconds....Infographic: http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=YmB5ErqPR7bNow download assetsfredag 7. juni 13
  13. 13. SERVE A PAGE TO AMOBILE DEVICE INLESS THAN 1 SECOND?A great overview by Ilyva Gricorik:bit.ly/mobile-barrierfredag 7. juni 13
  14. 14. 1.4 MBin 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 2Mbps10,1Secondstotal+ rendering time in the browser+ server response timeDisclaimer: 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.htmlfredag 7. juni 13
  16. 16. Load time: 9.7 sSize: 1.6 MBLoad time: 9.1 sSize: 1.2 MBfredag 7. juni 13
  17. 17. WHO CARES?The users care!Telco Network53,53 %Other46,47 %How users connect. Page views perconnection type. (Scandinavian Countries).Source: Mobiletechfredag 7. juni 13
  18. 18. WHY USERS CARE?http://mobiforge.com/designing/blog/performance-money-part-1-end-users-wallet= EuropeanVodafoneaccount roaming in USfredag 7. juni 13
  19. 19. HOW DO WE APPROACH THIS?fredag 7. juni 13
  20. 20. ENTERRESPONSIVEWEB DESIGNYay!fredag 7. juni 13
  21. 21. RESPONSIVEWEB DESIGNDoh...Much smaller6%Same size72%Smaller22%http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/Also about the samenumber ofHTTP requestsfredag 7. juni 13
  22. 22. RWD IS A TECHNIQUENothing wrong with the technique! It is brilliant!The famous Iceberg: @brad_frostfredag 7. juni 13
  23. 23. RWD != MOBILE OPTIMIZEDbut an important step in the right directionfredag 7. juni 13
  24. 24. Load time: 3.81sSize: 135.20 kbLoad time: 2.36 sSize: 36.59 kbMore on how the built the new BBC News site: http://slidesha.re/14IYNOOfredag 7. juni 13
  25. 25. http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.htmlfredag 7. juni 13
  26. 26. PRIMARY ISSUES• Over downloading• Unused assets• Large images• Stuff...• Network issues• High Latency• Bandwidth• Flaky connectionfredag 7. juni 13
  27. 27. MORE ISSUES...but that’s another storyhttp://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/fredag 7. juni 13
  28. 28. PARET0PRINCIPLEResponsive Design is20% of the work,and might get you80% of the waythe “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 nailfredag 7. juni 13
  31. 31. HOW CAN WEFIX THIS?Adaptive Designfredag 7. juni 13
  32. 32. THE VALUE CHAINAdaptive Responsivedeveloper server internet telco  network device browserfredag 7. juni 13
  33. 33. RANTThere is a web server.A very capable one, too.Use it!fredag 7. juni 13
  34. 34. SERVER?How to make the server sideavailable to front end devsfredag 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. RESSREsponsive design with ServerSide componentsfredag 7. juni 13
  38. 38. A BALANCING ACTno right answerfredag 7. juni 13
  39. 39. PURPOSE OF RESS• Reduce need for client sideprocessing• Eliminate “over downloading”fredag 7. juni 13
  40. 40. INGREDIENTS OF RESSHello, I know exactly how tomake you shine!Information about therequesting deviceRequest/Responsefredag 7. juni 13
  41. 41. NOT A CRIME!82% of top 100 Alexa sitesuse Device DetectionIn the case ofMashable, we alsodetect the type ofdevice and changethe site’s behavioraccordingly.“”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 DIFFERENCEUser-Agent sniffingvar  isiPhone  =  /iPhone/i.test(navigator.userAgent);Feature Detectionvar  appCache=  function()  {    return  !!window.applicationCache;};Device DetectionGET  http://ddr.demo.wew.io/c/dual_orientationUsing the User-Agent as a key to look up in a data base.fredag 7. juni 13
  43. 43. NYT HORRORvar 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.comfredag 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 clientDevice DescriptionRepositoryfredag 7. juni 13
  45. 45. EXAMPLEif  ($type_of_device  ==  ”smartTV”)include(TVnav.php);elseinclude(nav.php);http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/fredag 7. juni 13
  46. 46. EXAMPLEif  ($supports_h264)echo  ‘<video  .../>’;elseecho  ‘<a  href=”...”>Download</a>’;fredag 7. juni 13
  47. 47. OUR APPROACHfredag 7. juni 13
  48. 48. DEVICE DETECTIONSingle CapabilityRequestGET  http://ddr.demo.wew.io/c/model_nameResponse{"model_name":"iPhone"}    Capability SetsRequestGET  http://ddr.demo.wew.io/cset/mySetResponse{"capa1":"first  capa  value","capa2":"second  capa  value"  ...}Examples and documentation: https://github.com/whateverweb/device-detectionfredag 7. juni 13
  49. 49. EXAMPLEvar  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. EXAMPLEpublic  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 UsageAdvanced 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-Serverfredag 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.htmlUsing Picturefillfredag 7. juni 13
  53. 53. CSS OPTIMIZATIONDevice Capabilities as Media FeaturesRemoving overhead and excess stylesExamples 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 renderingfredag 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 clientsidefredag 7. juni 13
  56. 56. FTW?Does adaptive design have apositive impact on performance?fredag 7. juni 13
  57. 57. EFFECT0108215323430SizeNo WeW With WeW01 0002 0003 0004 000Time05751 1501 7252 300Latency20% less datatransfer50% fasterdownload73% reducedlatencyfredag 7. juni 13
  58. 58. BUT...fredag 7. juni 13
  59. 59. CAN’T DO MAGIC09751 9502 9253 900Onloadno WeW with WeWOnly 4% faster in totalDue tolazy loading of assetsand repaints etc.Lazy loading goodor bad? Depends...fredag 7. juni 13
  60. 60. FUN-FACTLoading apple.com consume1.41% of battery life.http://www2012.wwwconference.org/proceedings/proceedings/p41.pdfNot sofredag 7. juni 13
  61. 61. PERFORMANCE FRONT ENDSTARTS WITH THE BACK ENDToo much is left to the browser to figure out.fredag 7. juni 13
  62. 62. THE RULES1. Make Fewer HTTP Requests2. Use a Content Delivery Network3. Add an Expires Header4. Gzip Components5. Put Stylesheets at theTop6. Put Scripts at the Bottom7. Avoid CSS Expressions8. Make JavaScript and CSS External9. Reduce DNS Lookups10.Minify JavaScript11.Avoid Redirects12.Remove Duplicate Scripts13.Configure ETags14.Make AJAX CacheableBy Steve Souders: http://stevesouders.com/hpws/rules.phpfredag 7. juni 13
  63. 63. BASICALLY SAYS• Make as few HTTP requests as possible• Reduce the size of what is downloaded• Make page rendering fastfredag 7. juni 13
  64. 64. MORE TIPS• Don’t wake the radio• Inline more that feels natural• Use the server!What about “eternalscrolling”Inline “structural”CSS and jsDon’t let the browserdecide everythingfredag 7. juni 13
  65. 65. POOR IMPLEMENTATION SLOWSRENDERING DOWN,POOR INFORMATION SLOWSPEOPLE DOWNWHAT IS SPEED, ANYWAY?fredag 7. juni 13
  66. 66. John Arne Sæteråstwitter: @jonarneshttp://www.slideshare.net/jonarnes/THANK YOU?fredag 7. juni 13

×