Performance in Jira front-end: using modern bundles to improve load time

This is the second blog in our three-part series covering some recent work in Jira cloud front-end to reduce the amount of JavaScript that’s downloaded when loading pages. Part 1 focused on the process of discovering and implementing a relatively small performance fix with a significant impact.

In this blog, we will discuss the results we saw from a project to migrate to the usage of “modern bundles” within the Jira front-end for more recent browser versions.

What are modern bundles?

Modern bundles are a popular technique that can achieve performance wins by serving a less transpiled version of frontend bundles to the recent version of browsers.

By default, we transpile and polyfill our javascript code to make sure it will run well on all the browsers we support. This usually means assuming as few browser capabilities as possible (for example, IE11). As a result, we apply a lot of code transformations and polyfills. What we could do instead is produce two separate bundles: the default one for the less capable browsers and a modern one (hence the name) for the more recent browsers. Then, at run-time on a web-server, we can pick one or the other depending on the browser making a request, as identified by the User-Agent header.

What are modern browsers?

In Jira front-end, we follow the list of browsers supported by cloud (IE11 was on the list of supported browsers at that time):

ie >= 11
last 1 Edge version
last 1 Firefox version
last 1 Chrome version
last 1 Safari version
last 1 iOS version
last 1 ChromeAndroid version

Based on that, we define modern browsers as every browser on the list, except for IE.

Modern bundles experiment

On the web app build side, we need to add a separate build that will build modern bundles and deploy them to a known location. On the web-server side, we need to distinguish between modern and non-modern browsers and serve the corresponding build to customers based on their browser. Once we have all our bases covered, we’re ready to run a controlled 50:50 experiment on production to get the numbers.

Comparing time-to-interactive (TTI) between default and modern on Chrome 81 with babel 7.9.5 transpiled bundles

Data was gathered during a full 24-hour business day across all production instances on a 50/50 A/B test.

Initial loads 

This event occurs when users open a new page in a browser.

SPA transitions

This event occurs when users navigate to different pages within Jira’s SPA.

Bundle size

Expanding the definition of modern browsers

During the experiments, we noticed we were serving non-modern bundles to about 8% of our customers. This is a lot more than the share of IE11 users anticipated. We ran a query to identify the top 20 browser distribution for the last week for the issue view page:

There are three important things to notice in the chart:

1. People aren’t always using the latest browsers (e.g. the usage of Chrome 80 is larger than Chrome 81).
2. Pollinator (our production synthetic monitoring tool) uses Chrome 73 and corresponds to a tangible number of page view events, which skews the distribution.
3. A large number of requests are from browsers that are older than the previous version (Chrome 79 is top 5).

The main takeaway is that, although we guarantee Jira supports the latest version of browsers only, discarding slightly older browsers and serving non-modern javascript bundles to them will cause performance degradation for a significant portion of our customer base.

As a result, we expanded the definition of modern browsers to:

last 2 Edge version
last 2 Firefox version
last 5 Chrome version
last 2 Safari version
last 2 iOS version
last 2 ChromeAndroid version

This will allow us to serve modern bundles to a larger group of users without compromising too much on modern bundle quality.

Distribution of popular outdated browsers (Chrome 73.0 is excluded to avoid skewing the results):

N.B. We rely on a pinned version of browserslist to define the latest versions of browsers. This means whenever a new version of the browser is released, we won’t automatically adjust the list of modern browsers we use – rather, it will happen the next time we bump browserslist. This lag causes us to serve modern bundles to an even larger portion of customers, the drawback being that the modern bundles we serve may be slightly less optimized. Fortunately, this difference is negligible for recent browsers.

Every improvement helps

The savings we gained from the migration to modern bundles are just one part of the larger program of work to improve page load performance in Jira Cloud. In performance work such as this, we rarely find that there is a single silver bullet. Each project we take on will give us a few hundred milliseconds of savings, and the overall program of performance work will add up to substantial improvements.