Nachhaltigkeit und Webdesign

Diesen Artikel habe ich zuerst auf dem Niemblog gepostet. Kommentare zum Beitrag kannst du gern auf Sabrinas Blog schreiben. 😉


Dies ist, neben dem Interview, das ich geben durfte, mein erster Artikel auf dem Niemblog und ich bin ein bisschen aufgeregt. 🙂 Ich beleuchte heute mal einen ganz anderen Bereich, in dem das Thema Nachhaltigkeit noch keine große Aufmerksamkeit bekommt. Einen Bereich, den wir alle nutzen und lieben: das Internet. Es erlaubt uns, wĂ€hrend dieser merkwĂŒrdigen Zeit in Kontakt zu bleiben. Wir können uns sehen, obwohl wir nicht am selben Ort sind. DafĂŒr bin ich unglaublich dankbar! Allerdings verbraucht selbstverstĂ€ndlich auch das Internet Ressourcen: Mineralien und Metalle fĂŒr die Computer und Kabel und nicht zuletzt Strom, der erzeugt wird. Wie viele Ressourcen das Internet verbraucht, ist fĂŒr uns schwer greifbar, weil „das Internet“ kein Gegenstand ist, den man anfassen kann. Es setzt sich aus vielen einzelnen Teilen (Computern) zusammen.

Laut Tom Greenwood verbraucht das Internet jĂ€hrlich so viel CO2 wie Deutschland1. WĂ€re das Internet ein Land, dann stĂŒnde es an sechster Stelle bei den grĂ¶ĂŸten CO2-Vebrauchern. Aber dies hier wĂ€re nicht der Niemblog, wenn wir nur Probleme wĂ€lzen. Das Gute an Technik ist: Sie lĂ€sst sich Ă€ndern. An einem Beispiel zeige ich euch wie das „im Kleinen“ gehen kann. Im Anschluss habe ich auch noch ein paar Anregungen fĂŒr alle Techniker*innen unter euch, die etwas mehr verĂ€ndern möchten.

Der „kleine“ Teil, den ich heute betrachten möchte, sind Webseiten und deren Nachhaltigkeit. Dieser Artikel richtet sich daher vor allem an Menschen, die eine eigene Webseite betreiben.

Wie viel CO2 verbraucht ein Webseitenbesuch?

Also kommen wir gleich zum Punkt: Weißt du auch, wie viel CO2 ein Besuch auf deiner Webseite verbraucht?

Falls nicht, dann kannst du es mit dem Website Carbon Calculator prĂŒfen. Die Seite prĂŒft zum einen, wie groß die Webseite ist. Zum anderen prĂŒft sie, ob das System auf dem die Seite lĂ€uft, mit erneuerbarer oder Kohle-Energie versorgt wird. Diese Faktoren rechnet der Website Carbon Calculator in einen CO2-Wert pro Besucher*in um. Denn pro Mensch auf deiner Webseite wird Energie benötigt um die Seite zu ĂŒbertragen und anzuzeigen.

Nerd-Tipp: Falls dich interessiert wie genau MB in CO2 umgerechnet werden, schau‘ einfach nach. Die Website-Carbon-API ist unter einer Open Source Lizenz öffentlich sichtbar: https://gitlab.com/wholegrain/carbon-api-2-0

website-carbon Ergebnisse fĂŒr den Niemblog: "Hurrah! This web page is cleaner than 55% of web pages tested. Only 0.82g of CO2 is produced every time someone visits this website."

Neben einer CO2 Angabe bekomme ich auch einen Hinweis wie „dreckig“ meine Webseite ist. Das kann manchmal wehtun… Aber halte durch, es gibt Lösungen und nur wenn wir uns dem Problem stellen, können wir es auch beheben.

Falls deine Webseite durch einen geringen Fußabdruck glĂ€nzt, dann gratuliere ich dir! Du brauchst vermutlich nicht weiter lesen. 😉

Was kann ich tun, wenn meine Seite viel CO2 verbraucht?

Du hast zwei Möglichkeiten:

  1. Bilder und Videos reduzieren
  2. genauer forschen weshalb die Seite grĂ¶ĂŸer als nötig ist

Ja genau
 die Forschung habe ich an zweiter Stelle gesetzt, da es bei den meisten privaten Webseiten eh auf Bilder und Videos hinauslĂ€uft. Diese Daten haben oft den grĂ¶ĂŸten Anteil an einer Webseite.

Ein paar Faustegeln

  • Speichere Fotos im JPG-Format oder nutze ein neueres Format wie z.B. WebP.
  • Bei JPG ist eine QualitĂ€tseinstellung von 80 normalerweise ausreichend und wesentlich kleiner als z.B. QualitĂ€t 85 oder 90.
  • Nutze SVG fĂŒr Vektorgrafiken. SVGs sind letztlich auch Textdateien (xml) und damit oft kleiner als PNG. FĂŒr WordPress benötigst du dafĂŒr das Plugin Safe SVG.
  • Meide .png-Dateien wo es möglich ist. Das Format hat eine hohe QualitĂ€t, aber es ist entsprechend groß. Nutze es sehr bewusst.
  • Speichere Bilder in der GrĂ¶ĂŸe ab, in der sie angezeigt werden. Ich habe schon oft gesehen, dass ein Bild 1900px breit ist und dann nur als mittelgroßes Bild mit 300px Breite angezeigt wird. Die Bilddatei ist dann um ein vielfaches kleiner.
  • Lade Videos erst, wenn sie angeklickt wurden und nicht beim Laden der Seite.

Falls du nun denkst: „Das ist aber eine Fitzelarbeit.“, dann verzweifle nicht: Es gibt Hilfe!

Hilfreiche WordPress Plugins

Hast du zum Beispiel eine Seite, die mit WordPress lĂ€uft, können die Plugins helfen eine grĂŒnere, nachhaltigere Webseite zu bauen. Installiere dir ein Plugin, welches Bilder beim Hochladen automatisch in JPG umwandelt und die Maße des Bildes reduziert. Mögliche Kandidaten sind

  • Imsanity: Du kannst die maximale BildgrĂ¶ĂŸe und die JPG-QualitĂ€t beim Hochladen einstellen, sowie BMPs und PNGs in JPGs umwandeln.
  • Smush: Komprimiert alle Bilder beim Hochladen. Außerdem kannst du einstellen, dass Bilder erst geladen werden, wenn sie angezeigt werden (Lazy Load). Auch hier kannst du die maximale BildgrĂ¶ĂŸe einstellen und sofort alle vorhandenen Bilder auf diese GrĂ¶ĂŸe verkleinern.
  • Resize Image After Upload: Du kannst die maximale BildgrĂ¶ĂŸe und die JPG-QualitĂ€t beim Hochladen einstellen, sowie PNGs in JPGs umwandeln.

Wenn du YouTube-Videos einbindest, sorgt das Plugin DSGVO YouTube dafĂŒr, dass die Videos erst geladen werden, sobald sie angeklickt wurden. Ganz nebenbei bindest du die YouTube-Videos so auch DSGVO-konform ein.

Auch die Wahl deines Themes kann helfen. Themes, die „responsive“ und „mobile first“ verinnerlicht haben, sind meist auch kleiner im digitalen Fußabdruck — und erfreuen nebenbei auch Menschen, die mit dem Smartphone deine Seite besuchen.

Das hilft Nichttechniker*innen schon mal weiter. Aber meiner Meinung nach reicht das lange nicht aus.

Was kann ich als Mensch im Tech-Bereich tun?

Wir „Techniker*innen“ haben die Aufgabe das Web „grĂŒner“ zu gestalten! Falls auch du im Tech-Bereich arbeitest oder dich das Thema interessiert, dann empfehle ich dir das Buch „Sustainable WebDesign“ von Tom Greenwood.

Die Werkzeuge (Programme), die wir bereitstellen, mĂŒssen es allen anderen so einfach wie möglich machen, CO2-arme Webseiten zu gestalten.

Hier ein paar erste Ideen:

  1. Ich wĂŒnsche mir, dass Plugins zum Reduzieren der BildgrĂ¶ĂŸe bei WordPress automatisch vorgeschlagen werden. Mit „opt-out“ könnten sie abgeschaltet werden fĂŒr die Menschen, die das bewusst möchten.
  2. Hoster & Professionelle Webentwickler*innen mĂŒssen Nachhaltigkeit mit in ihre Prozesse integrieren. So wie UX, Clean Code & Tests (die ĂŒbrigens alle auf Nachhaltigkeit einzahlen), sollten wir uns auf MaßstĂ€be einigen was nachhaltige Webseiten ausmacht, und was nicht.
  3. Priorisiere das Thema in deinem Projekt. Das heißt: Achte auf „Mobile First“, Barrierefreiheit und Performance der Webseiten.

Ich freue mich, wenn du ein paar von den VorschlÀgen ausprobierst und deine Erfahrungen in den Kommentaren teilst.

  1. Greenwood, T. (2021). Sustainable WebDesign (1. Aufl.). A Book Apart. Seite 5, Fig.1.1. []

social