What WordPress developers can do about climate change

Slide 1

Slide 1 text

What WordPress developers can do about climate change Jack Lenox WordCamp Norrköping, August 2018

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Source: https://www.technologyreview.com/s/610457/at-this-rate-its-going-to-take-nearly-400-years-to-transform-the-energy-system/

Slide 14

Slide 14 text

What do you mean? I’m a web developer. The web’s green right?

Slide 15

Slide 15 text

No. Sorry.

Slide 16

Slide 16 text

The Internet uses a colossal amount of electricity

Slide 17

Slide 17 text

How much electricity?

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

How little? About 12-15%...

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

The Internet produces about one billion tonnes of CO₂ every year (and it's rising)

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

So what can I do?

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Dieter Rams’ 10 Principles of Good Design 1. Good design is innovative 2. Good design makes a product useful 3. Good design is aesthetic 4. Good design makes a product understandable 5. Good design is unobtrusive 6. Good design is honest 7. Good design is long-lasting 8. Good design is thorough down to the last detail 9. Good design is environmentally friendly 10. Good design is as little as possible

Slide 38

Slide 38 text

In essence, making websites sustainable means reducing the compute cycles required to serve them, and powering them with renewable energy

Slide 39

Slide 39 text

Sustainable Web Design 1. Findability 2. Performance Optimisation 3. Design & User Experience 4. Green Hosting Source: https://sustainablewebdesign.org/

Slide 40

Slide 40 text

1. Findability “The easier content is to find, the fewer pages a user has to load to locate information. This means fewer server requests are made and that unnecessary page elements — like photos and videos, which take up a lot of bandwidth — don’t load, either. These small energy savings accumulate over time.” Source: https://sustainablewebdesign.org/

Slide 41

Slide 41 text

2. Performance Optimisation “Sustainability and page speed go hand-in-hand. When your website runs more efficiently, you use less processing power, which means that your site uses less energy and will have a lower carbon footprint. Your customers expect to get the content they want instantaneously, and efficient pages load more quickly, reducing your site’s bounce rate and keeping customers engaged and satisfied.” Source: https://sustainablewebdesign.org/

Slide 42

Slide 42 text

3. Design & User Experience “Sustainable design is design that is efficient and accessible. Creating good experiences for both mobile and desktop users improves accessibility because it makes it easy for people to access your site no matter what hardware they have. Mobile-first web design also helps you avoid loading large assets designed for desktop machines, which improves your site’s speed and energy efficiency.” Source: https://sustainablewebdesign.org/

Slide 43

Slide 43 text

4. Green Hosting “The servers that store the files that make up web pages require power 24 hours a day, so the single most impactful thing you can do to move toward a more sustainable website is use a hosting provider that runs on 100% renewable energy.” Source: https://sustainablewebdesign.org/

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

What does your website really need? Carousels? Embedded videos? Endless sidebars? Big, heavy images?

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

A bit about good practice 1. Simplify the interface 2. Reduce code i. Create lean HTML ii. Simplify your design system iii. Use less script, use preprocessors responsibly, use content breakpoints 3. Images i. Use the right image (gif, png, or jpg?) ii. Smush the shit out of them iii. Use progressive rendering 4. Backend stuff i. async and defer , preload and prefetch ii. HTTPS over HTTP2 (and PHP 7.2) iii. ABC: Always Be Caching

Slide 49

Slide 49 text

Taking this to an extreme...

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

246KB

Slide 55

Slide 55 text

6.7KB

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Do not go gentle into that good night. Rage, rage against the dying of the light. - Dylan Thomas

Slide 59

Slide 59 text

Tack @jacklenox

Slide 60

Slide 60 text

Några frågror?* @jacklenox * Snälla fråga inte på svenska, jag låtsas bara Slides available at: https://speakerdeck.com/jacklenox/what-wordpress-developers-can-do-about-climate-change