Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UI5 with Akamai - Introduction to the Content Delivery Network

270 views

Published on

UI5 with Akamai - Introduction to the Content Delivery Network

Published in: Technology
  • Be the first to comment

UI5 with Akamai - Introduction to the Content Delivery Network

  1. 1. ©2018 AKAMAI | FASTER FORWARDTM ©2018 AKAMAI | FASTER FORWARDTM UI5 with Akamai Introduction to the Content Delivery Network 20-JULY-2018
  2. 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. 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. 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. 5. ©2018 AKAMAI | FASTER FORWARDTM Akamai overview
  6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 20. ©2018 AKAMAI | FASTER FORWARDTM Minify the code with component preload: https://blogs.sap.com/2015/04/27/performance-improvement-with-component-preloadjs/
  21. 21. ©2018 AKAMAI | FASTER FORWARDTM ©2018 AKAMAI | FASTER FORWARDTM Q & A
  22. 22. ©2018 AKAMAI | FASTER FORWARDTM ©2018 AKAMAI | FASTER FORWARDTM THANK YOU gokul@akamai.com

×