Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
A Look at the Performance of SAP’s 
Modern UI Technologies 
SAP TechEd && d-code 2014 
Sascha Wenninger 
UXP212
programming.oreilly.com/2009/07/velocity-making-your-site-fast.html
programming.oreilly.com/2009/07/velocity-making-your-site-fast. 
html
But we’re not Google! 
SAP TechEd && d-code 2014 https://secure.flickr.com/photos/47598386@N00/1659336160
Performance Criticality 
Arguable 
…but… 
Non-core matters too! Context 
SAP TechEd && d-code 2014 
Core 
Generic
SAP TechEd && d-code 2014 https://secure.flickr.com/photos/eelssej_/394781835/
What Now? 
• Understand your Environment 
• Assess your Technologies 
SAP TechEd && d-code 2014
Your Environment 
• Who? 
• Where? 
• How many? 
• How critical is performance? 
SAP TechEd && d-code 2014
MMG 
SAP TechEd && d-code 2014
Client Time 
SAP TechEd && d-code 2014 
Network Time 
Server Time 
Perceived Response Time
Client Time 
SAP TechEd && d-code 2014 
Network Time 
Server Time 
Perceived Response Time
SAP TechEd && d-code 2014 www.submarinecablemap.com
www.telegeography.com
www.telegeography.com
To USA 
www.telegeography.com
Bandwidth !== Latency 
• More bandwidth is easy. 
• Speeding up light is not. 
SAP TechEd && d-code 2014 
*Round-Trip dist...
SAP TechEd && d-codhe 2t0t1p4://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
www.wondernetwork.com/pings
wheresitfast.com
Measure Early, Measure Often 
SAP TechEd && d-code 2014 
(and not just the server!)
SAP TechEd && d-code 2014
SAP TechEd && d-code 2014
Conduct Performance Assessments 
SAP TechEd && d-code 2014 https://secure.flickr.com/photos/pasukaru76/4016842259/
Off-The Shelf 
• Helps to set expectations 
• “Eyes wide open” 
• Buy time 
– configure WAN accelerators properly 
– deplo...
Custom Development 
• Conscious decisions and trade-offs 
• Iterate and improve 
• Rough & ready, informal is fine 
– As l...
SAP TechEd && d-code 2014 
Rule 1 - Make Fewer HTTP Requests 
Rule 2 - Use a Content Delivery Network 
Rule 3 - Add an Exp...
SAP TechEd && d-code 2014 
Rule 1 - Make Fewer HTTP Requests 
Rule 2 - Use a Content Delivery Network 
Rule 3 - Add an Exp...
SAP TechEd && d-code 2014 
Rule 1 - Make Fewer HTTP Requests 
Rule 2 - Use a Content Delivery Network 
Rule 3 - Add an Exp...
SAP TechEd && d-code 2014 
Rule 1 - Make Fewer HTTP Requests 
Rule 2 - Use a Content Delivery Network 
Rule 3 - Add an Exp...
SAP TechEd && d-code 2014 
Rule 1 - Make Fewer HTTP Requests 
Rule 2 - Use a Content Delivery Network 
Rule 3 - Add an Exp...
Make Fewer Requests 
Speed up Round-Trips 
Reduce Payloads 
Browser Efficiencies 
SAP TechEd && d-code 2014
0%Cacheable 
3Round Trips 
SAP TechEd && d-code 2014 
Download: 15 kB 
Opening PA20
+ Few round-trips 
+ Small payloads 
+ Efficient 
SAP TechEd && d-code 2014 
- Single threaded 
 Not good for latency 
- ...
Web Dynpro ABAP
Web Dynpro Leave Request 
95%Cacheable 
74Round Trips 
SAP TechEd && d-code 2014 
Download: 1,300 kB
Fiori (Wave 1) 
http://www.flickr.com/photos/mr_t_in_dc/5920636730
Fiori Leave Request 
84%Cacheable 
SAP TechEd && d-code 2014 
Download: 2,770 kB 
56Round Trips –43single-threaded!
SAP TechEd && d-code 2014 
80 
70 
60 
50 
40 
30 
20 
10 
0 
Chattiness 
Initial 
Fiori Web Dynpro 
Cached
SAP TechEd && d-code 2014 
Payload (kB) 
3000 
2500 
2000 
1500 
1000 
500 
0 
Initial 
Cached 
Fiori Web Dynpro
Google’s mod_pagespeed 
Automagic server-side web page optimisation 
• Recompresses images 
• Combines CSS & JavaScript fi...
37%Fewer Requests 
Google PageSpeed Score: 88  98 
SAP TechEd && d-code 2014 
YSlow Score: 83  93 
It works:
…but not with UI5… 
• UI5 is JavaScript-driven: 
– Very minimal HTML 
– JS loads more JS, other resources to build page 
•...
For Custom UI5 Apps… 
grunt-contrib-uglify 
Google’s psol (if on Linux) 
Closure Compiler 
YUI Compressor 
… 
See also ses...
SAP TechEd && d-code 2014 
“Don’t worry. The browser will cache it”
Just Browser Caching isn’t enough! 
SAP TechEd && d-code 2014 
Yahoo @ 2007: 
40-60% of users visit 
www.yahoo.com with em...
Make Fewer Requests 
Speed up Round-Trips 
Reduce Payloads 
Browser Efficiencies 
SAP TechEd && d-code 2014
SAP TechEd && d-code 2014 
CDN
Content Delivery Network 
SAP TechEd && d-code 2014 
https://commons.wikimedia.org/wiki/File:NCDN_-_CDN.png
e.g. Amazon CloudFront User in Lima, Peru 
SAP TechEd && d-code 2014 
Server in Northern CA 
~8,500km ATCF* 
Ideal RTT: >8...
SAP TechEd && d-code 2014 
Fiori Leave Request 
from empty cache: 43 
sequential requests 
165ms × 43 = 7s just in 
networ...
Amazon CloudFront 
SAP TechEd && d-code 2014
SAP TechEd && d-code 2014 
CloudFront Edge locations in 
Rio & São Paulo 
~3,800km ATCF* 
Ideal RTT: >38ms 
Real-world RTT...
SAP TechEd && d-code 2014 
Fiori Leave Request 
Up to 32 cacheable requests 
could go to CDN 
Potential saving of 2s (28%)...
Potential Downsides 
• CDN means public internet 
• Applications usually have to be CDN aware 
– Load static resources fro...
Network Acceleration 
SAP TechEd && d-code 2014
Network Acceleration / WAN Optimisation 
• Appliances by Riverbed, Cisco, et al. 
• “private CDN”, with edge locations in ...
SAP TechEd && d-code 2014 
Fiori Leave Request 
Cacheable requests served by 
local caching node. 
~0ms latency 
Potential...
Real-World Experience 
• Deployed Cisco WAAS in some locations 
• 40-70% improvement in BOBJ performance 
– ~40% for WebI ...
Fiori Opportunities 
• Wave 2+ 
• Cordova/Phonegap/UI5 Kapsel container apps 
• Custom build for performance-critical scen...
Make Fewer Requests 
Speed up Round-Trips 
Reduce Payloads 
Browser Efficiencies 
SAP TechEd && d-code 2014
Want to Read More? 
How Fast Are We Going Now? 
Cache them if you can! 
Browser Cache Usage Exposed! 
How to Read HTTP Wat...
SAP TechEd && d-code 2014 
Sascha Wenninger 
sascha@BlueT.com.au 
+61 403 93 472 
BlueT.com.au 
@sufw
A Look at the Performance of SAP UI Technologies - UXP212 at SAP TechEd && d-code 2014
A Look at the Performance of SAP UI Technologies - UXP212 at SAP TechEd && d-code 2014
A Look at the Performance of SAP UI Technologies - UXP212 at SAP TechEd && d-code 2014
A Look at the Performance of SAP UI Technologies - UXP212 at SAP TechEd && d-code 2014
A Look at the Performance of SAP UI Technologies - UXP212 at SAP TechEd && d-code 2014
Upcoming SlideShare
Loading in …5
×

A Look at the Performance of SAP UI Technologies - UXP212 at SAP TechEd && d-code 2014

1,709 views

Published on

A brief overview of why user-perceived performance is important, what factors impact performance over a WAN or the internet, and how some of SAP's UI technologies such as Web Dynpro, UI5, or SAP GUI fare in these networks. Some optimisation approaches are discussed briefly towards the end.
This is an expanded version of the presentation given at Mastering SAP Technologies 2014

Published in: Technology
  • How long does it take for VigRX Plus to start working? ◆◆◆ https://bit.ly/30G1ZO1
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

A Look at the Performance of SAP UI Technologies - UXP212 at SAP TechEd && d-code 2014

  1. 1. A Look at the Performance of SAP’s Modern UI Technologies SAP TechEd && d-code 2014 Sascha Wenninger UXP212
  2. 2. programming.oreilly.com/2009/07/velocity-making-your-site-fast.html
  3. 3. programming.oreilly.com/2009/07/velocity-making-your-site-fast. html
  4. 4. But we’re not Google! SAP TechEd && d-code 2014 https://secure.flickr.com/photos/47598386@N00/1659336160
  5. 5. Performance Criticality Arguable …but… Non-core matters too! Context SAP TechEd && d-code 2014 Core Generic
  6. 6. SAP TechEd && d-code 2014 https://secure.flickr.com/photos/eelssej_/394781835/
  7. 7. What Now? • Understand your Environment • Assess your Technologies SAP TechEd && d-code 2014
  8. 8. Your Environment • Who? • Where? • How many? • How critical is performance? SAP TechEd && d-code 2014
  9. 9. MMG SAP TechEd && d-code 2014
  10. 10. Client Time SAP TechEd && d-code 2014 Network Time Server Time Perceived Response Time
  11. 11. Client Time SAP TechEd && d-code 2014 Network Time Server Time Perceived Response Time
  12. 12. SAP TechEd && d-code 2014 www.submarinecablemap.com
  13. 13. www.telegeography.com
  14. 14. www.telegeography.com
  15. 15. To USA www.telegeography.com
  16. 16. Bandwidth !== Latency • More bandwidth is easy. • Speeding up light is not. SAP TechEd && d-code 2014 *Round-Trip distance
  17. 17. SAP TechEd && d-codhe 2t0t1p4://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
  18. 18. www.wondernetwork.com/pings
  19. 19. wheresitfast.com
  20. 20. Measure Early, Measure Often SAP TechEd && d-code 2014 (and not just the server!)
  21. 21. SAP TechEd && d-code 2014
  22. 22. SAP TechEd && d-code 2014
  23. 23. Conduct Performance Assessments SAP TechEd && d-code 2014 https://secure.flickr.com/photos/pasukaru76/4016842259/
  24. 24. Off-The Shelf • Helps to set expectations • “Eyes wide open” • Buy time – configure WAN accelerators properly – deploy caching proxies in remote locations – consider internet access strategies SAP TechEd && d-code 2014
  25. 25. 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 SAP TechEd && d-code 2014
  26. 26. SAP TechEd && d-code 2014 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 Bottom 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
  27. 27. SAP TechEd && d-code 2014 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 Bottom 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
  28. 28. SAP TechEd && d-code 2014 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 Bottom 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
  29. 29. SAP TechEd && d-code 2014 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 Bottom 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
  30. 30. SAP TechEd && d-code 2014 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 Bottom 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
  31. 31. Make Fewer Requests Speed up Round-Trips Reduce Payloads Browser Efficiencies SAP TechEd && d-code 2014
  32. 32. 0%Cacheable 3Round Trips SAP TechEd && d-code 2014 Download: 15 kB Opening PA20
  33. 33. + Few round-trips + Small payloads + Efficient SAP TechEd && d-code 2014 - Single threaded  Not good for latency - Proprietary  no caching - Uncool
  34. 34. Web Dynpro ABAP
  35. 35. Web Dynpro Leave Request 95%Cacheable 74Round Trips SAP TechEd && d-code 2014 Download: 1,300 kB
  36. 36. Fiori (Wave 1) http://www.flickr.com/photos/mr_t_in_dc/5920636730
  37. 37. Fiori Leave Request 84%Cacheable SAP TechEd && d-code 2014 Download: 2,770 kB 56Round Trips –43single-threaded!
  38. 38. SAP TechEd && d-code 2014 80 70 60 50 40 30 20 10 0 Chattiness Initial Fiori Web Dynpro Cached
  39. 39. SAP TechEd && d-code 2014 Payload (kB) 3000 2500 2000 1500 1000 500 0 Initial Cached Fiori Web Dynpro
  40. 40. Google’s mod_pagespeed Automagic server-side web page optimisation • Recompresses images • Combines CSS & JavaScript files • Applies minification • etc. etc. SAP TechEd && d-code 2014
  41. 41. 37%Fewer Requests Google PageSpeed Score: 88  98 SAP TechEd && d-code 2014 YSlow Score: 83  93 It works:
  42. 42. …but not with UI5… • UI5 is JavaScript-driven: – Very minimal HTML – JS loads more JS, other resources to build page • PageSpeed can only optimise HTML & references SAP TechEd && d-code 2014
  43. 43. For Custom UI5 Apps… grunt-contrib-uglify Google’s psol (if on Linux) Closure Compiler YUI Compressor … See also session UXP301 SAP TechEd && d-code 2014
  44. 44. SAP TechEd && d-code 2014 “Don’t worry. The browser will cache it”
  45. 45. Just Browser Caching isn’t enough! SAP TechEd && d-code 2014 Yahoo @ 2007: 40-60% of users visit www.yahoo.com with empty cache! 20% of all page views done with empty cache! http://www.yuiblog.com/blog/2007/01/04/performance-research-part-2/
  46. 46. Make Fewer Requests Speed up Round-Trips Reduce Payloads Browser Efficiencies SAP TechEd && d-code 2014
  47. 47. SAP TechEd && d-code 2014 CDN
  48. 48. Content Delivery Network SAP TechEd && d-code 2014 https://commons.wikimedia.org/wiki/File:NCDN_-_CDN.png
  49. 49. e.g. Amazon CloudFront User in Lima, Peru SAP TechEd && d-code 2014 Server in Northern CA ~8,500km ATCF* Ideal RTT: >85ms Real-world RTT: 165ms *as the crow flies
  50. 50. SAP TechEd && d-code 2014 Fiori Leave Request from empty cache: 43 sequential requests 165ms × 43 = 7s just in network latency
  51. 51. Amazon CloudFront SAP TechEd && d-code 2014
  52. 52. SAP TechEd && d-code 2014 CloudFront Edge locations in Rio & São Paulo ~3,800km ATCF* Ideal RTT: >38ms Real-world RTT: 105ms 43 requests are on the critical path. 32 are cacheable 32 24
  53. 53. SAP TechEd && d-code 2014 Fiori Leave Request Up to 32 cacheable requests could go to CDN Potential saving of 2s (28%) 32 24
  54. 54. Potential Downsides • CDN means public internet • Applications usually have to be CDN aware – Load static resources from different hostname, or – Designed to be served from CDN (e.g. meistr.com) • Potential gaps in CDN coverage vs. user base. SAP TechEd && d-code 2014
  55. 55. Network Acceleration SAP TechEd && d-code 2014
  56. 56. Network Acceleration / WAN Optimisation • Appliances by Riverbed, Cisco, et al. • “private CDN”, with edge locations in your offices • Automagic compression, caching, QoS, etc. • Transparent to existing apps – part of the network SAP TechEd && d-code 2014
  57. 57. SAP TechEd && d-code 2014 Fiori Leave Request Cacheable requests served by local caching node. ~0ms latency Potential saving of 5s (70%)! 32 24
  58. 58. Real-World Experience • Deployed Cisco WAAS in some locations • 40-70% improvement in BOBJ performance – ~40% for WebI – 50-70% for some dashboards • Cisco WAAS + X.509 =  – All ECC traffic is over SSL (with X.509) so no use here. • Now deploying Riverbed SteelHeads for SSL support SAP TechEd && d-code 2014
  59. 59. Fiori Opportunities • Wave 2+ • Cordova/Phonegap/UI5 Kapsel container apps • Custom build for performance-critical scenarios. SAP TechEd && d-code 2014 Improved architecture Performance is high on the agenda
  60. 60. Make Fewer Requests Speed up Round-Trips Reduce Payloads Browser Efficiencies SAP TechEd && d-code 2014
  61. 61. 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 twitter: @igrigorik, @souders, @bluesmoon, @dakami, @guypod, @mnot, @stoyanstefanov, @agl__ (and their blogs!) Blogs: https://insouciant.org, http://highscalability.com SAP TechEd && d-code 2014
  62. 62. SAP TechEd && d-code 2014 Sascha Wenninger sascha@BlueT.com.au +61 403 93 472 BlueT.com.au @sufw

×