Warum unser Web nachhaltiger werden muss und wie wir das anstellen!

A presentation at HackUnity MV in October 2019 in Schwerin, Germany by Niklas Jordan

Slide 1

Slide 1

The Planet Friendly Web Warum unser Web nachhaltiger werden muss und wie wir das anstellen! bit.ly/pfw-hackunity

Slide 2

Slide 2

Teaching climate crisis thread for 4-7 year-olds, by @JKSteinberger

Slide 3

Slide 3

The Water Cycle (Quelle: Wikipedia)

Slide 4

Slide 4

Infografik zeigt Erderhitzung in Deutschland (showyourstripes.info)

Slide 5

Slide 5

Auge des Hurricane Dorian (Copernicus Sentinel data – 2019/ESA)

Slide 6

Slide 6

Im „echten“ Leben spielt Nachhaltigkeit zunehmend eine große Rolle…

Slide 7

Slide 7

Bitte denken Sie an unsere Umwelt, bevor Sie diese E-Mail ausdrucken. Hinweis in Signaturen zum nachhaltigen Umgang

Slide 8

Slide 8

Möglicher Hinweis auf Website

Slide 9

Slide 9

Hinweis auf solar.lowtechmagazine.com

Slide 10

Slide 10

By day technology advocate for #environment issues, #Tech4Wildlife, #TechEthics, #OpenScience & #UX, by night, studying #EarthScience. Loves rough weather! @niklas_jordan niklasjordan.com/newsletter

Slide 11

Slide 11

Internet 830 Mio. t CO2 Emissionen pro Jahr (Quelle: alistapart.com/article/sustainable-web-design)

Slide 12

Slide 12

Quelle: www.co2-emissionen-vergleichen.de

Slide 13

Slide 13

Internet Data Center 830 Mio. t 332 Mio. t CO2 Emissionen pro Jahr (Quelle: alistapart.com/article/sustainable-web-design)

Slide 14

Slide 14

Daten

Slide 15

Slide 15

Daten

Elektrizität

Slide 16

Slide 16

Daten

Elektrizität

CO2

Slide 17

Slide 17

Grafik: aus dem Buch Designing for Sustainability von Tim Frick (O’Reilly)

Slide 18

Slide 18

Illustration von Artiom Dashinsky (uxdesign.cc/product-design-for-sustainability)

Slide 19

Slide 19

  1. Woher kommt die Energie, die meinen Server versorgt? 2. Wie viel Ressourcen sende ich? 3. Gehe ich mit externen Ressourcen verantwortungsvoll um?

Slide 20

Slide 20

  1. Woher kommt die Energie, die meinen Server versorgt? 2. Wie viel Ressourcen sende ich? 3. Gehe ich mit externen Ressourcen verantwortungsvoll um?

Slide 21

Slide 21

Aus dem ClickClean-Report von 2017: clickclean.org/germany/de/

Slide 22

Slide 22

Checke ob eine Website mit grüner Energie betrieben wird: thegreenwebfoundation.org

Slide 23

Slide 23

  1. Woher kommt die Energie, die meinen Server versorgt? 2. Wie viel Ressourcen sende ich? 3. Gehe ich mit externen Ressourcen verantwortungsvoll um?

Slide 24

Slide 24

Berechne die CO2 Emissionen deiner Website: websitecarbon.com

Slide 25

Slide 25

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

Slide 26

Slide 26

Werbung bläht Seiten auf (Grafik: New York Times)

Slide 27

Slide 27

Quelle: cnet.com/news/web-sites-are-getting-faster-but-not-enough/

Slide 28

Slide 28

Definiere ein Performance Budget: performancebudget.io

Slide 29

Slide 29

Beispiel: wikipedia.de

Slide 30

Slide 30

Beispiel: wikipedia.de

Slide 31

Slide 31

Beispiel: wikipedia.de

Slide 32

Slide 32

Beispiel: wikipedia.de

Slide 33

Slide 33

Beispiel: wikipedia.de

Slide 34

Slide 34

170 Mio. Impressionen (pro Monat) Rechenbeispiel: Impressionen von Wikipedia

Slide 35

Slide 35

170 Mio. * 25 kb Rechenbeispiel: Impressionen * eingespartes Dateivolumen

Slide 36

Slide 36

170 Mio. * 25 kb = 4352 Gb Rechenbeispiel: ergibt das eingesparte Volumen

Slide 37

Slide 37

170 Mio. * 25 kb = 4352 Gb - 30% (Caching) Rechenbeispiel: ergibt das eingesparte Volumen

Slide 38

Slide 38

170 Mio. * 25 kb = (4352 Gb - 30%) * 5 kWH Rechenbeispiel: 1 Gb benötigt ca. 5 kWh Leistung

Slide 39

Slide 39

170 Mio. * 25 kb = (4352 Gb - 30%) * 5 kWH = 15.232 kWh Rechenbeispiel: ergibt 15.232 kWh – eingesparte Leistung durch das verringern der Größe einer Datei

Slide 40

Slide 40

7t Rechenbeispiel: eingesparte CO2 Emissionen in Tonnen

Slide 41

Slide 41

14 x Berlin > London

Slide 42

Slide 42

Greenhouse - Lighthouse, but for carbon emissions (github.com/thegreenwebfoundation)

Slide 43

Slide 43

Videos sind für 60% des weltweiten Datenverkehrs verantwortlich (Quelle: The Shift Project)

Slide 44

Slide 44

Lite-Website von CNN (lite.cnn.com)

Slide 45

Slide 45

Lite-Website von NPR (text.npr.org)

Slide 46

Slide 46

  1. Woher kommt die Energie, die meinen Server versorgt? 2. Wie viel Ressourcen sende ich? 3. Gehe ich mit externen Ressourcen verantwortungsvoll um?

Slide 47

Slide 47

Ethical Design Manifesto von ind.ie

Slide 48

Slide 48

Business Case

Slide 49

Slide 49

Wenn der Seitenaufruf sich um eine Sekunde verlangsamt, sinken die Umsätze jährlich um 1,6 Milliarden Euro. Amazon

Slide 50

Slide 50

Neue Nutzer gewinnen Business Case Verbesserte User Experience Geld sparen Optimierung für Suchmaschinen

Slide 51

Slide 51

Ziehe zu einem grünen Hoster um Checke deine verursachten Emissionen Optimiere deine Performance, UX, A11y und Inhalte

Slide 52

Slide 52

Noch was?!

Slide 53

Slide 53

Sprich darüber! Article: How to Have a Useful Conversation About Climate Change in 11 Steps

Slide 54

Slide 54

Engagiere dich politisch! globalclimatestrike.net

Slide 55

Slide 55

“The web must be an environmentally sustainable platform The web, as a whole, is a big consumer of power. New web technologies should not make this situation worse. We will consider power consumption when we introduce new technologies to the web.” W3C Technical architecture group Engagiere dich professionell! W3C Ethical Web Principles

Slide 56

Slide 56

Engagiere dich professionell!

Slide 57

Slide 57

ClimateAction.tech

Slide 58

Slide 58

techimpactmakers.com

Slide 59

Slide 59

Illustration von Artiom Dashinsky (uxdesign.cc/product-design-for-sustainability)

Slide 60

Slide 60

Hört auf Captain Planet…

Slide 61

Slide 61

Danke. bit.ly/pfw-hackunity @niklas_jordan niklasjordan.com/newsletter