Roy Derks

How Your Bundle Size Affects The Climate

An unoptimized 10MB website requires 28 trees to compensate for its carbon output. Discover how to shrink your bundle size and build a more sustainable web.

How Your Bundle Size Affects The Climate
#1about 1 minute

The growing impact of websites on the climate

The increasing size and usage of websites have a direct and growing impact on global energy consumption and the climate.

#2about 3 minutes

Website size and data center energy consumption are exploding

The average website is four times larger than a decade ago, and data centers now account for a significant percentage of national energy usage.

#3about 6 minutes

How modern internet usage habits drive data consumption

Increased daily screen time, the shift to mobile-first browsing, and the rise of e-commerce are key drivers of higher internet data consumption.

#4about 4 minutes

Why large JavaScript bundles are bad for users and the planet

Large JavaScript bundles not only create slow user experiences by consuming bandwidth but also strain device CPUs, increasing energy use on both ends.

#5about 4 minutes

Comparing the simple web of the past to today's complex sites

A look back at websites from a decade ago reveals a shift from simple text and low-res images to today's media-rich, interactive, and heavier applications.

#6about 6 minutes

The shift from jQuery to modern JavaScript frameworks

Web development has evolved from using jQuery for simple interactions to building entire applications with powerful but heavier frameworks like React, Angular, and Vue.

#7about 5 minutes

Measuring a website's carbon footprint with online tools

Tools like Website Carbon estimate a site's environmental impact by analyzing data transfer, CPU intensity, and the data center's energy source.

#8about 5 minutes

Case study of a bloated website's high carbon footprint

Analyzing a deliberately heavy website with a 10MB bundle reveals a massive carbon footprint, equivalent to driving an electric car for thousands of kilometers.

#9about 4 minutes

Case study of a minimal website's low carbon footprint

In contrast, a simple static HTML site with a tiny 20KB footprint is shown to be extremely energy-efficient, requiring almost no carbon offset.

#10about 5 minutes

Using static site generators and Jamstack for efficiency

Building websites with static site generators (SSGs) and the Jamstack architecture pre-renders pages, resulting in smaller bundles and faster performance.

#11about 4 minutes

Understanding Jamstack architecture and incremental static generation

The Jamstack decouples the frontend from backend services, and incremental static generation (ISG) optimizes build times for very large sites.

#12about 3 minutes

Compressing assets with Gzip and Brotli for smaller transfers

Implementing server-side compression like Gzip, and especially the more efficient Brotli, significantly reduces the amount of data transferred to the user.

#13about 3 minutes

Implementing code splitting and lazy loading for faster initial loads

Code splitting with dynamic imports and lazy loading components ensures that users only download the JavaScript they need for the current view.

#14about 2 minutes

Choosing a hosting provider that uses green energy

The final step in reducing a website's environmental impact is to host it in a data center that is powered by renewable, green energy sources.

Related jobs
Jobs that call for the skills explored in this talk.

Angular Developer

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior

Featured Partners

Related Videos

Web development best practices in 202151:10

Web development best practices in 2021

Laurie Voss

The Eternal Sunshine of the Zero Build Pipeline50:10

The Eternal Sunshine of the Zero Build Pipeline

M4dz

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

Reducing the carbon footprint of your website30:07

Reducing the carbon footprint of your website

Ines Akrap

A Practical Guide to Reducing Bundle Size26:20

A Practical Guide to Reducing Bundle Size

Stephen Cooper

Sustainable me. A tale of good design.1:05:49

Sustainable me. A tale of good design.

Lorenzo Pieri

Web development: where are we, and where are we going?32:56

Web development: where are we, and where are we going?

Laurie Voss

Jamstack and Web Performance, a match made in heaven42:04

Jamstack and Web Performance, a match made in heaven

Tamas Piros

From learning to earning

Jobs that call for the skills explored in this talk.