In this blog, I am going to share my experience on big user experience improvement after enabled HTTP/2 feature in NetWeaver Gateway and Web Dispatcher in my recent two SAPUI5 and Fiori implementation projects.
If you have done any web page/site/application design and development, you must know HTTP 1.1 protocol. This is the communication protocol between browser and web server. Browser sends one resource request to web server and then web server returns requested resource to browser. So, in general one request for one resource, static content (image, JavaScript, CSS, and audio/video...etc.) gets to cache in user's computer disc to shorten waiting time when opening web page, because one round-trip can only request a file.
HTTP/2 (AKA h2 or HTTP 2.0) is the second major version of HTTP communication protocol. The protocol got approved in 2015 by IETF (Internet Engineering Task Force), and is widely adapted by all major web sites and browsers (IE, Firefox, Chrome, Safari,...). You can check RFC 7540 for more detail information. New version brings many improvements comparing to its previous version, and one new features call 'Multiplexing' helps browser sending multiple resource requests in parallel inside single HTTP/2 connection. See below diagram to get a quick understand of this.
Above diagram explains that under HTTP/2, browser can send multiple resource requests in in parallel inside one TCP connection. This improvement brings less waiting time, quicker response and users get better user experience from your solution.
NetWeaver Gateway version 7.51, Web Dispatcher 7.49 both support HTTP/2 (please cross check blog https://blogs.sap.com/2016/10/19/connectivity-news-abap-7.51/).
add profile parameter icm/HTTP/support_http2=true to the system profile.
There is a prerequisite for running communication under HTTP/2, it must be HTTPS with at least TLS 1.2 encryption. Although in IETF RFC 7540, it doesn't mention that HTTP/2 has to run under HTTPS but the reality is that all browser vendors make it only work when communication is in encryption mode. Apart from above, if you want to use TLS 1.1 or higher, COMMONCRYPTOLIB version 8.4.31 or higher is required.
Below screenshot shows a Fiori launchpad loading history in Chrome. Browser is connecting to a Fiori Launchpad via SAP Web Dispatcher 7.49 from the Internet. You can see column "Protocol" is showing what protocol is used by browser to request the resources. h2 means HTTP/2. The 5 JavaScript resources requests after first FioriLaunchpad.html request are all running in parallel as you can see they all start at same time in column "Waterfall". In summary, from first request to Launchpad display finished, it transferred 2.3 MB, 27 web requests and spent only 1.59 seconds. Other browsers (IE11, Edge, FireFox) have similar result.
Below screenshot is captured from same server plus with HTTP/1.1. 28 HTTP requests, transferred same amount of data, but took 9.78 second to finish Fiori Launchpad loading. 6 times longer than running under HTTP/2. This is a huge difference and my client was quite amazed by this small change but bring great experience.
If you are using Apache or IIS to be your frontline proxy server. That's ok, there are lots of information on the Internet about how to enable HTTP/2 support. You just need to find out whether you need to update the server or do some changes to enable it.
I was told by some clients that they felt their Fiori solution is running bit sluggish, especially when opening the app. My initial guess is because that's the time when browser download SAPUI5 library files. But, I must say app running slow might be the result of many reasons. It could be developer didn't create component-preload.js, could be bad programming, could be OData service got performance issue. If the app is developed by following SAP Design Guideline and taught in SAPUI5: UI Development Toolkit for HTML5 plus HTTP/2, then your users will not ask you why it's so slow to open the app.
HTTP vs HTTP/2
If you have done any web page/site/application design and development, you must know HTTP 1.1 protocol. This is the communication protocol between browser and web server. Browser sends one resource request to web server and then web server returns requested resource to browser. So, in general one request for one resource, static content (image, JavaScript, CSS, and audio/video...etc.) gets to cache in user's computer disc to shorten waiting time when opening web page, because one round-trip can only request a file.
HTTP/2 (AKA h2 or HTTP 2.0) is the second major version of HTTP communication protocol. The protocol got approved in 2015 by IETF (Internet Engineering Task Force), and is widely adapted by all major web sites and browsers (IE, Firefox, Chrome, Safari,...). You can check RFC 7540 for more detail information. New version brings many improvements comparing to its previous version, and one new features call 'Multiplexing' helps browser sending multiple resource requests in parallel inside single HTTP/2 connection. See below diagram to get a quick understand of this.
Above diagram explains that under HTTP/2, browser can send multiple resource requests in in parallel inside one TCP connection. This improvement brings less waiting time, quicker response and users get better user experience from your solution.
How to enable HTTP/2 in NetWeaver Gateway and Web Dispatcher?
NetWeaver Gateway version 7.51, Web Dispatcher 7.49 both support HTTP/2 (please cross check blog https://blogs.sap.com/2016/10/19/connectivity-news-abap-7.51/).
add profile parameter icm/HTTP/support_http2=true to the system profile.
There is a prerequisite for running communication under HTTP/2, it must be HTTPS with at least TLS 1.2 encryption. Although in IETF RFC 7540, it doesn't mention that HTTP/2 has to run under HTTPS but the reality is that all browser vendors make it only work when communication is in encryption mode. Apart from above, if you want to use TLS 1.1 or higher, COMMONCRYPTOLIB version 8.4.31 or higher is required.
Observe the difference from Fiori/SAPUI5 projects
Below screenshot shows a Fiori launchpad loading history in Chrome. Browser is connecting to a Fiori Launchpad via SAP Web Dispatcher 7.49 from the Internet. You can see column "Protocol" is showing what protocol is used by browser to request the resources. h2 means HTTP/2. The 5 JavaScript resources requests after first FioriLaunchpad.html request are all running in parallel as you can see they all start at same time in column "Waterfall". In summary, from first request to Launchpad display finished, it transferred 2.3 MB, 27 web requests and spent only 1.59 seconds. Other browsers (IE11, Edge, FireFox) have similar result.
Below screenshot is captured from same server plus with HTTP/1.1. 28 HTTP requests, transferred same amount of data, but took 9.78 second to finish Fiori Launchpad loading. 6 times longer than running under HTTP/2. This is a huge difference and my client was quite amazed by this small change but bring great experience.
Summary
If you are using Apache or IIS to be your frontline proxy server. That's ok, there are lots of information on the Internet about how to enable HTTP/2 support. You just need to find out whether you need to update the server or do some changes to enable it.
I was told by some clients that they felt their Fiori solution is running bit sluggish, especially when opening the app. My initial guess is because that's the time when browser download SAPUI5 library files. But, I must say app running slow might be the result of many reasons. It could be developer didn't create component-preload.js, could be bad programming, could be OData service got performance issue. If the app is developed by following SAP Design Guideline and taught in SAPUI5: UI Development Toolkit for HTML5 plus HTTP/2, then your users will not ask you why it's so slow to open the app.
References
- HTTP/2 Support
- https://blogs.sap.com/2016/10/19/connectivity-news-abap-7.51/
- Hypertext Transfer Protocol Version 2 (HTTP/2)
- 2092630 - Turning off SSLv3 on SAP NETWEAVER AS ABAP and AS JAVA, and on SAP HANA XS
- SAP Managed Tags:
21 Comments
