A presentation at Smashing Meets Goes Green by Michelle Barker
Building a greener web Web sustainability for designers and developers
Senior Front End Developer at
😵 34.7MB transferred 683 requests
3.7% of worldwide C02e emissions https://bbc.in/35mLuxM
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 FID CLS Largest Contentful Paint First Input Delay 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? Embrace the platform!
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
“ 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
Thank you css-irl.info/tags/web-sustainability
for free. You
can too.