How better performing websites can help save the planet

Slide 1

Slide 1 text

How better performing websites can help save the planet Jack Lenox WordCamp Europe, Berlin, June 2019

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

http://blackle.com

Slide 4

Slide 4 text

Photo by Jan-Philipp Thiele on Unsplash

Slide 5

Slide 5 text

Me 2009 - 2013: Startup/agency work 2013 - present: Automattic (WordPress.com VIP since 2015) 2017: UK parliamentary candidate for the Green Party of England and Wales

Slide 6

Slide 6 text

https://mozillafestival.org/

Slide 7

Slide 7 text

The Problem

Slide 8

Slide 8 text

The Internet has an enormous carbon footprint

Slide 9

Slide 9 text

http://www.clickclean.org/

Slide 10

Slide 10 text

...and it's rapidly growing

Slide 11

Slide 11 text

https://www.nature.com/articles/d41586-018-06610-y

Slide 12

Slide 12 text

https://www.electricitymap.org/

Slide 13

Slide 13 text

The Internet produces about one billion tonnes of CO2 every year

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

The Internet is the largest coal-fired machine on earth

Slide 16

Slide 16 text

https://internethealthreport.org/2018/the-internet-uses-more-electricity-than/

Slide 17

Slide 17 text

Sustainability should be a bigger priority, especially as the Internet expands into new territory.

Slide 18

Slide 18 text

https://unfccc.int/process-and-meetings/the-paris-agreement/the-paris-agreement

Slide 19

Slide 19 text

https://www.americaspledgeonclimate.com/

Slide 20

Slide 20 text

http://www.clickclean.org/

Slide 21

Slide 21 text

Poorly performing websites are bad for the environment

Slide 22

Slide 22 text

https://speedcurve.com/blog/web-performance-page-bloat/

Slide 23

Slide 23 text

https://speedcurve.com/blog/web-performance-page-bloat/

Slide 24

Slide 24 text

https://speedcurve.com/blog/web-performance-page-bloat/

Slide 25

Slide 25 text

http://www.bristol.ac.uk/news/2019/may/rethinking-digital-service-design-.html

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Sustainable Human-Computer Interaction (SHCI)

Slide 28

Slide 28 text

https://loco2.com/

Slide 29

Slide 29 text

https://loco2.com/

Slide 30

Slide 30 text

https://www.gwr.com/

Slide 31

Slide 31 text

https://www.gwr.com/

Slide 32

Slide 32 text

https://www.mobike.com/

Slide 33

Slide 33 text

https://untoldcoffee.co.uk/

Slide 34

Slide 34 text

https://untoldcoffee.co.uk/

Slide 35

Slide 35 text

Sustainable Interaction Design (SID)

Slide 36

Slide 36 text

Switching off video playback while watching music videos Our example analysis of one straightforward SID intervention estimates that the emissions savings it enables are between 1% and 5% of the total emissions. This is comparable in scale to the existing reductions obtained by Google's purchase of renewable energy to power YouTube's servers. https://dl.acm.org/citation.cfm?doid=3290605.3300627

Slide 37

Slide 37 text

Sustainable Web Design (SWD)

Slide 38

Slide 38 text

Every byte transferred represents energy being consumed

Slide 39

Slide 39 text

https://aceee.org/files/proceedings/2012/data/papers/0193-000409.pdf

Slide 40

Slide 40 text

https://aceee.org/files/proceedings/2012/data/papers/0193-000409.pdf

Slide 41

Slide 41 text

5 kWh per GB (5W per MB)

Slide 42

Slide 42 text

Photo by Hunters Race on Unsplash

Slide 43

Slide 43 text

https://www.electricitymap.org/

Slide 44

Slide 44 text

Maths, yay! 290(g) / 1000 = 0.29g per Watt 5(W) x 10(MB) = 50W 0.29(g) x 50(W) = 14.5g of CO2

Slide 45

Slide 45 text

Our 10MB web page produces 14.5g of CO2 each time it's loaded* *uncached

Slide 46

Slide 46 text

Photo by System 76

Slide 47

Slide 47 text

Sustainable Web Design 1. Cut digital waste 2. Improve user experience 3. Use renewable energy

Slide 48

Slide 48 text

Sustainable Web Design 1. Cut digital waste 2. Improve user experience 3. Use renewable energy

Slide 49

Slide 49 text

The rule of least power Computer Science spent the last forty years making languages which were as powerful as possible. Nowadays we have to appreciate the reasons for picking not the most powerful solution but the least powerful. Tim Berners-Lee Aside: I discovered this via Charlie Owen: www.sonniesedge.net https://www.w3.org/2001/tag/doc/leastPower.html

Slide 50

Slide 50 text

Translation: Don't use jQuery when you don't need to. Don't use JavaScript when CSS will do. Pro-tip: Check out youmightnotneedjquery.com

Slide 51

Slide 51 text

Translation of that translation: Transmit the fewest bytes possible.

Slide 52

Slide 52 text

Simplify the user interface Do you really need: background videos? social media embeds? carousels?

Slide 53

Slide 53 text

Reduce code Create lean HTML Simplify CSS Use less script

Slide 54

Slide 54 text

The most performant, accessible and easily maintainable feature of a website is the one that you don't make in the first place. Heydon Pickering

Slide 55

Slide 55 text

Tree shaking

Slide 56

Slide 56 text

https://www.freecodecamp.org/news/how-i-dropped-250kb-of-dead-css-weight-with-purgecss-28821049fb/

Slide 57

Slide 57 text

Use less script This button weighs 50 KB. A plain text link uses almost zero bytes.

Slide 58

Slide 58 text

Images Use the correct image Compress images as much as possible Lazy load

Slide 59

Slide 59 text

A word about fonts Subset for just the characters you need Be sparing in how many fonts you load Serve them only in the .woff2 format if possible

Slide 60

Slide 60 text

Backend stuff Use HTTPS over HTTP2 Nginx with FastCGI Cache WP Super Cache gzip and brotli compression

Slide 61

Slide 61 text

https://3perf.com/talks/web-perf-101/

Slide 62

Slide 62 text

Sustainable Web Design 1. Cut digital waste 2. Improve user experience 3. Use renewable energy

Slide 63

Slide 63 text

Improve user experience Search Engine Optimisation (SEO) Accessibility-first mentality Follow best practices

Slide 64

Slide 64 text

Sustainable Web Design 1. Cut digital waste 2. Improve user experience 3. Use renewable energy

Slide 65

Slide 65 text

https://www.thegreenwebfoundation.org/

Slide 66

Slide 66 text

https://www.hetzner.de/

Slide 67

Slide 67 text

https://www.dreamhost.com/

Slide 68

Slide 68 text

https://cloud.google.com/

Slide 69

Slide 69 text

Putting this in practice (and taking it to an extreme) No images No sidebar No embeds No menu navigation (it's on its own page) Almost no additional HTTP requests

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

https://underscores.me/

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

https://www.webpagetest.org/

Slide 75

Slide 75 text

Susty 93 lines of HTML 2.5KB of CSS (compressed with gzip) 3 requests per page, CSS, SVG logo 0KB of JavaScript 0.01g of CO2 per page view

Slide 76

Slide 76 text

https://ecograder.com/

Slide 77

Slide 77 text

https://www.websitecarbon.com/

Slide 78

Slide 78 text

https://cloverly.com/

Slide 79

Slide 79 text

In the Real World

Slide 80

Slide 80 text

https://webperf.xyz/

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

(201KB)

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

(417KB)

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

(213KB)

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

(423KB)

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

(435KB)

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

(11KB)

Slide 93

Slide 93 text

In conclusion Set performance budgets: 500KB per page is a good starting point Adopt the rule of least power No-one will care about their websites if we're all fighting over water

Slide 94

Slide 94 text

https://www.change.org/p/sustainable-servers-by-2024

Slide 95

Slide 95 text

https://www.sustainablewebmanifesto.com/

Slide 96

Slide 96 text

https://sustainableux.com/

Slide 97

Slide 97 text

https://climateaction.tech/

Slide 98

Slide 98 text

Sustainable websites are More performant More user-friendly More accessible More server-friendly More -friendly

Slide 99

Slide 99 text

We're hiring: wpvip.com/careers

Slide 100

Slide 100 text

Vielen dank!

Slide 101

Slide 101 text

Any questions? @jacklenox | [email protected]

Slide 102

Slide 102 text

Bibilography electricityMap: www.electricitymap.org Internet Health Report: internethealthreport.org Greenpeace's ClickClean: www.clickclean.org "The average web page is 3MB. How much should we care?", Tammy Everts: speedcurve.com/blog/web-performance-page-bloat/ "Designing for actual performance", Adam Silver: adamsilver.io/articles/designing-for-actual- performance/ "Writing Less Damn Code", Heydon Pickering: www.heydonworks.com/article/on-writing-less- damn-code "How I dropped 250KB of dead CSS weight with PurgeCSS", Sarah Dayan: medium.freecodecamp.org/how-i-dropped-250kb-of-dead-css-weight-with-purgecss- 28821049fb

Slide 103

Slide 103 text

Web Performance 101: 3perf.com/talks/web-perf-101 The Green Web Foundation: www.thegreenwebfoundation.org SustyWP: sustywp.com WebPagetest: www.webpagetest.org EcoGrader: ecograder.com WebsiteCarbon: www.websitecarbon.com Sustainable Servers petition: www.change.org/p/sustainable-servers-by-2024 SustainableUX: sustainableux.com Climate Action Tech: climateaction.tech