![Page 1: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/1.jpg)
Sascha Wenninger
A Look at the Performance of SAP’s Modern UI Technologies
![Page 2: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/2.jpg)
programming.oreilly.com/2009/07/velocity-‐making-‐your-‐site-‐fast.html
![Page 3: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/3.jpg)
programming.oreilly.com/2009/07/velocity-‐making-‐your-‐site-‐fast.html
![Page 4: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/4.jpg)
h<ps://secure.flickr.com/photos/47598386@N00/1659336160
But we’re not Google!
![Page 5: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/5.jpg)
h<ps://secure.flickr.com/photos/eelssej_/394781835/
![Page 6: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/6.jpg)
![Page 7: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/7.jpg)
What Now?
• Understand your Environment • Assess your Technologies
![Page 8: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/8.jpg)
Your Environment
• Who? • Where? • How many? • How criRcal is performance?
![Page 9: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/9.jpg)
MMG
![Page 10: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/10.jpg)
Client Time
Network Time
Server Time
Perceived Response Time
![Page 11: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/11.jpg)
Client Time
Network Time
Server Time
Perceived Response Time
![Page 12: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/12.jpg)
![Page 13: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/13.jpg)
![Page 14: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/14.jpg)
www.submarinecablemap.com
![Page 15: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/15.jpg)
www.telegeography.com
![Page 16: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/16.jpg)
www.telegeography.com
![Page 17: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/17.jpg)
To USA www.telegeography.com
![Page 18: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/18.jpg)
Bandwidth !== Latency
• More bandwidth is easy. • Speeding up light is not.
1ms ≈ 100km* in fibre
*Round-‐Trip distance
![Page 19: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/19.jpg)
h<p://www.igvita.com/2012/07/19/latency-‐the-‐new-‐web-‐performance-‐bo<leneck/
![Page 20: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/20.jpg)
www.wondernetwork.com/pings
![Page 21: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/21.jpg)
wheresiYast.com
![Page 22: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/22.jpg)
Performance CriIcality
Arguable …but… Non-‐core ma<ers too! Context
Generic
Core
![Page 23: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/23.jpg)
Measure Early, Measure OLen
(and not just the server!)
![Page 24: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/24.jpg)
![Page 25: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/25.jpg)
FREE!
FREE!
FREE!
FREE!
FREE!
$50 FREE!
![Page 26: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/26.jpg)
h<ps://secure.flickr.com/photos/pasukaru76/4016842259/
Conduct Performance Assessments
![Page 27: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/27.jpg)
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
![Page 28: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/28.jpg)
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
![Page 29: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/29.jpg)
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
![Page 30: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/30.jpg)
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
![Page 31: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/31.jpg)
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
![Page 32: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/32.jpg)
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
![Page 33: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/33.jpg)
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
![Page 34: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/34.jpg)
Make Fewer Requests
Speed up Round-‐Trips
Reduce Payloads
Browser Efficiencies
![Page 35: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/35.jpg)
![Page 36: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/36.jpg)
0% Cacheable
3 Round Trips
Download: 15 kB
Opening PA20
![Page 37: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/37.jpg)
+ Few round-trips + Small payloads + Efficient
- Single threaded à Not good for latency
- Proprietary
à no caching - Uncool
![Page 38: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/38.jpg)
Web Dynpro ABAP
![Page 39: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/39.jpg)
95% Cacheable
74 Round Trips
Download: 1,300 kB
Web Dynpro Leave Request
![Page 40: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/40.jpg)
h<p://www.flickr.com/photos/mr_t_in_dc/5920636730
Fiori (Wave 1)
![Page 41: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/41.jpg)
Download: 2,770 kB
Fiori Leave Request
56 Round Trips
84% Cacheable
![Page 42: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/42.jpg)
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
![Page 43: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/43.jpg)
Google’s mod_pagespeed
Automagic server-‐side web page opRmisaRon • Recompresses images • Combines CSS & JavaScript files • Applies minificaRon • etc. etc.
![Page 44: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/44.jpg)
37% Fewer Requests
Google PageSpeed Score: 88 ! 98
YSlow Score: 83 ! 93
It works:
![Page 45: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/45.jpg)
• 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…
![Page 46: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/46.jpg)
OpportuniIes
• Proxy Caches/private CDN • WAN Accelerators
Fiori and Web Dynpro use lots of public-‐cacheable content!
![Page 47: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/47.jpg)
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/
![Page 48: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/48.jpg)
OpportuniIes
• Wave 2+ • Cordova/Phonegap container apps • Custom build for performance-‐criRcal scenarios.
Greatly improved architecture Performance is high on the agenda
![Page 49: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/49.jpg)
Make Fewer Requests
Speed up Round-‐Trips
Reduce Payloads
Browser Efficiencies
![Page 50: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/50.jpg)
![Page 51: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/51.jpg)
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
![Page 52: A Look at the Performance of SAP's Modern UIs](https://reader033.vdocuments.site/reader033/viewer/2022051609/546ca57ab4af9f842c8b5191/html5/thumbnails/52.jpg)
+61 403 933 472
BlueT.com.au
@sufw
Mastering SAP Technologies 2014 | 52
Sascha Wenninger