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

1. A Look at the Performance of SAP’s
Modern UI Technologies
SAP TechEd && d-code 2014
Sascha Wenninger
UXP212

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

3. programming.oreilly.com/2009/07/velocity-making-your-site-fast.
html

4. But we’re not Google!
SAP TechEd && d-code 2014 https://secure.flickr.com/photos/47598386@N00/1659336160

5. Performance Criticality
Arguable
…but…
Non-core matters too! Context
SAP TechEd && d-code 2014
Core
Generic

6. SAP TechEd && d-code 2014 https://secure.flickr.com/photos/eelssej_/394781835/

8. What Now?
• Understand your Environment
• Assess your Technologies
SAP TechEd && d-code 2014

9. Your Environment
• Who?
• Where?
• How many?
• How critical is performance?
SAP TechEd && d-code 2014

10. MMG
SAP TechEd && d-code 2014

11. Client Time
SAP TechEd && d-code 2014
Network Time
Server Time
Perceived Response Time

12. Client Time
SAP TechEd && d-code 2014
Network Time
Server Time
Perceived Response Time

15. SAP TechEd && d-code 2014 www.submarinecablemap.com

16. www.telegeography.com

17. www.telegeography.com

18. To USA
www.telegeography.com

19. Bandwidth !== Latency
• More bandwidth is easy.
• Speeding up light is not.
SAP TechEd && d-code 2014
*Round-Trip distance

20. SAP TechEd && d-codhe 2t0t1p4://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/

21. www.wondernetwork.com/pings

22. wheresitfast.com

23. Measure Early, Measure Often
SAP TechEd && d-code 2014
(and not just the server!)

24. SAP TechEd && d-code 2014

25. SAP TechEd && d-code 2014

26. Conduct Performance Assessments
SAP TechEd && d-code 2014 https://secure.flickr.com/photos/pasukaru76/4016842259/

27. 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

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
SAP TechEd && d-code 2014

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

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

31. 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

32. 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

33. 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

34. Make Fewer Requests
Speed up Round-Trips
Reduce Payloads
Browser Efficiencies
SAP TechEd && d-code 2014

36. 0%Cacheable
3Round Trips
SAP TechEd && d-code 2014
Download: 15 kB
Opening PA20

37. + Few round-trips
+ Small payloads
+ Efficient
SAP TechEd && d-code 2014
- Single threaded
 Not good for latency
- Proprietary
 no caching
- Uncool

38. Web Dynpro ABAP

39. Web Dynpro Leave Request
95%Cacheable
74Round Trips
SAP TechEd && d-code 2014
Download: 1,300 kB

40. Fiori (Wave 1)
http://www.flickr.com/photos/mr_t_in_dc/5920636730

41. Fiori Leave Request
84%Cacheable
SAP TechEd && d-code 2014
Download: 2,770 kB
56Round Trips –43single-threaded!

42. SAP TechEd && d-code 2014
80
70
60
50
40
30
20
10
0
Chattiness
Initial
Fiori Web Dynpro
Cached

43. SAP TechEd && d-code 2014
Payload (kB)
3000
2500
2000
1500
1000
500
0
Initial
Cached
Fiori Web Dynpro

44. 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

45. 37%Fewer Requests
Google PageSpeed Score: 88  98
SAP TechEd && d-code 2014
YSlow Score: 83  93
It works:

46. …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

47. 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

48. SAP TechEd && d-code 2014
“Don’t worry. The browser will cache it”

49. 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/

50. Make Fewer Requests
Speed up Round-Trips
Reduce Payloads
Browser Efficiencies
SAP TechEd && d-code 2014

51. SAP TechEd && d-code 2014
CDN

52. Content Delivery Network
SAP TechEd && d-code 2014
https://commons.wikimedia.org/wiki/File:NCDN_-_CDN.png

53. 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

54. SAP TechEd && d-code 2014
Fiori Leave Request
from empty cache: 43
sequential requests
165ms × 43 = 7s just in
network latency

55. Amazon CloudFront
SAP TechEd && d-code 2014

56. 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

57. SAP TechEd && d-code 2014
Fiori Leave Request
Up to 32 cacheable requests
could go to CDN
Potential saving of 2s (28%)
32
24

58. 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

59. Network Acceleration
SAP TechEd && d-code 2014

60. 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

61. SAP TechEd && d-code 2014
Fiori Leave Request
Cacheable requests served by
local caching node.
~0ms latency
Potential saving of 5s (70%)!
32
24

62. 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

63. 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

64. Make Fewer Requests
Speed up Round-Trips
Reduce Payloads
Browser Efficiencies
SAP TechEd && d-code 2014

66. 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

67. SAP TechEd && d-code 2014
Sascha Wenninger
sascha@BlueT.com.au
+61 403 93 472
BlueT.com.au
@sufw