Improving application front-end performance with HTTP/2
With a single change, we saw immediate improvements that made the whole platform perform 4 times better
by Christophe Dame, Bonitasoft Consultant
One of the very cool aspects of working as a consultant for Bonitasoft is the variety of subjects we are covering. Recently, I had the opportunity to work with a Bonitasoft customer experiencing widespread slow performance with their Bonita platform.
I analyzed the backend behavior and identified a few inefficiencies. However, that was not enough to explain the slow performance.
Next I had a look at the front-end with Chrome development tools (F12) and at the HTTP requests (network tab) and found some issues:
- No compression
- Static resources not cached
- Cascading groups of 8 HTTP requests (HTTP/1)
- Repeated and slow SSL negotiation
This customer has Bonita running on Tomcat. I made some quick modifications to the server.xml to add compression and the web.xml to use a servlet filter to cache some resources.
We could see immediate improvements. Some requests were skipped (cached) and others were slightly faster. So that was a good first step, but I wanted to do better.
So, I turned to another Chrome tool called Lighthouse (last tab in the development tools). Lighthouse gave the platform an overall result of 10/100. The report highlighted the biggest problems:
- JS/CSS resources loaded before the body
- Too many of them!
- No use of HTTP/2 protocol
I chose to kill two (three) birds with one stone by implementing HTTP/2, a quick and easy solution.
Why use HTTP/2 protocol?
HTTP/2 offers some key advantages over HTTP/1:
- The browser opens only one connection to your server, and this single connection is used to load all the resources. No more repeated SSL negotiation.
- It offers multiplexing. You’re not limited to 8 concurrent requests, which minimized the cost of not deferring JS/CSS resources.
- It uses a binary framing layer and has a better header compression, making requests smaller and faster to parse.
With this single change, we saw immediate improvements that made the whole platform usable. The 40/100 Lighthouse score was the perfect illustration: 4 times better.
How to implement HTTP/2
Bonita runs on Tomcat 8.5, so I’ll give some highlights on how to do it on this platform. First, some guidelines:
- Java 8 doesn’t support HTTP/2 natively. I had to upgrade to JDK 11 (which is compatible with Bonita)
- HTTP/2 is only compatible with SSL (even self-signed certificate for development purposes)
- If you have very slow endpoints, you should either improve them or add a parameter “readTimeout” in the UpgradeProtocol tag.
Following an example of the connector configuration in the server.xml. Note that compression is configured at the UpgradeProtocol level :
<Connector SSLEnabled=”true” maxThreads=”300" port=”8443” protocol=”org.apache.coyote.http11.Http11Nio2Protocol” scheme=”https”secure=”true”><SSLHostConfig certificateVerification=”none” sslProtocol=”TLS”><CertificatecertificateKeystoreFile=”${catalina.base}/conf/ssl/keystore.jks”certificateKeystorePassword=”keystorePassword”certificateKeystoreType=”JKS”></Certificate></SSLHostConfig><UpgradeProtocolclassName=”org.apache.coyote.http2.Http2Protocol”compression=”on”compressionMinSize=”1024"compressionMimeType=”text/html,text/xml,text/plain,text/css,text/javascript,application/javascript”readTimeout=”20000"/></Connector>
I hope you enjoyed this article and that you will be eager to implement HTTP/2 protocol in your own projects!