DEV Community: RelativeCI

Why web application size matters

Vio — Sun, 25 Aug 2024 14:31:57 +0000

Based on Web Almanac, the median page weight of websites increased 221% for desktop and 594% for mobile page loads between June 2012 and June 2022. In Web Almanac's report, in 2022 most of the page weight was contributed by images while the cost of JavaScript was roughly half of images. CSS and mobile contributed to size as well but in relatively minimal amounts. It is safe to say that the web is becoming more bloated each year. The question is, why does web application size matter and what can you do about it?

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 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 easily, consider using throttling at Chrome DevTools.

Slow sites lead to decreased user satisfaction on e-commerce

+2% conversion increase when improving the page loading time with 1s
Walmart technical deep dive into Web Performance

It is well understood that larger sites lead to decreased user satisfaction on e-commerce as discussed by Basalla et al. in "On Latency of E-Commerce Platforms".

In other words, by improving the latency of your e-commerce site, you will likely have more satisfied customers while generating better revenue. This realization is one of the reasons why particularly e-commerce focused companies invest on performance related work.

Performant sites have better search visibility

-24% abandonment decrease when all Core Vitals thresholds are met
The Science Behind Web Vitals

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 address web application size?

Web application size can be addressed in multiple different ways at different levels. Often there are low-hanging fruits, such as image optimization (using WebP or deferring loading are good ideas for example), while other types of optimizations require larger refactoring.

The main question is to consider which data should be provided to the client and when. Many of the latest approaches, such as islands architecture or resumability, build on this observation.

In short, consider the following steps:
1. Analyze the current situation using a service like Google's PageSpeed Insights, GTmetrix, or sitespeed.io. RelativeCI allows you to track the application size from inside out from the bundle perspective helping you to understand the composition of your application while avoiding regressions.
2. Go through the proposed improvements
3. Prioritize the work based on impact and complexity before adding it to the backlog
4. Address the issues and repeat the process until you have reached a good spot

Once you have application 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. Some of the improvements will likely take a longer while to implement as not all performance work is easy but simultaneously your users will thank for it.

Conclusion

As mentioned early on, website and application size is a growing problem. The problem is compounded by the fact that an increasing amount of usage occurs on mobile and often in contexts where connection speed is limited.

You can set your application apart by acknowledging the issue and doing something about it. It is not only about the fact that it is a good thing to do but also about improving the visibility of your site as performance is a part of technical SEO while making your application faster and snappier to use.

Understand your application bundle size

Identify and fix bundle npm duplicate dependencies

Vio — Sun, 28 Apr 2024 15:59:58 +0000

Modern web applications are becoming more complex and rely on an increasing number of dependencies. The larger the dependency tree is, the more likely it is to encounter version conflicts, bundle duplicate dependencies, ship unnecessary code, and negatively impact user performance.

On the front-end side, modern web applications include a median of 98 direct and transitive dependencies in the bundle, a growth of 108% in the last three years.

Why the bundle contains duplicate dependencies

When multiple other dependencies and/or the application depend on a package, npm resolves the dependency tree, and if a common version does not satisfy all the semver queries, it installs multiple instances of the same package. By installing multiple instances of the same dependency, npm meets the dependent package.json and avoids breaking existing functionality.

If the duplicate package is a front-end dependency, it is bundled multiple times. This increases the size of the bundle, negatively impacting the application's web performance and, in some cases, causing JavaScript runtime errors (ex: Duplicate React).

Resources:

Example

Here's an example of how the bundle can contain duplicate dependencies. In an application that depends on @ant-design/icons@4.7.0 (resolved to v4.7.0) and antd@4.24.14, npm installs two different instances of @ant-design/icons because antd@4.24.14 depends on @ant-design/icons@^4.7.0 (resolved to v4.8.1):

{
  "name": "example-app",
  // ... package information
  "dependencies": {
    "@ant-design": "4.7.0",
    "antd": "4.24.14"
  }
}

npm list @ant-design/icons

example-fix-npm-dependencies@1.0.0 repo
├── @ant-design/icons@4.7.0
└─┬ antd@4.24.14
  └── @ant-design/icons@4.8.1

As a result, the bundle includes two versions of the same dependency:

How to identify duplicate dependencies

RelativeCI analyzes the bundle stats modules data, extracts the list of bundled dependencies, and identifies duplicate dependency instances. It presents the information as custom insights, metrics, and a list that you can filter and sort to discover the regressions quickly.

Duplicate packages insight

The duplicate packages insight shows the status and result of the duplicate packages analysis, allowing you to easily identify when there are regressions (new duplicate instances) or improvements (removed duplicates). The insight information is available on the bundle analysis report summary, job list, and all the integration summaries.

Bundle analysis - duplicate packages insight

Bundle analysis list - duplicate packages insight

GitHub Pull Request Comment - Duplicate packages insight

Duplicate packages metric

The number of duplicate packages is shown as a distinct metric on the report summary, the job list, and all the integration summaries.

Bundle analysis summary - duplicate packages metric

Bundle analysis list - duplicate packages metric

You can also use the metric as a condition on the GitHub Commit Status Review or the Slack notification.

Bundle analysis review flow

Duplicate packages data

To see the list of duplicate packages, go to the Packages section of the bundle analysis report and filter the results by the Duplicate filter. This will give you an overview of all the duplicate dependencies and their impact on the bundle size.

Bundle analysis - packages

How to fix npm duplicate dependencies

The appropriate strategies for resolving npm duplicate dependencies may vary depending on your setup, dependencies, and versions. However, the following methods can help you eliminate duplicate packages, reduce bundle size, and enhance your application's web performance.

Run npm dedupe

npm dedupe can help quickly fix any existing issues in the package-lock.json file by flattening the dependency tree and regenerating the package-lock.json.

For example, the app dependency depends on @ant-design/icons@^4.6.0, and the correct semver resolution should be 4.8.1, though the package-lock.json resolves to 4.6.0:

npm explain @ant-design/icons

@ant-design/icons@4.6.0
node_modules/@ant-design/icons
  @ant-design/icons@"^4.6.0" from the root project

@ant-design/icons@4.8.1
node_modules/antd/node_modules/@ant-design/icons
  @ant-design/icons@"^4.7.0" from antd@4.24.14
  node_modules/antd
    antd@"^4.18.6" from the root projects

Running npm dedupe will correct the package-lock.json and remove the duplicate dependency:

npm dedupe
npm list @ant-design/icons
example-fix-npm-dependencies@1.0.0 repo
├── @ant-design/icons@4.8.1
└─┬ antd@4.24.14
  └── @ant-design/icons@4.8.1 deduped

Bundle analysis - duplicate packages - fixed using npm dedupe

Upgrade/downgrade to a common version

Another potential solution is to update and/or downgrade the dependency to a common version that the dependents can share.
In the example above, we can update the application version to v4.8.1, the same as the version resolved for antd. npm will resolve both dependencies to v4.8.1.

Updating a package version, especially a major version, can break existing functionality. Follow the change log of the dependency for changes, and make sure to test after the update.

npm install --save @ant-design/icons@^4.8.1
example-fix-npm-dependencies@1.0.0 repo
├── @ant-design/icons@4.8.1
└─┬ antd@4.24.14
  └── @ant-design/icons@4.8.1 deduped

Use npm overrides

The npm overrides configuration allows you to explicitly set package versions and override the npm resolution for any dependency, direct or transitive. In our example, we can override the resolved version of @ant-design/icons to 4.7.0.

Again, updating a package version, especially a major version, can break existing functionality. Remember to follow the change log of the dependency for changes, and ensure you test after updating.

{
  "name": "app",
  /* ... */
  "dependencies": {
    "@ant-design/icons": "^4.6.0",
    "antd": "^4.18.6",
    /* ... */
  },
  "overrides": {
    "antd": {
      "@ant-design/icons": "4.7.0"
    }
  }
}

npm list @ant-design/icons

example-fix-npm-dependencies@1.0.0
├── @ant-design/icons@4.7.0
└─┬ antd@4.24.14
  └── @ant-design/icons@4.7.0 deduped

Use webpack configuration

Webpack allows dependency imports to be overridden at bundle time using the resolve.alias configuration option.

Don't forget that updating a package version, especially a major version, can break existing functionality. Always follow the change log of the dependency for changes and test after the update.

To point all the app imports of @ant-design/icons to the same version, we can add an entry to resolve.alias:

module.exports = {
  // ... webpack config
  resolve: {
    alias: {
      '@ant-design/icons': path.join(
        __dirname,
        'node_modules/@ant-design/icons',
      ),
    }
  }
};

[1]: Data based on open-source projects analyzed by RelativeCI

	2020	2021	2022	2023
`Median package count`	`47`	`52`	`95`	`98`
`Mean package count`	`46`	`76`	`130`	`138`