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
