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?
