Your SlideShare is downloading. ×
0
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
Front-End Performance Starts On the Server
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

Front-End Performance Starts On the Server

589

Published on

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

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
589
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
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. 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. 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. THE VALUE CHAINdeveloper server internet telco  network deviceDoesn’t really make things moredifficult, but reveal a few issuesbrowserfredag 7. juni 13
  • 4. WHY IS MOBILE SLOWER?• Network Latency• Available Bandwidth• The Implementation• Processing Power• Browser• Battery Preserving Strategiesfredag 7. juni 13
  • 5. CURRENT STATEOF THE WEBAND MOBILEfredag 7. juni 13
  • 6. 1.4 MB4%9%7%3%16% 61%Images ScriptsCSS FlashOther HTMLin 92 requests on averagehttp://httparchive.org/fredag 7. juni 13
  • 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. 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. MOBILENETWORKS AREFREAKINGMAGIC!don’t get me started onhandovers!fredag 7. juni 13
  • 10. 2.1 s to connect.Latency, anything from100 - >500msfredag 7. juni 13
  • 11. 2.40 s, html page loadedTCP stufffredag 7. juni 13
  • 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. SERVE A PAGE TO AMOBILE DEVICE INLESS THAN 1 SECOND?A great overview by Ilyva Gricorik:bit.ly/mobile-barrierfredag 7. juni 13
  • 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. GOOGLE: 10.2 S.http://analytics.blogspot.nl/2012/04/global-site-speed-overview-how-fast-are.htmlfredag 7. juni 13
  • 16. Load time: 9.7 sSize: 1.6 MBLoad time: 9.1 sSize: 1.2 MBfredag 7. juni 13
  • 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. WHY USERS CARE?http://mobiforge.com/designing/blog/performance-money-part-1-end-users-wallet= EuropeanVodafoneaccount roaming in USfredag 7. juni 13
  • 19. HOW DO WE APPROACH THIS?fredag 7. juni 13
  • 20. ENTERRESPONSIVEWEB DESIGNYay!fredag 7. juni 13
  • 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. RWD IS A TECHNIQUENothing wrong with the technique! It is brilliant!The famous Iceberg: @brad_frostfredag 7. juni 13
  • 23. RWD != MOBILE OPTIMIZEDbut an important step in the right directionfredag 7. juni 13
  • 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. http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.htmlfredag 7. juni 13
  • 26. PRIMARY ISSUES• Over downloading• Unused assets• Large images• Stuff...• Network issues• High Latency• Bandwidth• Flaky connectionfredag 7. juni 13
  • 27. MORE ISSUES...but that’s another storyhttp://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/fredag 7. juni 13
  • 28. PARET0PRINCIPLEResponsive Design is20% of the work,and might get you80% of the waythe “80/20 rule”fredag 7. juni 13
  • 29. THE LAST 20%will improve performance by 80%fredag 7. juni 13
  • 30. When all you have is a hammer,every problem looks like a nailfredag 7. juni 13
  • 31. HOW CAN WEFIX THIS?Adaptive Designfredag 7. juni 13
  • 32. THE VALUE CHAINAdaptive Responsivedeveloper server internet telco  network device browserfredag 7. juni 13
  • 33. RANTThere is a web server.A very capable one, too.Use it!fredag 7. juni 13
  • 34. SERVER?How to make the server sideavailable to front end devsfredag 7. juni 13
  • 35. fredag 7. juni 13
  • 36. http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/fredag 7. juni 13
  • 37. RESSREsponsive design with ServerSide componentsfredag 7. juni 13
  • 38. A BALANCING ACTno right answerfredag 7. juni 13
  • 39. PURPOSE OF RESS• Reduce need for client sideprocessing• Eliminate “over downloading”fredag 7. juni 13
  • 40. INGREDIENTS OF RESSHello, I know exactly how tomake you shine!Information about therequesting deviceRequest/Responsefredag 7. juni 13
  • 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. 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. 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. 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. 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. EXAMPLEif  ($supports_h264)echo  ‘<video  .../>’;elseecho  ‘<a  href=”...”>Download</a>’;fredag 7. juni 13
  • 47. OUR APPROACHfredag 7. juni 13
  • 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. 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. 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. 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. 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. 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. 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. 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. FTW?Does adaptive design have apositive impact on performance?fredag 7. juni 13
  • 57. EFFECT0108215323430SizeNo WeW With WeW01 0002 0003 0004 000Time05751 1501 7252 300Latency20% less datatransfer50% fasterdownload73% reducedlatencyfredag 7. juni 13
  • 58. BUT...fredag 7. juni 13
  • 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. FUN-FACTLoading apple.com consume1.41% of battery life.http://www2012.wwwconference.org/proceedings/proceedings/p41.pdfNot sofredag 7. juni 13
  • 61. PERFORMANCE FRONT ENDSTARTS WITH THE BACK ENDToo much is left to the browser to figure out.fredag 7. juni 13
  • 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. BASICALLY SAYS• Make as few HTTP requests as possible• Reduce the size of what is downloaded• Make page rendering fastfredag 7. juni 13
  • 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. POOR IMPLEMENTATION SLOWSRENDERING DOWN,POOR INFORMATION SLOWSPEOPLE DOWNWHAT IS SPEED, ANYWAY?fredag 7. juni 13
  • 66. John Arne Sæteråstwitter: @jonarneshttp://www.slideshare.net/jonarnes/THANK YOU?fredag 7. juni 13

×