A Look at the Performance of SAP's Modern UIs

1,458 views

Published on

Making the case for the consideration of network topologies on the performance of UI technologies, and presenting some sample measurements across traditional SAP GUI, WebDynpro for ABAP, and the UI5-based Fiori apps.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,458
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

A Look at the Performance of SAP's Modern UIs

  1. 1. Sascha  Wenninger   A  Look  at  the  Performance  of  SAP’s     Modern  UI  Technologies  
  2. 2. programming.oreilly.com/2009/07/velocity-­‐making-­‐your-­‐site-­‐fast.html  
  3. 3. programming.oreilly.com/2009/07/velocity-­‐making-­‐your-­‐site-­‐
  4. 4. h<ps://secure.flickr.com/photos/47598386@N00/1659336160    But  we’re  not  Google!  
  5. 5. h<ps://secure.flickr.com/photos/eelssej_/394781835/  
  6. 6. What  Now?   • Understand  your  Environment   • Assess  your  Technologies  
  7. 7. Your  Environment   • Who?   • Where?   • How  many?   • How  criRcal  is  performance?  
  8. 8. MMG    
  9. 9. Client  Time   Network  Time   Server  Time   Perceived  Response  Time  
  10. 10. Client  Time   Network  Time   Server  Time   Perceived  Response  Time  
  11. 11. www.submarinecablemap.com  
  12. 12. www.telegeography.com  
  13. 13. www.telegeography.com  
  14. 14. To  USA   www.telegeography.com  
  15. 15. Bandwidth  !==  Latency   • More  bandwidth  is  easy.   • Speeding  up  light  is  not.   1ms ≈ 100km* in fibre *Round-­‐Trip  distance  
  16. 16. h<p://www.igvita.com/2012/07/19/latency-­‐the-­‐new-­‐web-­‐performance-­‐bo<leneck/  
  17. 17. www.wondernetwork.com/pings  
  18. 18. wheresiYast.com  
  19. 19. Performance  CriIcality   Arguable   …but…   Non-­‐core  ma<ers  too!   Context   Generic   Core  
  20. 20. Measure  Early,  Measure  OLen   (and  not  just  the  server!)  
  21. 21. FREE!   FREE!   FREE!   FREE!   FREE!   $50   FREE!  
  22. 22. h<ps://secure.flickr.com/photos/pasukaru76/4016842259/   Conduct  Performance  Assessments  
  23. 23. 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  
  24. 24. 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  
  25. 25. 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    
  26. 26. 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  
  27. 27. 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  
  28. 28. 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  
  29. 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     Make  Fewer  Requests   Speed  up  Round-­‐Trips   Reduce  Payloads   Browser  Efficiencies  
  30. 30. Make  Fewer  Requests   Speed  up  Round-­‐Trips   Reduce  Payloads   Browser  Efficiencies  
  31. 31. 0%  Cacheable   3  Round  Trips   Download:  15  kB     Opening  PA20  
  32. 32. + Few round-trips + Small payloads + Efficient - Single threaded à Not good for latency - Proprietary à no caching - Uncool
  33. 33. Web  Dynpro  ABAP  
  34. 34. 95%  Cacheable   74  Round  Trips   Download:  1,300  kB     Web  Dynpro  Leave  Request  
  35. 35. h<p://www.flickr.com/photos/mr_t_in_dc/5920636730   Fiori  (Wave  1)  
  36. 36. Download:  2,770  kB     Fiori  Leave  Request   56  Round  Trips   84%  Cacheable  
  37. 37. 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  
  38. 38. Google’s  mod_pagespeed   Automagic  server-­‐side  web  page  opRmisaRon     • Recompresses  images   • Combines  CSS  &  JavaScript  files   • Applies  minificaRon   • etc.  etc.  
  39. 39. 37%  Fewer  Requests   Google  PageSpeed  Score:  88  !  98   YSlow  Score:  83  !  93   It  works:  
  40. 40. • 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…  
  41. 41. OpportuniIes   • Proxy  Caches/private  CDN   • WAN  Accelerators     Fiori  and  Web  Dynpro   use  lots  of  public-­‐cacheable  content!  
  42. 42. 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/  
  43. 43. OpportuniIes   • Wave  2+     • Cordova/Phonegap  container  apps   • Custom  build  for  performance-­‐criRcal  scenarios.   Greatly  improved  architecture   Performance  is  high  on  the  agenda  
  44. 44. Make  Fewer  Requests   Speed  up  Round-­‐Trips   Reduce  Payloads   Browser  Efficiencies  
  45. 45. 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  
  46. 46. sascha@BlueT.com.au   +61  403  933  472   BlueT.com.au   @sufw   Mastering SAP Technologies 2014 | 52 Sascha  Wenninger  

×