> Markdown version of [/videos/308-how-your-bundle-size-affects-the-climate](https://www.wearedevelopers.com/videos/308-how-your-bundle-size-affects-the-climate). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# How Your Bundle Size Affects The Climate

Unoptimized JavaScript does more than throttle CPU performance. It actively generates a massive carbon footprint. Discover how shrinking your bundle size makes applications fast and climate-friendly.

- **Speakers:** Roy Derks
- **Event:** JavaScript Congress
- **Published:** November 25, 2021
- **Duration:** 53:16
- **URL:** https://www.wearedevelopers.com/videos/308-how-your-bundle-size-affects-the-climate

## Summary

The internet's average website size has quadrupled over the last decade, largely driven by increased mobile screen time and data-heavy JavaScript frameworks. As web traffic shifts toward complex applications, digital energy consumption has surged, with data centers now accounting for substantial regional electricity use. Large, unoptimized JavaScript payloads—sometimes reaching up to 27 megabytes—not only throttle CPU performance on end-user devices but also generate a massive carbon footprint. When developers fail to optimize bundle sizes, they inadvertently burden both user hardware and the physical environment.

Tools like the Website Carbon calculator reveal the stark environmental contrast between bloated applications and minimalist web design. An unoptimized 10-megabyte application can require planting dozens of trees annually to offset just 10,000 monthly visits. Conversely, a fast website is also fundamentally an energy-efficient website. By deliberately keeping code bundles small, developers create a dual benefit: improving the user experience for those on slower connections and reducing the processing power needed to render the interface. Infrastructure choices play an equally crucial role; hosting on global content delivery networks and selecting data centers powered by local green energy drastically lowers a project's baseline climate impact.

Transitioning to jamstack architecture and utilizing static site generators shifts the bulk of rendering work from client runtime back to build time. When combining this methodology with incremental static regeneration, engineering teams can handle massive scale dynamically without overloading runtime servers. Furthermore, developers can actively curb emissions by defaulting to modern compression algorithms like brotli, which routinely outperforms standard gzip for JavaScript files. Introducing architectural patterns like dynamic imports and lazy loading ensures clients only download the precise components required for their immediate viewport or authentication state, effectively resolving the bloated bundle crisis.

**Keywords:** javascript bundle optimization, website carbon footprint, digital climate impact, static site generation, jamstack architecture, dynamic imports code splitting, brotli compression algorithms, energy-efficient web development, cpu rendering overhead, green energy data centers, incremental static regeneration, single page application performance, content delivery network caching, website carbon calculator, lazy loading components, build-time content compiling

## Chapters

1. **The energy consumption of internet growth and data centers** (00:15) — Growing website payload sizes and high-profile data center expansions drastically impact global energy consumption grids.
1. **How internet consumption patterns and screen time have evolved** (05:11) — Increased daily screen time and resource-heavy commercial behaviors functionally multiply global data transmission volumes.
1. **The environmental impact of excessively large JavaScript bundles** (11:21) — Monolithic web dependencies require massive script downloads that bottleneck device rendering capabilities and power consumption.
1. **How average website payload sizes have grown over time** (13:56) — The structural complexity, byte weights, and media footprint of popular websites have grown exponentially over ten years.
1. **The shift toward JavaScript frameworks for web development** (17:22) — The widespread adoption of client-side application frameworks directly increases overall application layer complexity and related hardware energy requirements.
1. **Optimizing websites for high performance and energy efficiency** (23:07) — Implementing content delivery mechanisms and caching protocols makes software stacks demonstrably more sustainable to operate.
1. **Calculating the carbon footprint and energy impact of websites** (24:58) — Dedicated web carbon calculators mathematically estimate the compute intensity and planetary cost of serving unoptimized web pages.
1. **Comparing the planetary impact of large and minimal websites** (27:57) — There is a vast greenhouse emissions gap between heavily clustered client applications and clean, minimal HTML-only prototypes.
1. **Reducing environmental impact with static site generators and Jamstack** (36:31) — Jamstack application principles and static site generators dramatically shrink final delivery payloads by resolving component trees statically during compilation.
1. **Implementing network asset compression using gzip and Brotli** (46:08) — Compressing standard server responses via established text algorithms successfully minimizes outbound component bandwidth usage over HTTP channels.
1. **Reducing resource waste with code splitting and dynamic imports** (48:44) — Isolating component logic into dynamically fetched modules prevents connecting clients from processing completely unused application sectors upfront.
1. **Selecting green hosting providers and sustainable data center infrastructure** (51:26) — Choosing production operations providers that run facilities exclusively on renewable energy immediately scales back indirect digital emissions.

## Related Moments

- [Reducing JavaScript bundle sizes for multiplied carbon savings](https://www.wearedevelopers.com/videos/560-sustainable-me-a-tale-of-good-design) (from "Sustainable me. A tale of good design.")
- [The intersection of web performance and sustainability](https://www.wearedevelopers.com/videos/636-reducing-the-carbon-footprint-of-your-website) (from "Reducing the carbon footprint of your website")
- [Reducing network payload for large digital website portfolios](https://www.wearedevelopers.com/videos/100251-one-year-of-the-co2-challenge-insights-and-lessons-learned) (from "One year of the CO2-challenge – insights and lessons learned")
- [Built-in performance benefits of the Jamstack architecture](https://www.wearedevelopers.com/videos/169-jamstack-and-web-performance-a-match-made-in-heaven) (from "Jamstack and Web Performance, a match made in heaven")
- [Reducing JavaScript bundle sizes with build tools](https://www.wearedevelopers.com/videos/1667-the-journey-of-a-pixel-in-a-react-application) (from "The Journey of a Pixel in a React Application")
- [Internet traffic growth and website carbon footprint](https://www.wearedevelopers.com/videos/560-sustainable-me-a-tale-of-good-design) (from "Sustainable me. A tale of good design.")

## Related Articles

- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)
- [Dev Digest 136 - No JS(on) of mine](https://www.wearedevelopers.com/magazine/482-dev-digest-136-no-js-on-of-mine)
- [Dev Digest 126 - * yells at cloud](https://www.wearedevelopers.com/magazine/463-dev-digest-126-yells-at-cloud)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)

## Related Jobs

- [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/356601-remote-senior-full-stack-engineer) at **Edge Impulse**