A presentation at All Day Hey in in Leeds, UK by Michelle Barker
Building a greener web Web sustainability for designers and developers
css-irl.info
Senior Front End Developer at
3.7% of worldwide C02e emissions https://bbc.in/35mLuxM
Photo: pexels.com/@brett-sayles
Device manufacture Infrastructure Device use
2 MB Average web page size https://bit.ly/3rIfZWc
Fast websites Low-carbon websites
WebPageTest
WebPageTest PageSpeed Insights
WebPageTest PageSpeed Insights GTMetrix
Core Web Vitals LCP Largest Contentful Paint FID First Input Delay CLS Cumulative Layout Shift
Carbon budgets
websitecarbon.com
ecoping.earth
digitalbeacon.co
Images
43% 30% Bytes transferred Requests Source: https://httparchive.org/reports/page-weight
Use fewer images
Use fewer images Use smaller images
556kb 326kb -41% Photo: unsplash.com/@aarngiri
Use fewer images Use smaller images Optimise
326kb 100kb -69% Photo: unsplash.com/@aarngiri
Use fewer images Use smaller images Optimise Serve the right images for the user’s device
Use fewer images Use smaller images Optimise Serve the right images for the user’s device Use modern image formats (WebP, AVIF)
<picture> <source type=”image/webp” srcset=”robin.webp 400w…” sizes=”(min-width: 1200px) 50vw, 100vw”> <img srcset=”robin.jpg 400w…” src=“robin.jpg” sizes=”(min-width: 1200px) 50vw, 100vw” alt=”…”> </picture>
Use fewer images Use smaller images Optimise Serve the right images for the user’s device Use modern image formats (WebP, AVIF) Lazyload
Fonts
Use fewer fonts
Use fewer fonts Consider variable fonts
Use fewer fonts Consider variable fonts Use modern font formats (e.g. WOFF2)
ff github.com/google/wo 2
Use fewer fonts Consider variable fonts Use modern font formats (e.g. WOFF2) Subset fonts
w3.org/TR/IFT
Use fewer fonts Consider variable fonts Use modern font formats (e.g. WOFF2) Subset fonts Self-host
gwfh.mranftl.com/fonts
Third-party embeds
Avoid embeds
Avoid embeds Defer loading if possible
Avoid embeds Defer loading if possible Lazyload
Avoid embeds Defer loading if possible Lazyload Import on interaction
github.com/paulirish/lite-youtube-embed
Avoid embeds Defer loading if possible Lazyload Import on interaction Don’t use Google Analytics
withcabin.com
usefathom.com
aremythirdpartiesgreen.com
Not all bytes are created equal
Use less Javascript
© Andy Bell andy-bell.co.uk
Design for less JS
Design for less JS Use native APIs
Design for less JS Use native APIs Do you need to transpile?
Design for less JS Use native APIs Do you need to transpile? Do you need a framework?
Optimise all the things
Caching
bit.ly/40B38ou
Caching fi Mini cation and compression
Caching Mini cation and compression fi Tree-shaking
Caching Mini cation and compression Tree-shaking fi Code splitting
Static import import { Auth } from “@aws-amplify/auth”; const user = Auth.currentAuthenticatedUser();
Dynamic import import(“@aws-amplify/auth”).then(({ Auth }) => { const user = Auth.currentAuthenticatedUser(); });
Caching Mini cation and compression Tree-shaking Code splitting fi Dependency auditing
Device manufacture Infrastructure Device use
Device manufacture Infrastructure Device use
Device manufacture Infrastructure Device use
Device manufacture Infrastructure Device use
Low-energy colour scheme
User journey
Device manufacture Infrastructure Device use
Renewable energy
thegreenwebfoundation.org/directory
Timing
branch.climateaction.tech
branch.climateaction.tech
Location
Case study: UsTwo https://bit.ly/3N8uWgD
Case study: UsTwo 0.54gCO2e https://bit.ly/3N8uWgD 0.02gCO2e
45% 99% to carbon reduction
greensoftware.foundation
Developer tooling
“ If I was a better programmer, I’d write a script that shows you the cumulative CO₂ you’ve generated every time you type npm install . Eric Bailey https://bit.ly/3KH98VI
Consider a static site
Consider a static site Don’t run optimisations in development
Consider a static site Don’t run optimisations in development Remove unused dependencies
Consider a static site Don’t run optimisations in development Remove unused dependencies Reduce complexity
“ Shaving o a single kilobyte in a le that is being loaded on 2 million websites reduces CO2 emissions by an estimated 2950 kg per month. Danny van Kooten fi ff https://bit.ly/3nX93Up
Why do our individual actions matter?
Unfortunately, capitalism Photo: pexels.com/@pixabay
Amplify our voices
Lead by example
Regulation
“ Cultural revolutions don’t happen because of systems change; they happen when a group of people voice a compelling story that propagates across society and becomes a social norm. https://bit.ly/3nZs48x
Networks
Elon Musk isn’t going to solve climate change
Form a workplace action group Support each other to take climate action Push the climate agenda and greener practices within your organisation Share resources Hold each other accountable
Share your learning Write Speak at events Share on social media
w3.org/community/sustyweb
Recognising our power + privilege
https://bit.ly/35HxOxx
Sometimes less is more
Reasons to be hopeful
“ Hope doesn’t preclude feeling sadness or frustration or anger… Hope is not optimism. Hope is a discipline… we have to practice it every single day. Mariame Kaba https://bit.ly/3Noy2NK
planet
As designers and developers, we rarely pause to consider the environmental impact of our digital lifestyles – even though the internet accounts for around 4% of global carbon emissions. In addition, our industry is associated with enormous water use, chemical pollution, exploitative labour, and e-waste.
In this talk, Michelle will look at how better design and development decisions can mitigate the environmental and social impacts of the digital products we build, and the role that we as digital workers can play in shaping a more sustainable web.
for free. You
can too.