HTTP/2 to improve front-end performances with Bonita

One of the very cool aspects of working as a consultant for Bonita is the variety of subjects we are covering. Lately this summer, I had the opportunity to work with a customer experiencing widespread slow performances.

One of the very cool aspects of working as a consultant for Bonita is the variety of subjects we are covering. Lately this summer, I had the opportunity to work with a customer experiencing widespread slow performances.

I analyzed the backend behavior and could identify some inefficient developments. However, that was not enough to explain the slow performance feeling.

I turned my analysis to the front-end with Chrome development tools (F12) and had a look at HTTP requests (network tab) to spot some problems:

• No compression
• Static resources not cached
• Cascading groups of 8 HTTP requests (HTTP/1)
• Repeated and slow SSL negotiation

As Bonita is 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.

I could see immediate improvements. Some requests were skipped (cached) and others were slightly faster. That was a first step, but not enough.

So, I turned to another Chrome tool called Lighthouse (last tab from the development tools) that gave the platform an overall result of 10/100. The report was highlighting 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 major benefits over HTTP/1:

• The browser opens only one connection to your server and this connection is used to load all the resources: no more repeated SSL negotiation.
• It offers multiplexing: You are not limited to 8 concurrent requests anymore, minimizing the cost of not deferring JS/CSS resources.
• It uses a binary framing layer and has a better header compression, making the requests smaller and faster to parse.

With this single change, we could feel immediate improvements that made the whole platform usable. The 40/100 Lighthouse score was the perfect illustration: 4x times better.

How to implement HTTP/2?

Bonita is running 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">

<certificate certificatekeystorefile="${catalina.base}/conf/ssl/keystore.jks" certificatekeystorepassword="keystorePassword" certificatekeystoretype="JKS">

</certificate>

</sslhostconfig><upgradeprotocol classname="org.apache.coyote.http2.Http2Protocol" compression="on" compressionmimetype="text/html,text/xml,text/plain,text/css,text/javascript,application/javascript" compressionminsize="1024" readtimeout="20000">

</upgradeprotocol>

</connector>

I hope you enjoyed this article and that you will be eager to implement HTTP/2 protocol to your professional or personal projects!