A Quick Look at the Performance of SAP's Modern UI Technologies

A Quick Look at the Performance of SAP's Modern UI Technologies

A brief overview of what to look for when assessing technologies and environments for front-end performance, and how networks play a big role with "cloud" deployments. We then look at the high-level profiles of Web Dynpro, Fiori (Wave 1) and good old SAP GUI, and what might be done to improve end-user perceived response times.

A5604f2015f157ee20ceb1ea6e609bc9?s=128

Sascha Wenninger

March 31, 2014
Tweet

Transcript

  1. Sascha  Wenninger   A  Look  at  the  Performance  of  SAP’s

        Modern  UI  Technologies  
  2. programming.oreilly.com/2009/07/velocity-­‐making-­‐your-­‐site-­‐fast.html  

  3. programming.oreilly.com/2009/07/velocity-­‐making-­‐your-­‐site-­‐

  4. h<ps://secure.flickr.com/photos/47598386@N00/1659336160    But  we’re  not  Google!  

  5. h<ps://secure.flickr.com/photos/eelssej_/394781835/  

  6. None
  7. What  Now?   • Understand  your  Environment   • Assess  your  Technologies

     
  8. Your  Environment   • Who?   • Where?   • How  many?  

    • How  criRcal  is  performance?  
  9. MMG    

  10. Client  Time   Network  Time   Server  Time   Perceived

     Response  Time  
  11. Client  Time   Network  Time   Server  Time   Perceived

     Response  Time  
  12. None
  13. None
  14. www.submarinecablemap.com  

  15. www.telegeography.com  

  16. www.telegeography.com  

  17. To  USA   www.telegeography.com  

  18. Bandwidth  !==  Latency   • More  bandwidth  is  easy.   • Speeding

     up  light  is  not.   1ms ≈ 100km* in fibre *Round-­‐Trip  distance  
  19. h<p://www.igvita.com/2012/07/19/latency-­‐the-­‐new-­‐web-­‐performance-­‐bo<leneck/  

  20. www.wondernetwork.com/pings  

  21. wheresiYast.com  

  22. Performance  CriIcality   Arguable   …but…   Non-­‐core  ma<ers  too!

      Context   Generic   Core  
  23. Measure  Early,  Measure  OLen   (and  not  just  the  server!)

     
  24. None
  25. FREE!   FREE!   FREE!   FREE!   FREE!  

    $50   FREE!  
  26. h<ps://secure.flickr.com/photos/pasukaru76/4016842259/   Conduct  Performance  Assessments  

  27. Off-­‐The  Shelf   • Helps  to  set  expectaRons   • “Eyes  wide

     open”   • Buy  Rme   – configure  WAN  accelerators  properly   – deploy  caching  proxies  in  remote  locaRons   – consider  internet  access  strategies  
  28. Custom  Development   • Conscious  decisions  and  trade-­‐offs   • Iterate  and

     improve   • Rough  &  ready,  informal  is  fine   – As  long  as  you  start  early   – And  improve  as  you  go  
  29. Rule  1  -­‐  Make  Fewer  HTTP  Requests     Rule

     2  -­‐  Use  a  Content  Delivery  Network     Rule  3  -­‐  Add  an  Expires  Header     Rule  4  -­‐  Gzip  Components     Rule  5  -­‐  Put  Stylesheets  at  the  Top     Rule  6  -­‐  Put  Scripts  at  the  Bo<om     Rule  7  -­‐  Avoid  CSS  Expressions     Rule  8  -­‐  Make  JavaScript  and  CSS  External     Rule  9  -­‐  Reduce  DNS  Lookups     Rule  10  -­‐  Minify  JavaScript     Rule  11  -­‐  Avoid  Redirects     Rule  12  -­‐  Remove  Duplicate  Scripts     Rule  13  -­‐  Configure  ETags     Rule  14  -­‐  Make  AJAX  Cacheable    
  30. Rule  1  -­‐  Make  Fewer  HTTP  Requests     Rule

     2  -­‐  Use  a  Content  Delivery  Network     Rule  3  -­‐  Add  an  Expires  Header     Rule  4  -­‐  Gzip  Components     Rule  5  -­‐  Put  Stylesheets  at  the  Top     Rule  6  -­‐  Put  Scripts  at  the  Bo<om     Rule  7  -­‐  Avoid  CSS  Expressions     Rule  8  -­‐  Make  JavaScript  and  CSS  External     Rule  9  -­‐  Reduce  DNS  Lookups     Rule  10  -­‐  Minify  JavaScript     Rule  11  -­‐  Avoid  Redirects     Rule  12  -­‐  Remove  Duplicate  Scripts     Rule  13  -­‐  Configure  ETags     Rule  14  -­‐  Make  AJAX  Cacheable     Make  Fewer  Requests  
  31. Rule  1  -­‐  Make  Fewer  HTTP  Requests     Rule

     2  -­‐  Use  a  Content  Delivery  Network     Rule  3  -­‐  Add  an  Expires  Header     Rule  4  -­‐  Gzip  Components     Rule  5  -­‐  Put  Stylesheets  at  the  Top     Rule  6  -­‐  Put  Scripts  at  the  Bo<om     Rule  7  -­‐  Avoid  CSS  Expressions     Rule  8  -­‐  Make  JavaScript  and  CSS  External     Rule  9  -­‐  Reduce  DNS  Lookups     Rule  10  -­‐  Minify  JavaScript     Rule  11  -­‐  Avoid  Redirects     Rule  12  -­‐  Remove  Duplicate  Scripts     Rule  13  -­‐  Configure  ETags     Rule  14  -­‐  Make  AJAX  Cacheable     Make  Fewer  Requests   Speed  up  Round-­‐Trips  
  32. Rule  1  -­‐  Make  Fewer  HTTP  Requests     Rule

     2  -­‐  Use  a  Content  Delivery  Network     Rule  3  -­‐  Add  an  Expires  Header     Rule  4  -­‐  Gzip  Components     Rule  5  -­‐  Put  Stylesheets  at  the  Top     Rule  6  -­‐  Put  Scripts  at  the  Bo<om     Rule  7  -­‐  Avoid  CSS  Expressions     Rule  8  -­‐  Make  JavaScript  and  CSS  External     Rule  9  -­‐  Reduce  DNS  Lookups     Rule  10  -­‐  Minify  JavaScript     Rule  11  -­‐  Avoid  Redirects     Rule  12  -­‐  Remove  Duplicate  Scripts     Rule  13  -­‐  Configure  ETags     Rule  14  -­‐  Make  AJAX  Cacheable     Make  Fewer  Requests   Speed  up  Round-­‐Trips   Reduce  Payloads  
  33. Rule  1  -­‐  Make  Fewer  HTTP  Requests     Rule

     2  -­‐  Use  a  Content  Delivery  Network     Rule  3  -­‐  Add  an  Expires  Header     Rule  4  -­‐  Gzip  Components     Rule  5  -­‐  Put  Stylesheets  at  the  Top     Rule  6  -­‐  Put  Scripts  at  the  Bo<om     Rule  7  -­‐  Avoid  CSS  Expressions     Rule  8  -­‐  Make  JavaScript  and  CSS  External     Rule  9  -­‐  Reduce  DNS  Lookups     Rule  10  -­‐  Minify  JavaScript     Rule  11  -­‐  Avoid  Redirects     Rule  12  -­‐  Remove  Duplicate  Scripts     Rule  13  -­‐  Configure  ETags     Rule  14  -­‐  Make  AJAX  Cacheable     Make  Fewer  Requests   Speed  up  Round-­‐Trips   Reduce  Payloads   Browser  Efficiencies  
  34. Make  Fewer  Requests   Speed  up  Round-­‐Trips   Reduce  Payloads

      Browser  Efficiencies  
  35. None
  36. 0%  Cacheable   3  Round  Trips   Download:   15

     kB     Opening  PA20  
  37. + Few round-trips + Small payloads + Efficient - Single

    threaded à Not good for latency - Proprietary à no caching - Uncool
  38. Web  Dynpro  ABAP  

  39. 95%  Cacheable   74  Round  Trips   Download:   1,300

     kB     Web  Dynpro  Leave  Request  
  40. h<p://www.flickr.com/photos/mr_t_in_dc/5920636730   Fiori  (Wave  1)  

  41. Download:   2,770  kB     Fiori  Leave  Request  

    56  Round  Trips   84%  Cacheable  
  42. Payload  (kB)   0   500   1000   1500

      2000   2500   3000   Fiori   Web  Dynpro   0   10   20   30   40   50   60   70   80   Fiori   Web  Dynpro   Chaoness   IniRal   Cached  
  43. Google’s  mod_pagespeed   Automagic  server-­‐side  web  page  opRmisaRon    

    • Recompresses  images   • Combines  CSS  &  JavaScript  files   • Applies  minificaRon   • etc.  etc.  
  44. 37%  Fewer  Requests   Google  PageSpeed  Score:   88  !

     98   YSlow  Score:   83  !  93   It  works:  
  45. • Fiori  is  JavaScript-­‐driven:   – Very  minimal  HTML   – JS  loads

     more  JS,  other  resources  to  build  page   • PageSpeed  can  only  opRmise  HTML  &  references   • <10%  reducRon  in  load  Rme,  resources   Mastering SAP Technologies 2014 | 45 …but  not  with  Fiori…  
  46. OpportuniIes   • Proxy  Caches/private  CDN   • WAN  Accelerators    

    Fiori  and  Web  Dynpro   use  lots  of  public-­‐cacheable  content!  
  47. Just  Browser  Caching  isn’t  enough!   Mastering SAP Technologies 2014

    | 47 Yahoo  @  2007:     40-­‐60%  of  users  visit   www.yahoo.com  with  empty   cache!     20%  of  all  page  views  done   with  empty  cache!   h<p://www.yuiblog.com/blog/2007/01/04/performance-­‐research-­‐part-­‐2/  
  48. OpportuniIes   • Wave  2+     • Cordova/Phonegap  container  apps  

    • Custom  build  for  performance-­‐criRcal  scenarios.   Greatly  improved  architecture   Performance  is  high  on  the  agenda  
  49. Make  Fewer  Requests   Speed  up  Round-­‐Trips   Reduce  Payloads

      Browser  Efficiencies  
  50. None
  51. Want  to  Read  More?   •  How  Fast  Are  We

     Going  Now?   •  Cache  them  if  you  can!   •  Browser  Cache  Usage  Exposed!   •  How  to  Read  HTTP  Waterfall  Charts   •  Velocity  Conference  Talks:  2012  (US),  2012  (Europe),  2013   •  Some  talks  from  the  Chrome  Dev  Summit   •  People  on  twi<er:  @igrigorik,  @souders,  @bluesmoon,  @dakami,   @guypod,  @mnot,  @stoyanstefanov,  @agl__  (and  their  blogs!)   •  Blogs:  h<ps://insouciant.org,  h<p://highscalability.com  
  52. sascha@BlueT.com.au   +61  403  933  472   BlueT.com.au   @sufw

      Mastering SAP Technologies 2014 | 52 Sascha  Wenninger