Your frontend is ☠️ ⚠️ Let's measure its impact with CO2 js
summary
Uses CO2.js from the Green Web Foundation to produce concrete numbers: compares the one-byte model (network-only) with the Sustainable Web Design model (full chain), implements a demo site with Next.js + React + Mantine + TypeScript and pnpm, and measures effects like how compressing a 20MB PNG to WebP cuts CO2 per 10,000 visits by roughly fivefold — translated into kilometers driven saved versus car emissions. Also shows host-green checks, Sonar/ESLint rules, Kepler for Kubernetes, and notes high energy/water costs of large AI models.
AI-written summary · about
chapters (12)
- 0:00Welcome
- 2:55Sustainability in frontend
- 13:58Website carbon with Webpage Carbon
- 16:09CO2.js introduction
- 19:29React dashboard with CO2.js
- 26:53Host green check
- 28:21Total site carbon
- 30:14CO2 vs car emissions
- 34:07Optimize images
- 37:59Sustainable tools
- 40:47AI in sustainability
- 43:00Key takeaways
related talks
31mYour frontend is ☠️ ⚠️ Let's measure its impact with CO2.js
18mCan you mitigate the carbon footprint of websites?
20mThe Role of Frontend Code in Reducing Carbon Emissions
10mSustainable means performant
38mSustainable Web Design: Principles and Best Practices
49mDesigning Energy Efficient Websites
51mdisplay: green; applying the web sustainability guidelines
22mDigital Ecology: Can you Mitigate The Carbon Footprint of Websites