Roy Derks
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.
Featured Partners
Related Videos
Web development best practices in 2021
Laurie Voss
The Eternal Sunshine of the Zero Build Pipeline
M4dz
Catching up on the basics you don't really need that much code
Chris Heilmann
Reducing the carbon footprint of your website
Ines Akrap
A Practical Guide to Reducing Bundle Size
Stephen Cooper
Sustainable me. A tale of good design.
Lorenzo Pieri
Web development: where are we, and where are we going?
Laurie Voss
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.
JavaScript / Node.js Developer (all genders, remote)
codeblick GmbH
Augsburg, Germany
Remote
PHP
CSS
HTML
React
+6
Web Developer - Node / Typescript / HTML / SCSS / Liquid / Shopify
Codext GmbH
Ilshofen-Vellberg, Germany
€40K
CSS
HTML
Node.js
JavaScript
+1
Fullack Developer - NodeJS / Typescript / HTML / SCSS / Angular / NextJs
Codext GmbH
Ilshofen-Vellberg, Germany
€55K
API
CSS
HTML
NestJS
+4
Passionate Javascript developer
Edjuster
Municipality of Madrid, Spain
Remote
React
Node.js
JavaScript
Extreme Programming (XP)
Tech Lead (JavaScript & AWS)
NTT DATA
Municipality of Madrid, Spain
Remote
Node.js
JavaScript
TypeScript
Amazon Web Services (AWS)
Senior Web Applications Developer - JavaScript / React / HTML
Adaptive Financial Consulting
Municipality of Madrid, Spain
CSS
HTML
React
JavaScript
TypeScript





