Sustainable Web Design
Creators:: Tom Greenwood
Title:: Sustainable Web Design
Subtitle::
Year:: 2021
Category:: #book/sustainability #book/computer
ISBN:: 978-1-952616-03-7
Publisher:: A Book Apart
Cover:: https://sustainablewebdesign.org/wp-content/uploads/2021/01/SWD-Tom-Greenwood-Cover.jpg
URL:: https://abookapart.com/products/sustainable-web-design
Known by::
Why should I read it::
Priority::
Status:: 🟩
Date finished:: 2023-06-06
The internet may be digital, but it carries a very physical cost. From image files to colors to coding languages to servers, the choices we make in our web work can eat up electricity and spit out carbon--and as the internet grows, so does the cost to the environment. But there's hope: small, thoughtful changes in design and development can reduce the damage, while also making the web more resilient in the face of a changing climate. In Sustainable Web Design, Tom Greenwood offers a practical path to faster, more carbon-efficient websites that are not only better for the planet, but better for our users.
Buying / Lending
| Borrowing from library | Status | Deadline |
|---|---|---|
| Bibliothek HdM - Nachhaltiges Webdesign (Tom Greenwood) | 💡 | - |
| Bibliothek UB Stuttgart - Sustainable Web Design (Tom Greenwood) | 🟩 | 17. June 2023 |
Reviews / Notes by others
My Notes
The Book in 3 Sentences
My Top 3 Quotes
Notes
What is Sustainable Web Design?
Honesty principle from the Sustainable Web Manifesto parallels the 1. principle of Extinction Rebellion: "Tell the truth"
Chris Bolin created a website than can only be accessed when the user is disconnected from the internet: https://chrisbolin.co/offline/
We all have a role to play in creating a sustainable web, whatever our job may be in the world of digital.
In the 1950s the campaign "Keep America Beautiful" by Coca Cola and others managed to shift the entire debate around America's garbage and litter problems away from the industry and onto consumers. This strategy has been copied time and time again since.
Margaret Mead:
Never doubt that a small group of thoughtful, committed citizens can change the world; indeed, it's the only thing that ever has.
Designing Low-Carbon Websites
- As a general rule, WEBP is the most efficient format for photographs, typcially with files about 30 percent smaller than JPEG (WebP Compression Study by Google).
- AVIF, a newer image image format, is quickly catching momentum in terms of browser compatibility, and can be less than half the size of WEBP (AVIF has landed by JakeArchibald.com).
- PNG or GIF are usually the most efficient formats for simple images that only use a few block colors, such as icons and logos.
- For video, MP4 is generally more efficient and delivers smaller files than animated GIF, and also provides better accessibility with features such as audio description tracks and captioning.
- Example: Inter UI font file in TTF format: 298 KB
- Convert with Font Squirrel's Webfont Generator to WOFF2 → 77 KB
- Character Map by Font Drop to see the supported characters → many characters are not needed
- Subsetting tool from Everything Font → 7 KB
One of the most efficient websites: https://davidandkay.me.uk/
- personal website by David and Kay Cawsey
- hosted on a Raspberry Pi with Nginx (Raspberry Pi website)
- Website Carbon Calculator: 0.04 g CO2
Server Utilization
There is a sweet spot between loading a server with too much and too little.
Tim Nash (platform lead of 34SP):
A server running overprovisioned will end up in locking processes, so its high CPU and memory usage will become constant, whereas if the load was balanced across multiple servers, that locking wouldn't occur, memory gets released quicker, and the load is overall much smaller.
Problems to consider:
- Underutilized servers waste energy because of the servers' idle energy consumption and at the same time waste physical resources
- Overutilized servers generate a disproportionate amount of heat that leads to energy waste and a higher risk of hardware failure
Energy
IEA: only 23 % of the worlds electricity is currently generated from renewable sources
How green is green? Different types of web host's green energy commitment:
- Owning renewables: Energy is produced directly onsite, or at least on the same energy grid. Best option, the provider has taken responsibility for generating the electricity needed to power the data center.
- Funding new renewables: Power purchase agreement with energy company to fund the construction of new renewable energy supplies. Also a good option.
- Buying renewable energy: Purchase energy supplies from renewable energy generators that are on the same energy grid. Minimum standard of what can be claimed as "using renewable energy".
- Buying credits: Purchase renewable energy credits (RECs) from renewable energy generators on other grids. Typically money is saved by producing renewable energy in poorer countries.
- Carbon offsetting: Purchase carbon offsets equivalent to the emissions produced by nonrenewable power that fuels the data center.
Selling sustainable web design
Different customer objectives that can be leveraged to deliver sustainable solutions:
- user experience
- SEO
- accessibility
- security (e.g. by using firewalls and static web technology)
- uptime (e.g. by using CDNs, static web technology, offline functionality)
- hosting costs
Resources
Sustainable web design tools and frameworks:
- Sustainable Web Manifesto
- Calculate carbon emissions of websites, web applications & digital services#Website Carbon Calculator
- Calculate carbon emissions of websites, web applications & digital services#Ecograder
- Web Performance Budget#Performance Budget Calculator
- Green Web Foundation
- Wordpress Themes#Granola
- Image optimization
- ImageOptim
- ShortPixel
- TinyPNG
- ImageAlpha (hand-optimizing png files)
- WebP Express (wordpress plugin)
- Doteveryone's Consequence Scanning toolkit
- Carbon Footprint calculator
- B Impact Assessment