A content delivery network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. This presentation discusses CDNs and Akamai's CDN services. It defines what a CDN is, why businesses need them to improve performance, how CDNs work by caching content at edge servers close to users, and demonstrates these concepts through tools and performance tests comparing content delivery from origins versus Akamai. The presentation also provides an overview of Akamai's products and services, and tips for optimizing UI5 and SAP applications for faster loading when using a CDN.

1. ©2018 AKAMAI | FASTER FORWARDTM
©2018 AKAMAI | FASTER FORWARDTM
UI5 with Akamai
Introduction to the Content Delivery Network
20-JULY-2018

2. ©2018 AKAMAI | FASTER FORWARDTM
©2018 AKAMAI | FASTER FORWARDTM
Agenda What is a CDN?1
Why do you need a CDN?2
How does a CDN work?3
Demo/Hands-On4
Q & A5
Gokul Anand E
SolutionsArchitect II

3. ©2018 AKAMAI | FASTER FORWARDTM
©2018 AKAMAI | FASTER FORWARDTM
• Content Delivery Network
• Highly-distributed platform of servers optimized to deliver content
quickly.
• Dispersed across many physical and network locations, in order to
respond directly to end user requests.
• Fast and secure delivery.
• It acts as an intermediary between a content server(origin) and its end
users or clients.
What is a CDN?1

4. ©2018 AKAMAI | FASTER FORWARDTM
RELIABLE SECURE
234000+ servers | 100% availability | 15-30% of daily Internet traffic
FAST
Why do you need a CDN?2 To Improve Performance

5. ©2018 AKAMAI | FASTER FORWARDTM
Akamai overview

6. ©2018 AKAMAI | FASTER FORWARDTM
Why Akamai for Cloud Delivery?
• Akamai Intelligent Platform
• Offload: Reduce requests to cloud
origins and cache at the Edge.
• Performance: Accelerate dynamic
content.
• Security: Weakness of cloud providers;
Lock down cloud origins.
• Availability: 100% Availability SLA;
• Hybrid Clouds / Multi-DC: Akamai is
cloud provider agnostic.
• Routing: Geo-based routing based on
origin locations; flexible routing rules.
rules.
• DevOps: developer.akamai.com
Cloud Infrastructure Cloud Delivery (Akamai)
Includes technology tools to build and
operate servers, storage, and computing for
digital applications
Includes automated intelligence and
machine learning to route, accelerate,
secure, and analyze digital application
performance to maximize business
outcomes
Akamai and Cloud Providers

7. ©2018 AKAMAI | FASTER FORWARDTM
©2018 AKAMAI | FASTER FORWARDTM
Running over the platform is Akamai’s Intelligent software that enables high-performing and secure
web experiences, to any device, anywhere.
WEB PERFORMANCE
Web users
MEDIA DELIVERY
Web users
CLOUD SECURITY
Cloud and Data center
infrastructure
ENTERPRISE
Branch users
Akamai Product Portfolio
©2018 AKAMAI | FASTER FORWARDTM

8. ©2018 AKAMAI | FASTER FORWARDTM
Edge closest
to end-user
Edge closest
to origin
Akamai Intelligent
Platform
DNS
Resolution
Before using Akamai
a.b.com A 1.2.3.4
After using Akamai
a.b.com CNAME a.b.com.edgekey.net
a.b.com.edgekey.net A 6.7.8.9
Akamai
Configuration
Hostname
a.b.com
Origin Hostname
origin-a.b.com A 1.2.3.4
How does a CDN work?3
Origin
End users

9. ©2018 AKAMAI | FASTER FORWARDTM
Bootstrapping from Content Delivery Network
Bootstrapping: Loading and Initializing
To use OpenUI5 features in your HTML
page, you have to load and initialize the
SAPUI5 library.
OpenUI5 can either be loaded locally with a relative path from a Web server or externally from a
Content Delivery Network (CDN) using an absolute path.

10. ©2018 AKAMAI | FASTER FORWARDTM
©2018 AKAMAI | FASTER FORWARDTM
• Install (Pre-requisite)
• Modify Headers for Google Chrome™ - Chrome Web Store
• Add Akamai pragma headers
• Demo URL: https://openui5.hana.ondemand.com/
• We will see:
• DIG/nslookup command
• HTTP/2
• TCP_HIT
• Network – hosts.txt file spoofing
• Performance comparison
Demo/Hands-on4

11. ©2018 AKAMAI | FASTER FORWARDTM
Tools:
• DIG command
• NSLOOKUP command
• www.digwebinterface.com
How to check if a hostname is using Akamai?
• Hostname
• Origin hostname

12. ©2018 AKAMAI | FASTER FORWARDTM
How to check CDN is enabled in UI5? (Browser-level)
Enable CDN
UI5 libraries are loaded from CDN URL
https://openui5.hana.ondemand.com
Disable CDN
UI5 libraries are loaded from Origin
https://openui5.eu1.hana.ondemand.com

13. ©2018 AKAMAI | FASTER FORWARDTM
How to check CDN is using HTTP/2?
CDN is enabling HTTP/2, to verify HTTP/2 is being used:
- Go to Chrome > Developer Tools
- Select Network graph
- Load page e.g. https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/cart/webapp/index.html
- Check protocol column for “h2”

14. ©2018 AKAMAI | FASTER FORWARDTM
Performance comparison - With and without Akamai
• Performance tests brought improvements of up
to 40% (measured for Fiori Launchpad (FLP).
• Requests to origin (either as dynamic requests
or 404s) are causing long roundtrips
• Avoid synchronous requests and 404
https://blogs.sap.com/2017/06/08/fiori-for-s4hana-performance-tips-and-tricks-in-s4hana-1610-on-premise/

15. ©2018 AKAMAI | FASTER FORWARDTM
Performance comparison
• Performance tests brought improvements of up to 40%
• Requests to origin (either as dynamic requests or 404s) are causing long roundtrips
• Try to avoid synchronous requests and 404 as much as you can
Performance comparison by http://www.webpagetest.org
From
origin
US1
From
origin
EU1
From
Akamai
Compared access by Chrome:
- From 5 different locations:
• Sao Paulo
• Mumbai
• Sydney
• Frankfurt
• Virginia
- Results from: Origin US1
- Results from: Origin EU1
- Results from: Akamai
https://openui5.hana.ondemand.com/test-
resources/sap/tnt/demokit/toolpageapp/webapp/in
dex.html

16. ©2018 AKAMAI | FASTER FORWARDTM
Performance comparison
Performance comparison by apache benchmark ab -n 100 –c 10 url
Requesting from origin: openui5.eu1.ondemand.com
Total time: 16.268 seconds
Requesting from CDN: openui5.hana.ondemand.com
Total time: 10.141 seconds

17. ©2018 AKAMAI | FASTER FORWARDTM
How to check if the CDN is caching an asset?
To verify an asset is being cached:
1. Add “Modify Headers” extension from Google Chrome Store.
2. Add Akamai Debug headers to your requests.
(Pragma: akamai-x-cache-on, akamai-x-check-cacheable, akamai-x-get-cache-key, ...)
3. Go to Chrome > Developer Tools
4. Select Network graph.
5. Load page e.g. https://openui5.hana.ondemand.com
6. Check responses for Akamai-Cache (responses with like “TCP_HIT, TCP_MEM_HIT” came from cache)

18. ©2018 AKAMAI | FASTER FORWARDTM
SAP articles on Performance Acceleration
Basic articles about improving performance – especially when using CDN
SAPUI5 Application Startup Performance – Best Practices (Oct 2016):
https://blogs.sap.com/2016/10/29/sapui5-application-startup-performance-best-practices/
Step 1: Loading SAPUI5 libraries asynchronously
Step 2: Using the event attachInit of the SAPUI5 core
Step 3: Use the AKAMAI network to reduce latency effects
Step 4: Optimizing the application resources
Step 5: Using the init event of the Component
SAPUI5 Application Startup Performance – Advanced Topics (Oct 2016):
https://blogs.sap.com/2016/11/19/sapui5-application-startup-performance-advanced-topics/
1. Asynchronous Component Loading
2. Language fallback causing 404s for properties files
3. Usage of OData Model V2
4. Use model preload feature
5. Eliminate all 404s

19. ©2018 AKAMAI | FASTER FORWARDTM
Language fallback causing 404s for properties files
Let’s have a closer look at the network trace again for my i18n file:
First step, let’s rename our i18n file to i18n_en.properties:
Next, let’s configure SAPUI5 to only use this language from now on:
Note: data-sap-ui-language=”en”

20. ©2018 AKAMAI | FASTER FORWARDTM
Minify the code with component preload:
https://blogs.sap.com/2015/04/27/performance-improvement-with-component-preloadjs/

21. ©2018 AKAMAI | FASTER FORWARDTM
©2018 AKAMAI | FASTER FORWARDTM
Q & A

22. ©2018 AKAMAI | FASTER FORWARDTM
©2018 AKAMAI | FASTER FORWARDTM
THANK YOU
gokul@akamai.com