Sustainable Web Design In 20 Lessons
Sustainable Web Design In 20 Lessons is the practical guide for creating and maintaining sustainable websites. It will teach you the basics and give you valuable tools you can use to make your website more sustainable.
About the book
Did you know that the internet is one of the world's largest environmental polluters today? Responsible for 4% of global greenhouse gas emissions—twice as much as the aviation sector—it is an invisible source of pollution that continues to grow. If this trend persists, the internet's carbon footprint could soon surpass that of every nation except China, India, and the U.S.
But there is a solution.
As we work towards a net-zero future by 2050, reducing the internet's CO₂ footprint is crucial. The problem? Websites and digital products are becoming heavier and more resource-intensive, driven by faster internet speeds and increasingly powerful hardware. The solution? Sustainable web design.
Sustainable Web Design In 20 Lessons is your guide to building efficient, eco-friendly websites—without compromising design or functionality. Across 300+ pages, Michael shares over a decade of hands-on experience, equipping you with the tools to make a real impact.
What's inside
-
01
Sustainable Web Design fundamentals
Discover what sustainable web design really means — both for the environment and for the people using the web. This opening lesson covers how websites contribute to carbon emissions, why ethical design matters, and how manipulative practices like false urgency and automatic conversions hurt users. You'll understand the foundations everything else in this book builds on.
-
02
Understand carbon footprints
Learn where the concept of carbon footprints comes from, what greenhouse gases are involved, and why measuring a website's exact emissions is so complicated. You'll explore tools like WebsiteCarbon and EcoGrader to estimate your site's impact, understand what factors go into the calculation, and learn to spot greenwashing when companies make misleading environmental claims.
-
03
Green web hosting
Choosing the right web host can be one of the single biggest sustainability decisions you make. This lesson explains the difference between green and grey grid hosting, how to evaluate providers, and why renewable-powered hosting doesn't have to cost more. You'll also see research showing that sustainable websites allow servers to handle more traffic with less hardware.
-
04
Content delivery networks
Learn how content delivery networks shorten the distance data travels, reduce server load through caching, and add a security layer against attacks like DDoS. This lesson covers when a CDN makes sense, debunks the myth that local-only sites don't benefit from one, and walks you through setting up Cloudflare step by step.
-
05
Page-weight budgets
A page-weight budget gives your team a shared target for how heavy each page should be. Learn how to set a realistic budget, why it matters for sustainability and performance, and how different file types contribute to page size. Includes insights from Tom Greenwood at Wholegrain Digital on how budgets have worked in real client projects.
-
06
Death of content
An estimated 90% of all data ever created is never accessed again — yet it still consumes energy sitting on servers. This lesson challenges you to be critical about the content you publish, update what's outdated, and remove what's no longer relevant. You'll learn why treating content as a responsibility, not a one-time task, is essential for a sustainable web.
-
07
Accessibility
Accessibility and sustainability share the same foundation: reaching more people with less waste. Learn about cognitive, visual, auditory, motor, and speech accessibility, the WCAG conformance levels, and how semantic HTML makes your site naturally accessible to screen readers and assistive technology. Includes practical testing tips to verify your implementations work.
-
08
Minimalistic & lightweight design
Minimalism on the web means showing only what helps your visitors understand your content — nothing more. Learn why many images fail to describe the content they accompany, how whitespace creates better design, and how typography can replace heavy imagery. You'll see real examples of bloated versus clean websites and learn to question every element you publish.
-
09
Dark/light mode & colors
Dark mode can save up to 47% battery on OLED screens, and over a billion smartphones use OLED today. Learn the difference between LCD and OLED, why blue pixels consume more energy than red or green, and how a dark-mode-first approach using CSS prefers-color-scheme lets visitors choose what works for them without extra JavaScript.
-
10
Image optimization
Images are the heaviest and most common media type on the web. This lesson walks you through resizing, compressing, and saving images in the right format — with a strong case for WebP over PNG and JPG. You'll follow along in Adobe Photoshop to optimize images for the web and learn why even your CMS may be working against you.
-
11
Video optimization
Video is one of the most polluting content types you can add to a website. Learn why autoplay should always be turned off, how to compress videos using tools like VideoProc, which formats to use, and a technique to load videos only when a user clicks — replacing the initial embed with a lightweight image placeholder to save bandwidth.
-
12
Font optimization
Custom fonts can add hundreds of kilobytes to every page load. Learn the difference between TTF, OTF, WOFF, and WOFF2, why WOFF2 should be your default for the web, and how to strip unnecessary characters using FontSquirrel. You'll also discover why standard system fonts might be the most sustainable and readable choice of all.
-
13
HTML optimization
Clean, semantic HTML is the skeleton of a sustainable website. This lesson covers the 'less is more' philosophy — avoiding deeply nested wrappers and div-soup, using descriptive markup that helps browsers and assistive tech, minifying your HTML, and why inline styles and scripts cause more harm than good. You'll also learn why coding from scratch beats frameworks.
-
14
CSS optimization
CSS is an essential part of every website, and optimizing it pays off quickly. Learn the trade-offs between single stylesheets and scoped CSS, why frameworks like Bootstrap add massive unused code, how to identify and remove CSS you no longer need, and why creating reusable components and minifying your stylesheets makes a measurable difference.
-
15
JavaScript optimization
JavaScript ranks low among programming languages for energy efficiency — making optimization critical. Learn to keep your markup lean, favor vanilla JavaScript over heavy libraries like jQuery, use async and defer to control loading, store DOM references, batch DOM changes, and build complete elements before inserting them into the page to minimize re-renders.
-
16
React & Svelte optimization
React is powerful but heavy. Learn practical optimization techniques including code splitting, production mode builds, React Fragments, useMemo, useRef, and why CSS animations outperform JavaScript ones. You'll also see how virtualizing long lists prevents browser freezes. Finally, meet Svelte — a lighter compiler-based alternative that produced a bundle nearly half the size of React.
-
17
Trackers & HTTP requests
Third-party trackers generate enormous amounts of data, add unnecessary HTTP requests, and violate your visitors' privacy. This lesson examines the tracking industry — from analytics to advertising — explains what information trackers collect about your users, and makes the case for removing them entirely. You'll also learn why ads can account for a huge portion of internet traffic.
-
18
Service workers & Caching
Service workers act as a reverse proxy between your website and the network, enabling powerful caching strategies that reduce server requests and loading times. Learn about network-first, stale-while-revalidate, and cache renewal patterns. While service workers hold great potential for sustainability, this lesson also honestly discusses the challenges that still need solving.
-
19
APIs
APIs power nearly every modern website and app, but they require servers running around the clock. Learn how to make your APIs more sustainable through caching at the browser, CDN, and server levels. This lesson also explores whether serverless architecture is greener than traditional servers, and which programming languages use the least energy and memory.
-
20
Emails and newsletters
Hundreds of billions of emails are sent every day, and a single image-heavy email can emit as much as 50 grams of CO2. In this final lesson, learn how to optimize email images, why plain-text emails often outperform HTML newsletters in deliverability, and how to apply the sustainability principles from earlier chapters — like page-weight budgets and content pruning — to your email strategy.
What readers say
“Andersen's '20 lessons' format offers an easy to follow, practical application of the research and best practices on sustainable web design. If you're after an in-depth 'how to guide, then this format may be just what you're looking for.”
“Michael distils years of hard-won experience into a practical, beautifully written guide. This book changed how I approach every project.”