RelativeCI

Automated bundle analysis, reviews and monitoring

Why web application
bundle size matters

Analyzing, reviewing and monitoring application bundle size is essential to ship modern performant web applications.

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

According to the Web Almanac 2024 report, the median page weight of websites increased by 296% on desktop and 702% on mobile between June 2012 and October 2024. Most of that page weight came from images, while JavaScript accounted for roughly half as much as images.

The web continues to grow and evolve each year, bringing both new opportunities and new challenges. Understanding the importance of web application bundle size helps you build and deliver performant, secure, and modern user experiences.

Bundled dependencies increasesince 2020

+202%

RelativeCI open source projects

Modern web applications are growing in size and complexity

Improvements in developer tooling, including frameworks, meta-frameworks, bundlers, and UI libraries, make it possible to build web applications that increasingly resemble native apps in user experience and functionality.

As applications grow in size and complexity, it becomes harder to evaluate how changes affect bundle size and, in turn, user-facing performance. Unoptimized assets, unnecessary or duplicate code, and bloated dependencies can easily slip in, leading to larger bundles and potential performance regressions.

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, the average project includes 15 duplicate dependencies.

*Mobile internet traffic share - Internet Traffic from Mobile Devices*

Most users access internet through mobile

Web usage is growing, and mobile now dominates how people access the internet. 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 the internet on their phones. Globally, there are an estimated 4.32 billion mobile users, with a large share concentrated in Africa.

As a developer with access to a fast broadband connection, it is easy to forget that many people regularly rely on slow or unreliable mobile networks. This makes mobile-first performance especially important.

Web application bundle size is a significant part of that equation, not only because of download costs, but also because of device-related processing costs. Large JavaScript payloads are especially expensive on mobile devices, as shown by Tim Kadlec.

To simulate a slow connection during testing, use network throttling 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 reduce user satisfaction, as reported by Basalla et al. in "On Latency of E-Commerce Platforms".

By improving your site's latency, you can increase customer satisfaction and improve conversions. This is one reason why performance work is a priority, especially for e-commerce companies.

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?

Application bundle size can be addressed in different ways and at different levels. There are often quick wins, such as image optimization by using WebP or lazy loading, while other 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 of your web application.
Step 2: Analyze the bundle size
Use RelativeCI to analyze bundle size and understand the composition of your application.
Step 3: Identify and prioritize improvements
Review the proposed improvements and prioritize the work based on impact and complexity.
Step 4: Implement and validate the changes
Resolve the issues, validate their impact, and repeat the process until you reach a good baseline.

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

Conclusion

Application bundle size is a growing challenge. As web applications become more complex and mobile usage continues to rise, especially on slower or less reliable connections, the impact becomes harder to ignore.

Understanding bundle size and addressing regressions continuously helps you deliver faster, more responsive user experiences while also supporting better search visibility.

Understand your application bundle size

Get started for free Learn more

Why web application bundle size matters