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 2014
27. 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
28. 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
29. 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
30. 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
31. 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
Speed up Round-Trips
32. 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
Speed up Round-Trips
Reduce Payloads
33. 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
Speed up Round-Trips
Reduce Payloads
Browser Efficiencies
34. Make Fewer Requests
Speed up Round-Trips
Reduce Payloads
Browser Efficiencies
SAP TechEd && d-code 2014
37. + Few round-trips
+ Small payloads
+ Efficient
SAP TechEd && d-code 2014
- Single threaded
Not good for latency
- Proprietary
no caching
- Uncool
43. SAP TechEd && d-code 2014
Payload (kB)
3000
2500
2000
1500
1000
500
0
Initial
Cached
Fiori Web Dynpro
44. 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
45. 37%Fewer Requests
Google PageSpeed Score: 88 98
SAP TechEd && d-code 2014
YSlow Score: 83 93
It works:
46. …but not with UI5…
• UI5 is JavaScript-driven:
– Very minimal HTML
– JS loads more JS, other resources to build page
• PageSpeed can only optimise HTML & references
SAP TechEd && d-code 2014
47. For Custom UI5 Apps…
grunt-contrib-uglify
Google’s psol (if on Linux)
Closure Compiler
YUI Compressor
…
See also session UXP301
SAP TechEd && d-code 2014
48. SAP TechEd && d-code 2014
“Don’t worry. The browser will cache it”
49. Just Browser Caching isn’t enough!
SAP TechEd && d-code 2014
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/
50. Make Fewer Requests
Speed up Round-Trips
Reduce Payloads
Browser Efficiencies
SAP TechEd && d-code 2014
52. Content Delivery Network
SAP TechEd && d-code 2014
https://commons.wikimedia.org/wiki/File:NCDN_-_CDN.png
53. e.g. Amazon CloudFront User in Lima, Peru
SAP TechEd && d-code 2014
Server in Northern CA
~8,500km ATCF*
Ideal RTT: >85ms
Real-world RTT: 165ms
*as the crow flies
54. SAP TechEd && d-code 2014
Fiori Leave Request
from empty cache: 43
sequential requests
165ms × 43 = 7s just in
network latency
56. SAP TechEd && d-code 2014
CloudFront Edge locations in
Rio & São Paulo
~3,800km ATCF*
Ideal RTT: >38ms
Real-world RTT: 105ms
43 requests are on the critical
path.
32 are cacheable
32
24
57. SAP TechEd && d-code 2014
Fiori Leave Request
Up to 32 cacheable requests
could go to CDN
Potential saving of 2s (28%)
32
24
58. Potential Downsides
• 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.
SAP TechEd && d-code 2014
60. Network Acceleration / WAN Optimisation
• 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
SAP TechEd && d-code 2014
61. SAP TechEd && d-code 2014
Fiori Leave Request
Cacheable requests served by
local caching node.
~0ms latency
Potential saving of 5s (70%)!
32
24
62. Real-World Experience
• 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
SAP TechEd && d-code 2014
63. Fiori Opportunities
• Wave 2+
• Cordova/Phonegap/UI5 Kapsel container apps
• Custom build for performance-critical scenarios.
SAP TechEd && d-code 2014
Improved architecture
Performance is high on the agenda
64. Make Fewer Requests
Speed up Round-Trips
Reduce Payloads
Browser Efficiencies
SAP TechEd && d-code 2014
65.
66. 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 twitter: @igrigorik, @souders, @bluesmoon, @dakami,
@guypod, @mnot, @stoyanstefanov, @agl__ (and their blogs!)
Blogs: https://insouciant.org, http://highscalability.com
SAP TechEd && d-code 2014