Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Sascha Wenninger

March 31, 2014
Tweet

More Decks by Sascha Wenninger

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

  4. h  But  we’re  not  Google!  

    View Slide

  5. h

    View Slide

  6. View Slide

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

    View Slide

  8. Your  Environment  
    • Who?  
    • Where?  
    • How  many?  
    • How  criRcal  is  performance?  

    View Slide

  9. MMG    

    View Slide

  10. Client  Time  
    Network  Time  
    Server  Time  
    Perceived  Response  Time  

    View Slide

  11. Client  Time  
    Network  Time  
    Server  Time  
    Perceived  Response  Time  

    View Slide

  12. View Slide

  13. View Slide

  14. www.submarinecablemap.com  

    View Slide

  15. www.telegeography.com  

    View Slide

  16. www.telegeography.com  

    View Slide

  17. To  USA  
    www.telegeography.com  

    View Slide

  18. Bandwidth  !==  Latency  
    • More  bandwidth  is  easy.  
    • Speeding  up  light  is  not.  
    1ms ≈ 100km* in fibre
    *Round-­‐Trip  distance  

    View Slide

  19. h

    View Slide

  20. www.wondernetwork.com/pings  

    View Slide

  21. wheresiYast.com  

    View Slide

  22. Performance  CriIcality  
    Arguable  
    …but…  
    Non-­‐core  maGeneric  
    Core  

    View Slide

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

    View Slide

  24. View Slide

  25. FREE!  
    FREE!  
    FREE!  
    FREE!  
    FREE!  
    $50   FREE!  

    View Slide

  26. hConduct  Performance  Assessments  

    View Slide

  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  

    View Slide

  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  

    View Slide

  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  BoRule  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    

    View Slide

  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  BoRule  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  

    View Slide

  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  BoRule  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  

    View Slide

  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  BoRule  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  

    View Slide

  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  BoRule  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  

    View Slide

  34. Make  Fewer  Requests  
    Speed  up  Round-­‐Trips  
    Reduce  Payloads  
    Browser  Efficiencies  

    View Slide

  35. View Slide

  36. 0%  Cacheable  
    3  Round  Trips  
    Download:  
    15  kB    
    Opening  PA20  

    View Slide

  37. + Few round-trips
    + Small payloads
    + Efficient
    - Single threaded
    à Not good for latency
    - Proprietary
    à no caching
    - Uncool

    View Slide

  38. Web  Dynpro  ABAP  

    View Slide

  39. 95%  Cacheable  
    74  Round  Trips  
    Download:  
    1,300  kB    
    Web  Dynpro  Leave  Request  

    View Slide

  40. hFiori  (Wave  1)  

    View Slide

  41. Download:  
    2,770  kB    
    Fiori  Leave  Request  
    56  Round  Trips  
    84%  Cacheable  

    View Slide

  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  

    View Slide

  43. Google’s  mod_pagespeed  
    Automagic  server-­‐side  web  page  opRmisaRon  
     
    • Recompresses  images  
    • Combines  CSS  &  JavaScript  files  
    • Applies  minificaRon  
    • etc.  etc.  

    View Slide

  44. 37%  Fewer  Requests  
    Google  PageSpeed  Score:  
    88  !  98  
    YSlow  Score:  
    83  !  93  
    It  works:  

    View Slide

  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…  

    View Slide

  46. OpportuniIes  
    • Proxy  Caches/private  CDN  
    • WAN  Accelerators  
     
    Fiori  and  Web  Dynpro  
    use  lots  of  public-­‐cacheable  content!  

    View Slide

  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

    View Slide

  48. OpportuniIes  
    • Wave  2+  
     
    • Cordova/Phonegap  container  apps  
    • Custom  build  for  performance-­‐criRcal  scenarios.  
    Greatly  improved  architecture  
    Performance  is  high  on  the  agenda  

    View Slide

  49. Make  Fewer  Requests  
    Speed  up  Round-­‐Trips  
    Reduce  Payloads  
    Browser  Efficiencies  

    View Slide

  50. View Slide

  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@guypod,  @mnot,  @stoyanstefanov,  @agl__  (and  their  blogs!)  
    •  Blogs:  h

    View Slide

  52. [email protected]  
    +61  403  933  472  
    BlueT.com.au  
    @sufw  
    Mastering SAP Technologies 2014 | 52
    Sascha  Wenninger  

    View Slide