a look at the performance of sap ui technologies - uxp212 at sap teched && d-code 2014
DESCRIPTION
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 2014TRANSCRIPT
SAP TechEd && d-code 2014
Sascha Wenninger
A Look at the Performance of SAP’s Modern UI Technologies
UXP212
programming.oreilly.com/2009/07/velocity-making-your-site-fast.html
programming.oreilly.com/2009/07/velocity-making-your-site-fast.html
SAP TechEd && d-code 2014 https://secure.flickr.com/photos/47598386@N00/1659336160
But we’re not Google!
SAP TechEd && d-code 2014
Performance Criticality
Arguable…but…Non-core matters too! Context
Generic
Core
SAP TechEd && d-code 2014 https://secure.flickr.com/photos/eelssej_/394781835/
SAP TechEd && d-code 2014
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
Network Time
Server Time
Perceived Response Time
SAP TechEd && d-code 2014
Client Time
Network Time
Server Time
Perceived Response Time
SAP TechEd && d-code 2014 www.submarinecablemap.com
www.telegeography.com
www.telegeography.com
To USAwww.telegeography.com
SAP TechEd && d-code 2014
Bandwidth !== Latency
• More bandwidth is easy.• Speeding up light is not.
1ms ≈ 100km* in fibre
*Round-Trip distance
SAP TechEd && d-code 2014http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
www.wondernetwork.com/pings
wheresitfast.com
SAP TechEd && d-code 2014
Measure Early, Measure Often
(and not just the server!)
SAP TechEd && d-code 2014
SAP TechEd && d-code 2014
FREE!
FREE!FREE!
FREE!
FREE!
FREE!
$50 FREE!
SAP TechEd && d-code 2014 https://secure.flickr.com/photos/pasukaru76/4016842259/
Conduct Performance Assessments
SAP TechEd && d-code 2014
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
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
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
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
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 RequestsSpeed up Round-Trips
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 RequestsSpeed up Round-TripsReduce Payloads
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 RequestsSpeed up Round-TripsReduce PayloadsBrowser Efficiencies
SAP TechEd && d-code 2014
Make Fewer Requests
Speed up Round-Trips
Reduce Payloads
Browser Efficiencies
SAP TechEd && d-code 2014
0% Cacheable
3 Round Trips
Download: 15 kB
Opening PA20
SAP TechEd && d-code 2014
+ Few round-trips
+ Small payloads
+ Efficient
- Single threaded
Not good for latency
- Proprietary
no caching
- Uncool
Web Dynpro ABAP
SAP TechEd && d-code 2014
95% Cacheable
74 Round Trips
Download: 1,300 kB
Web Dynpro Leave Request
http://www.flickr.com/photos/mr_t_in_dc/5920636730
Fiori (Wave 1)
SAP TechEd && d-code 2014
Download: 2,770 kB
Fiori Leave Request
56 Round Trips – 43 single-threaded!
84% Cacheable
SAP TechEd && d-code 2014
Fiori Web Dynpro0
10
20
30
40
50
60
70
80
ChattinessInitial
Cached
SAP TechEd && d-code 2014
Payload (kB)
Fiori Web Dynpro0
500
1000
1500
2000
2500
3000
Initial
Cached
SAP TechEd && d-code 2014
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
37% Fewer Requests
Google PageSpeed Score: 88 98YSlow Score: 83 93
It works:
SAP TechEd && d-code 2014
• UI5 is JavaScript-driven:– Very minimal HTML– JS loads more JS, other resources to build page
• PageSpeed can only optimise HTML & references
…but not with UI5…
SAP TechEd && d-code 2014
grunt-contrib-uglify Google’s psol (if on Linux)Closure CompilerYUI Compressor…
See also session UXP301
For Custom UI5 Apps…
SAP TechEd && d-code 2014
“Don’t worry. The browser will cache it”
SAP TechEd && d-code 2014
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/
SAP TechEd && d-code 2014
Make Fewer Requests
Speed up Round-Trips
Reduce Payloads
Browser Efficiencies
SAP TechEd && d-code 2014
CDN
SAP TechEd && d-code 2014
Content Delivery Network
https://commons.wikimedia.org/wiki/File:NCDN_-_CDN.png
SAP TechEd && d-code 2014
e.g. Amazon CloudFront User in Lima, PeruServer in Northern CA~8,500km ATCF*
Ideal RTT: >85msReal-world RTT: 165ms
*as the crow flies
SAP TechEd && d-code 2014
Fiori Leave Request
from empty cache: 43 sequential requests
165ms × 43 = 7s just in network latency
SAP TechEd && d-code 2014
Amazon CloudFront
SAP TechEd && d-code 2014
CloudFront Edge locations in Rio & São Paulo~3,800km ATCF*
Ideal RTT: >38msReal-world RTT: 105ms
43 requests are on the critical path.32 are cacheable
32
24
SAP TechEd && d-code 2014
Fiori Leave Request
Up to 32 cacheable requests could go to CDN
Potential saving of 2s (28%)32
24
SAP TechEd && d-code 2014
• 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.
Potential Downsides
SAP TechEd && d-code 2014
Network Acceleration
SAP TechEd && d-code 2014
• 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
Network Acceleration / WAN Optimisation
SAP TechEd && d-code 2014
Fiori Leave Request
Cacheable requests served by local caching node.
~0ms latency
Potential saving of 5s (70%)!
32
24
SAP TechEd && d-code 2014
• 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
Real-World Experience
SAP TechEd && d-code 2014
Fiori Opportunities
• Wave 2+
• Cordova/Phonegap/UI5 Kapsel container apps• Custom build for performance-critical scenarios.
Improved architecturePerformance is high on the agenda
SAP TechEd && d-code 2014
Make Fewer Requests
Speed up Round-Trips
Reduce Payloads
Browser Efficiencies
SAP TechEd && d-code 2014
How Fast Are We Going Now?Cache them if you can!Browser Cache Usage Exposed!How to Read HTTP Waterfall ChartsVelocity Conference Talks: 2012 (US), 2012 (Europe), 2013Some talks from the Chrome Dev SummitPeople on twitter: @igrigorik, @souders, @bluesmoon, @dakami,
@guypod, @mnot, @stoyanstefanov, @agl__ (and their blogs!)Blogs: https://insouciant.org, http://highscalability.com
Want to Read More?
