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.
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.
This event occurs when users open a new page in a browser.
This event occurs when users navigate to different pages within Jira's SPA.
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:
- People aren't always using the latest browsers (e.g. the usage of Chrome 80 is larger than Chrome 81).
- Pollinator (our production synthetic monitoring tool) uses Chrome 73 and corresponds to a tangible number of page view events, which skews the distribution.
- A large number of requests are from browsers that are older than the previous version (Chrome 79 is top 5).
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.