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

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
Core
Generic

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

What Now?
• Understand your Environment
• Assess your Technologies

Your Environment
• Who?
• Where?
• How many?
• How critical is performance?

MMG

Client Time
Network Time
Server Time
Perceived Response Time

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

Bandwidth !== Latency
• More bandwidth is easy.
• Speeding up light is not.
*Round-Trip distance

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

Measure Early, Measure Often
(and not just the server!)

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
– deploy caching proxies in remote locations
– consider internet access strategies

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

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

Make Fewer Requests
Speed up Round-Trips

Make Fewer Requests
Reduce Payloads

Make Fewer Requests
Reduce Payloads
Browser Efficiencies

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

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

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

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

Fiori Leave Request
84%Cacheable
Download: 2,770 kB
56Round Trips –43single-threaded!

80
70
60
50
40
30
20
10
0
Chattiness
Initial
Fiori Web Dynpro
Cached

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 files
• Applies minification
• etc. etc.

37%Fewer Requests
Google PageSpeed Score: 88  98
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
• PageSpeed can only optimise HTML & references

For Custom UI5 Apps…
grunt-contrib-uglify
Google’s psol (if on Linux)
Closure Compiler
YUI Compressor
…
See also session UXP301

“Don’t worry. The browser will cache it”

Just Browser Caching isn’t enough!
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/

CDN

Content Delivery Network
https://commons.wikimedia.org/wiki/File:NCDN_-_CDN.png

e.g. Amazon CloudFront User in Lima, Peru
Server in Northern CA
~8,500km ATCF*
Ideal RTT: >85ms
Real-world RTT: 165ms
*as the crow flies

Fiori Leave Request
from empty cache: 43
sequential requests
165ms × 43 = 7s just in
network latency

Amazon CloudFront

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

Fiori Leave Request
Up to 32 cacheable requests
could go to CDN
Potential saving of 2s (28%)
32
24

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.

Network Acceleration

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

Fiori Leave Request
Cacheable requests served by
local caching node.
~0ms latency
Potential saving of 5s (70%)!
32
24

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

Fiori Opportunities
• Wave 2+
• Cordova/Phonegap/UI5 Kapsel container apps
• Custom build for performance-critical scenarios.
Improved architecture
Performance is high on the agenda

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

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

More Related Content

What's hot

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

More from Sascha Wenninger

Recently uploaded

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

Editor's Notes