Building a Greener Web

A presentation at Smashing Meets Goes Green in December 2023 in by Michelle Barker

Slide 1

Slide 1

Building a greener web Web sustainability for designers and developers

Slide 2

Slide 2

Senior Front End Developer at

Slide 3

Slide 3

Slide 4

Slide 4

😵 34.7MB transferred 683 requests

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

3.7% of worldwide C02e emissions https://bbc.in/35mLuxM

Slide 8

Slide 8

Slide 9

Slide 9

Slide 10

Slide 10

Slide 11

Slide 11

Slide 12

Slide 12

Slide 13

Slide 13

Slide 14

Slide 14

Slide 15

Slide 15

Device manufacture Infrastructure Device use

Slide 16

Slide 16

2 MB Average web page size https://bit.ly/3rIfZWc

Slide 17

Slide 17

Fast websites Low-carbon websites

Slide 18

Slide 18

WebPageTest

Slide 19

Slide 19

WebPageTest PageSpeed Insights

Slide 20

Slide 20

WebPageTest PageSpeed Insights GTMetrix

Slide 21

Slide 21

Core Web Vitals LCP FID CLS Largest Contentful Paint First Input Delay Cumulative Layout Shift

Slide 22

Slide 22

Carbon budgets

Slide 23

Slide 23

websitecarbon.com

Slide 24

Slide 24

Slide 25

Slide 25

ecoping.earth

Slide 26

Slide 26

digitalbeacon.co

Slide 27

Slide 27

Images

Slide 28

Slide 28

43% 30% Bytes transferred Requests Source: https://httparchive.org/reports/page-weight

Slide 29

Slide 29

Use fewer images

Slide 30

Slide 30

Use fewer images Use smaller images

Slide 31

Slide 31

556kb 326kb -41% Photo: unsplash.com/@aarngiri

Slide 32

Slide 32

Use fewer images Use smaller images Optimise

Slide 33

Slide 33

326kb 100kb -69% Photo: unsplash.com/@aarngiri

Slide 34

Slide 34

Use fewer images Use smaller images Optimise Serve the right images for the user’s device

Slide 35

Slide 35

Use fewer images Use smaller images Optimise Serve the right images for the user’s device Use modern image formats (WebP, AVIF)

Slide 36

Slide 36

<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>

Slide 37

Slide 37

Use fewer images Use smaller images Optimise Serve the right images for the user’s device Use modern image formats (WebP, AVIF) Lazyload

Slide 38

Slide 38

<img srcset=”…” src=”robin.jpg” alt=”…” loading=”lazy” />

Slide 39

Slide 39

Fonts

Slide 40

Slide 40

Use fewer fonts

Slide 41

Slide 41

Use fewer fonts Consider variable fonts

Slide 42

Slide 42

Slide 43

Slide 43

Use fewer fonts Consider variable fonts Use modern font formats (e.g. WOFF2)

Slide 44

Slide 44

ff github.com/google/wo 2

Slide 45

Slide 45

Use fewer fonts Consider variable fonts Use modern font formats (e.g. WOFF2) Subset fonts

Slide 46

Slide 46

w3.org/TR/IFT

Slide 47

Slide 47

Use fewer fonts Consider variable fonts Use modern font formats (e.g. WOFF2) Subset fonts Self-host

Slide 48

Slide 48

gwfh.mranftl.com/fonts

Slide 49

Slide 49

Third-party embeds

Slide 50

Slide 50

Slide 51

Slide 51

Avoid embeds

Slide 52

Slide 52

Avoid embeds Defer loading if possible

Slide 53

Slide 53

Avoid embeds Defer loading if possible Lazyload

Slide 54

Slide 54

Avoid embeds Defer loading if possible Lazyload Import on interaction

Slide 55

Slide 55

github.com/paulirish/lite-youtube-embed

Slide 56

Slide 56

Avoid embeds Defer loading if possible Lazyload Import on interaction Don’t use Google Analytics

Slide 57

Slide 57

withcabin.com

Slide 58

Slide 58

usefathom.com

Slide 59

Slide 59

aremythirdpartiesgreen.com

Slide 60

Slide 60

Not all bytes are created equal

Slide 61

Slide 61

Use less Javascript

Slide 62

Slide 62

© Andy Bell andy-bell.co.uk

Slide 63

Slide 63

Design for less JS

Slide 64

Slide 64

Design for less JS Use native APIs

Slide 65

Slide 65

Design for less JS Use native APIs Do you need to transpile?

Slide 66

Slide 66

Design for less JS Use native APIs Do you need to transpile? Embrace the platform!

Slide 67

Slide 67

Slide 68

Slide 68

Optimise all the things

Slide 69

Slide 69

Caching

Slide 70

Slide 70

bit.ly/40B38ou

Slide 71

Slide 71

Caching fi Mini cation and compression

Slide 72

Slide 72

Caching Mini cation and compression fi Tree-shaking

Slide 73

Slide 73

Caching Mini cation and compression Tree-shaking fi Code splitting

Slide 74

Slide 74

Static import import { Auth } from “@aws-amplify/auth”; const user = Auth.currentAuthenticatedUser();

Slide 75

Slide 75

Dynamic import import(“@aws-amplify/auth”).then(({ Auth }) => { const user = Auth.currentAuthenticatedUser(); });

Slide 76

Slide 76

Caching Mini cation and compression Tree-shaking Code splitting fi Dependency auditing

Slide 77

Slide 77

Device manufacture Infrastructure Device use

Slide 78

Slide 78

Device manufacture Infrastructure Device use

Slide 79

Slide 79

Device manufacture Infrastructure Device use

Slide 80

Slide 80

Device manufacture Infrastructure Device use

Slide 81

Slide 81

Low-energy colour scheme

Slide 82

Slide 82

User journey

Slide 83

Slide 83

Device manufacture Infrastructure Device use

Slide 84

Slide 84

Renewable energy

Slide 85

Slide 85

thegreenwebfoundation.org/directory

Slide 86

Slide 86

Timing

Slide 87

Slide 87

branch.climateaction.tech

Slide 88

Slide 88

branch.climateaction.tech

Slide 89

Slide 89

Location

Slide 90

Slide 90

Case study: UsTwo https://bit.ly/3N8uWgD

Slide 91

Slide 91

Case study: UsTwo 0.54gCO2e https://bit.ly/3N8uWgD 0.02gCO2e

Slide 92

Slide 92

45% 99% to carbon reduction

Slide 93

Slide 93

greensoftware.foundation

Slide 94

Slide 94

Developer tooling

Slide 95

Slide 95

“ 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

Slide 96

Slide 96

Consider a static site

Slide 97

Slide 97

Consider a static site Don’t run optimisations in development

Slide 98

Slide 98

Consider a static site Don’t run optimisations in development Remove unused dependencies

Slide 99

Slide 99

Consider a static site Don’t run optimisations in development Remove unused dependencies Reduce complexity

Slide 100

Slide 100

“ 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

Slide 101

Slide 101

Why do our individual actions matter?

Slide 102

Slide 102

Unfortunately, capitalism Photo: pexels.com/@pixabay

Slide 103

Slide 103

Amplify our voices

Slide 104

Slide 104

Lead by example

Slide 105

Slide 105

Regulation

Slide 106

Slide 106

“ 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

Slide 107

Slide 107

Networks

Slide 108

Slide 108

Elon Musk isn’t going to solve climate change

Slide 109

Slide 109

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

Slide 110

Slide 110

Share your learning Write Speak at events Share on social media

Slide 111

Slide 111

Slide 112

Slide 112

w3.org/community/sustyweb

Slide 113

Slide 113

Recognising our power + privilege

Slide 114

Slide 114

Slide 115

Slide 115

https://bit.ly/35HxOxx

Slide 116

Slide 116

Sometimes less is more

Slide 117

Slide 117

Slide 118

Slide 118

Slide 119

Slide 119

“ 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

Slide 120

Slide 120

planet

Slide 121

Slide 121

Thank you css-irl.info/tags/web-sustainability