a look at the performance of sap's modern uis
DESCRIPTION
Making the case for the consideration of network topologies on the performance of UI technologies, and presenting some sample measurements across traditional SAP GUI, WebDynpro for ABAP, and the UI5-based Fiori apps.TRANSCRIPT
Sascha Wenninger
A Look at the Performance of SAP’s Modern UI Technologies
programming.oreilly.com/2009/07/velocity-‐making-‐your-‐site-‐fast.html
programming.oreilly.com/2009/07/velocity-‐making-‐your-‐site-‐fast.html
h<ps://secure.flickr.com/photos/47598386@N00/1659336160
But we’re not Google!
h<ps://secure.flickr.com/photos/eelssej_/394781835/
What Now?
• Understand your Environment • Assess your Technologies
Your Environment
• Who? • Where? • How many? • How criRcal is performance?
MMG
Client Time
Network Time
Server Time
Perceived Response Time
Client Time
Network Time
Server Time
Perceived Response Time
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.
1ms ≈ 100km* in fibre
*Round-‐Trip distance
h<p://www.igvita.com/2012/07/19/latency-‐the-‐new-‐web-‐performance-‐bo<leneck/
www.wondernetwork.com/pings
wheresiYast.com
Performance CriIcality
Arguable …but… Non-‐core ma<ers too! Context
Generic
Core
Measure Early, Measure OLen
(and not just the server!)
FREE!
FREE!
FREE!
FREE!
FREE!
$50 FREE!
h<ps://secure.flickr.com/photos/pasukaru76/4016842259/
Conduct Performance Assessments
Off-‐The Shelf
• Helps to set expectaRons • “Eyes wide open” • Buy Rme – configure WAN accelerators properly – deploy caching proxies in remote locaRons – 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 Bo<om 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
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 Bo<om 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
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 Bo<om 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
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 Bo<om 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
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 Bo<om 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
Make Fewer Requests
Speed up Round-‐Trips
Reduce Payloads
Browser Efficiencies
0% Cacheable
3 Round Trips
Download: 15 kB
Opening PA20
+ Few round-trips + Small payloads + Efficient
- Single threaded à Not good for latency
- Proprietary
à no caching - Uncool
Web Dynpro ABAP
95% Cacheable
74 Round Trips
Download: 1,300 kB
Web Dynpro Leave Request
h<p://www.flickr.com/photos/mr_t_in_dc/5920636730
Fiori (Wave 1)
Download: 2,770 kB
Fiori Leave Request
56 Round Trips
84% Cacheable
Payload (kB)
0
500
1000
1500
2000
2500
3000
Fiori Web Dynpro 0
10 20 30 40 50 60 70 80
Fiori Web Dynpro
Chaoness
IniRal
Cached
Google’s mod_pagespeed
Automagic server-‐side web page opRmisaRon • Recompresses images • Combines CSS & JavaScript files • Applies minificaRon • etc. etc.
37% Fewer Requests
Google PageSpeed Score: 88 ! 98
YSlow Score: 83 ! 93
It works:
• Fiori is JavaScript-‐driven: – Very minimal HTML – JS loads more JS, other resources to build page
• PageSpeed can only opRmise HTML & references • <10% reducRon in load Rme, resources
Mastering SAP Technologies 2014 | 45
…but not with Fiori…
OpportuniIes
• Proxy Caches/private CDN • WAN Accelerators
Fiori and Web Dynpro use lots of public-‐cacheable content!
Just Browser Caching isn’t enough!
Mastering SAP Technologies 2014 | 47
Yahoo @ 2007:
40-‐60% of users visit www.yahoo.com with empty cache!
20% of all page views done with empty cache!
h<p://www.yuiblog.com/blog/2007/01/04/performance-‐research-‐part-‐2/
OpportuniIes
• Wave 2+ • Cordova/Phonegap container apps • Custom build for performance-‐criRcal scenarios.
Greatly improved architecture Performance is high on the agenda
Make Fewer Requests
Speed up Round-‐Trips
Reduce Payloads
Browser Efficiencies
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 twi<er: @igrigorik, @souders, @bluesmoon, @dakami, @guypod, @mnot, @stoyanstefanov, @agl__ (and their blogs!)
• Blogs: h<ps://insouciant.org, h<p://highscalability.com
+61 403 933 472
BlueT.com.au
@sufw
Mastering SAP Technologies 2014 | 52
Sascha Wenninger