Improving application front-end performance with HTTP/2

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.

HTTP2 logo
HTTP/2 magic at work!

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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bonitasoft

Bonitasoft

Bonitasoft helps innovative companies worldwide deliver better digital user experiences — for customers and employees — on the Bonita application platform.