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.

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/  
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  
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!)  
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  
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  
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