RelativeCI

In-depth bundle analysis and monitoring

Why web application bundle size matters

Median page weight over time - Web Almanac 2024 - Page weight

According to the Web Almanac 2024 report, the median page weight of websites increased with 296% for desktop and 702% for mobile between June 2012 and October 2024. The majority of the page weight came from images, while the JavaScript cost was approximately half that of the images.

The web continues to grow and evolve each year, and with that growth comes exciting opportunities and challenges. Understanding the importance of web application bundle size can help build and deliver performant and secure modern user experiences.

Bundled dependencies increasesince 2020

+202%

RelativeCI open source projects

Modern web applications are growing in size and complexity

The improvements in developer tools, including frameworks, meta frameworks, bundlers, and UI libraries, are enabling us to create web applications that closely resemble native apps in terms of user experience and functionality.

The increasing size and complexity of these applications present challenges when evaluating the impact of changes on the application bundle size and, consequently, on user performance. Unoptimized assets, unnecessary or duplicate code, and bloated dependencies can easily sneak in, leading to larger application bundles and potential performance regressions or errors.

Data gathered from RelativeCI open-source projects shows that a modern web application now bundles an average of 139 third-party dependencies, a 202% increase since 2020. Additionally, we found that an average project bundles 15 duplicate dependencies.

Mobile internet traffic share - Internet Traffic from Mobile Devices

Most users access internet through mobile

It is not only the size of websites that is growing but the usage of the web as well. According to Josh Howarth's data from June 2024, 60% of global website traffic comes from mobile devices while 92.3% of internet users access it via their mobile phones. The global estimate for mobile usage alone is that there are 4.32 billion mobile users of which a large proportion (close to 70%) is from the African market.

As a developer using a fast broadband connection or better, it is easy to forget that most people occasionally use slow and potentially unreliable mobile connections. The theme of mobile usage ties back to size as it highlights the importance of designing your websites mobile friendly.

Web application bundle size is a significant part of this given not only because of loading costs but in addition hardware related costs as it is well understood that big JavaScript payloads have their cost especially on mobile as shown by Tim Kadlec.

To simulate a slow connection when testing, consider using Network throttling settings in Chrome DevTools.

Conversion increasewhen improving the page loading time with 1s

+2%

Walmart technical deep dive into Web Performance

Slow sites decrease user satisfaction

Slower sites lead to decreased user satisfaction as reported by Basalla et al. in "On Latency of E-Commerce Platforms".

By improving the latency of your site, you will likely have more satisfied customers while increasing the conversion. This realization is one of the reasons why particularly e-commerce focused companies invest on performance related work.

Abandonment decreasewhen all Core Vitals thresholds are met

-24%

The Science Behind Web Vitals

Performant sites have better search visibility

Web application performance is a part of technical Search Engine Optimization (SEO) as explained by Eslamdoust in An overview of search engine optimization techniques.

The good thing is that unlike other SEO related factors, it is one of the easiest to optimize if you have the technical know-how.

How to fix web application bundle size?

The application bundle size can be addressed in various ways at different levels. Often, there are quick wins, such as image optimization (using WebP or deferring loading, for instance), while other types of optimizations require more extensive refactoring.

You can consider the following steps:

Step 1: Analyze the current web performance status

Use a tool like Google's PageSpeed Insights, WebPageTest, or sitespeed.io to evaluate the current performance status of your web application.

Step 2: Analyze the bundle size

Use RelativeCI to analyze the size from the bundle perspective, helping you to understand the composition of your application.

Step 3: Extract proposed improvements

Go through the proposed improvements and prioriteze the work based on impact and complexity.

Step 4: Address and validate the changes

Resolve the issues, validate their impact and repeat the process until you have reached a good spot.

Once you have application bundle size on your radar, it is a good idea to keep on monitoring from different angles to make sure you remain in a good spot.

Conclusion

As mentioned early on, application bundle size is a growing challenge. The increasing complexity of the web applications, along with the rise in mobile usage, often in situations where connection speeds are limited, compounds the problem even more.

Understanding and fixing bundle size issues on every change allows you to deliver fast and responsive user experience while improving SEO.

Understand your application bundle size

Get started for free Learn more