Nachhaltige Website

Der Umwelt- und Klimaschutz wird für Menschen immer bedeutsamer. Viele übersehen jedoch noch, dass auch eine Website Energie kostet und CO2 erzeugt. Klar ist, wer seinen CO2-Fußabdruck verkleinern will, der muss sich für mehr Energieeffizienz entscheiden. In diesem Wechsel muss auch die Technik angepasst werden. Daher ist Umwelt- und Klimaschutz auch ein Thema im Web, welches mehr und mehr an Beachtung und Bedeutung gewinnt bzw. gewinnen sollte. Denn das Internet ist in Wahrheit einer der größten CO2-Erzeuger weltweit.

Wie erzeugt eine Website CO2?

Fassen wir mal die Punkte, die eine Website braucht, zusammen. Sie besteht aus:

  1. dem Hoster/Server,
  2. der Website selbst – das heißt,  es braucht jemanden, der die Website an sich erstellt, im Falle eines CMS dieses kontinuierlich wartet und Updates durchführt und jemand, der die Seite dann verwaltet
  3. mindestens ein Device (Handy, Tablet, Laptop, Computer, Smart-TV etc.), um die Website aufzurufen bzw. allein schon, um das Internet zu nutzen.

Hoster

Die Daten einer Website brauchen Speicherplatz. Diese liegen auf dem Server des jeweiligen Hosters bzw. Rechenzentrums. Diese Server müssen selbst wieder hergestellt und gewartet werden. Dies erfolgt oft durch externe Geräte – in Form von PCs, die auf die Server zugreifen.

Es ist belegt, dass die Rechenzentren weltweit bereits mehr CO2 erzeugen als die Luftfahrtindustrie. Aktuell sind das etwa 33 Millionen Tonnen an CO2-Emissionen – Tendenz steigend. Denn es werden immer mehr Daten, auch in den Clouds.  Mehr Bilder, mehr Videos, mehr Dateien, mehr Websites und Plattformen. 

Das Resultat: mehr benötigter Speicher > mehr Server > mehr Strom > mehr CO2

Website

Jede Website hat eine bestimmte Größe an Bytes. Je größer die Seite, desto mehr muss übertragen werden. Je langsamer, desto länger muss man warten bis die Daten geladen wurden und damit wird natürlich auch mehr Engergie verbraucht. Außerdem haben Websites oft verschiedene Abhängigkeiten, wie z. B. CSS-Frameworks, JS-Frameworks, Content-Management-Systeme. Das alles ist Software, die wiederum selbst einen CO2-Fußabdruck mit sich bringt.

Device

Jedes Gerät braucht Strom, jeder Akku verbraucht und braucht wieder Strom.  Was erzeugt Strom als Nebenprodukt? Richtig, CO2 Sozusagen ist das eigene Gerät zum Aufruf der Website als letztes Glied der Kette mitverantwortlich für den Energieverbrauch.

Nachhaltige Website

Welche Maßnahmen lassen sich ergreifen, um die Website ökologisch effizienter zu machen? 

Bilder – Qualität statt Quantität

Man sollte sich schon im Vorhinein die Frage stellen, ob und welche Bilder an welcher Stelle Sinn machen. Ist das Bild wirklich nützlich für den Nutzer, um den Inhalt zu erfassen? Würde ein kleineres Bild reichen? Welche Kompressionsmöglichkeiten haben wir? Kann man mit Vektoren arbeiten? Können nicht sichtbare Bilder aufgeschoben werden?
Bilder brauchen auch Speicher und Ladezeit zum Abrufen. Daher ist es ratsam auch wirklich nur die Bilder auf die Website zu platzieren, die auch benötigt werden. Mobil sind auch viele Elemente und Funktionen deaktiviert, um die mobilen Daten der Nutzer zu schonen, darunter auch Bilder.

User-Experience mit Biss

Wer hatte den Fall noch nicht – man ist auf der Suche nach einem bestimmten Inhalt und scrollt deshalb durch eine Website, ohne fündig zu werden. Nur um später festzustellen, dass der Inhalt nur zwei Klicks entfernt war?

Effiziente Nutzerführung ist hier das Schlüsselwort. Wer schnell ans Ziel gelangt, der besucht weniger Seiten und spart dabei Energie.

Caching ist Pflicht

Im Optimalfall sollte man sowohl client- als auch serverseitiges Caching nutzen. Denn wenn Dateien und Seiten zwischengespeichert werden, ohne ständig Ressourcen neu anfordern zu müssen, bedankt sich die Natur.

Dies steigert auch die Geschwindigkeit der Website und je schneller die Website lädt, desto weniger Dateien werden meist übertragen. Ein Gewinn für den Planeten.

Nutzt aktuelle Versionen der Skriptsprachen

Ob PHP, Ruby, Python oder Node – neue Versionen glänzen in den allermeisten Fällen durch verbesserte Geschwindigkeit. Dies bezieht sich auch auf verbesserte Nutzung der Server-Ressourcen.  Zu guter Letzt beheben aktuelle Software-Versionen natürlich auch Sicherheitsprobleme.

Fear of the Dark

Der Dark Mode lässt sich mittlerweile an so ziemlich jedem Gerät einstellen. Microsoft, Apple und Google bieten ihn auf ihren Geräten an. Viele Anwendungen unterstützen ihn.

Nachhaltige Website Dark Mode

Mit dem Media-Query prefers-color-scheme lassen sich nun auch Websites direkt an dem vom Nutzer gewählten  Farbschema orientieren. Geräte mit OLED-Displays sparen hier gegenüber LCD-Displays im Dark Mode übrigens auch Energie, da OLED-Screens für Schwarz kein Backlight verwenden, die LCD-Screens jedoch für alle Pixel.

Zu guter Letzt ist der Dark Mode besonders in Umgebungen mit schwachem Licht behutsamer für die Augen – gesund für Mensch und Natur.

Schriften, die Unruhe stiften

Jeder mag einen tollen Font. Sie geben vielen Websites das gewisse Etwas. Doch die Dateien, die für Schriften geladen werden müssen, sind alles andere als klein. So verbrauchen alle Schriftschnitte für Roboto schon etwa 1.6 MB an Größe.

Welche Lösung bietet sich hier? Zuallererst sollte man nur die wirklich benötigten Schriftschnitte laden. Richtige Effizienz erlangt man aber durch die Nutzung systemeigener Schriften. Jeder Hersteller bietet Schriften auf seinem System an, die durchaus gut aussehen und verwendet werden dürfen.

In CSS sieht so etwas folgendermaßen aus:

font-family: system-ui, -apple-system, BlinkMacSystemFont, „Segoe UI“, Roboto, „Helvetica Neue“, Arial, „Noto Sans“, sans-serif, „Apple Color Emoji“, „Segoe UI Emoji“, „Segoe UI Symbol“, „Noto Color Emoji“;

Ökozertifiziertes Hosting

Hoster mit Ökostrom sind auch in Deutschland verbreitet. Man könnte also in Betracht ziehen, zu einem Hoster zu wechseln, der seine Ökobilanz im Auge hat.

Gutes SEO für einen grüneren Planeten

Wer suchet, der findet. Je schneller ein Nutzer an die gewünschten Informationen gelangt, desto besser ist das auch für Mutter Erde.

Aber: Jedesmal, wenn wir eine Suchmaschine nutzen, wird CO2 ausgestoßen. Deshalb sollten wir im Voraus überlegen, ob die Suche überhaupt nötig ist. Eine Suche bei Google kostet so etwa 0.2 bis 7 Gramm CO2 – ein Topf Tee kostet genauso 7 Gramm CO2.

Fazit:

Wie Sie sehen, gibt es bei der Erstellung, Verwaltung und Speicherung einer Website jede Menge Dinge, die leicht umgesetzt werden können, um Energie zu sparen. Auch Sie können dazu beitragen! Schauen Sie sich deshalb doch mal Ihre eigene Website an – erfüllt diese die aufgelisteten Punkte zur CO2-Einsparung? Sehen Sie Verbesserungspotenzial? Wir stehen Ihnen natürlich gerne beratend zur Seite.

Bildnachweis:

Bild-Nummer: 193946742 von georgejmclittle, 284508215 von ifeelstock, 50665830 von jd-photodesign stock.adobe.com

Picture of Maria Truckenbrodt

Maria Truckenbrodt

Hey, ich bin Maria und koordiniere als Leiterin der Webabteilung alles innerhalb und außerhalb des Teams. Am liebsten vertiefe ich mich momentan in Themen wie Usability und Projektmanagement und versuche dabei, das Beste für unsere Kunden und unser Team herauszuholen, denn im World Wide Web ist nichts unmöglich!
Suchen
Suche
Autoren

Wir denken strategisch, entwickeln systematisch und gestalten gewagt. Immer mit dem Ziel vor Augen, mittelständische Unternehmen zu besonderen Marken zu machen.

Webdesigner (m/w/d)

Wir entwickeln ganzheitliche Marketing-Konzepte für mittelständische Kunden aus dem (Genuss-)Handwerk. Unser Anspruch ist es, anders und laut zu gestalten, ganz nach unserem Motto ‚MOve Your Ass‘. Deshalb suchen wir ab sofort Verstärkung für unser Team.

Was wir suchen:

  • Eine herzliche und kollegiale Person, die unser Team verstärkt, mit uns lacht und mit der wir gemeinsam Herausforderungen angehen können
  • Fundiertes Wissen im Bereich der Gestaltung von Websites, Webshops sowie User Centered Design
  • UI & UX
  • Grundwissen in Suchmaschinenoptimierung
  • Gute Kenntnisse in HTML, CSS sowie SCSS
  • Gute Kenntnisse im Umgang mit Wordpress
  • Sicherheit im Umgang mit Adobe Creative Cloud, Schwerpunkt XD
  • Team- und Kommunikationsfähigkeit
  • Mut zu provokantem, polarisierendem und auffälligem Design

What you see is what you get:

  • Ein Team bestehend aus systematischen Marketern, leidenschaftlichen Programmierern und kreativen Designern, denen gemeinschaftliches Arbeiten, Zusammenhalt und Kollegialität sehr am Herzen liegen
  • Eine sehr gute Work-Life-Balance, die perfekt zu deinen Freizeitaktivitäten im schönen Frankenwald passt
  • Modernste Technik/Software und flexible Arbeitszeiten
  • Möglichkeit zum Homeoffice
  • Regelmäßige Kreativnachmittage zur Fortbildung und zum Austausch in der Gruppe
  • Agenturgedöns, wie Obstkorb, gefiltertes Wasser, Kicker und ab und an auch mal einen Hund, der auf deinen Füßen schläft