Building a Greener Web

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