Komm, wir machen das Internet sauberer!

Durch den Datentransfer, den Energieverbrauch im Rechenzentrum und den für die Endgeräte eingesetzten Strom wird jedes Mal, wenn jemand eine Website aufruft, CO2 ausgestoßen.

Unser Ziel ist es, das Internet ein bisschen nachhaltiger zu machen, deshalb bieten wir nicht nur relevante Statistiken, bei denen die Daten zu 100% dir gehören, sondern leisten mit dir zusammen einen Beitrag für ein besseres Klima und gleichen den durch deine Website verursachten CO2-Ausstoß mit Hilfe von atmosfair.de aus.

Nur mit dem Ausgleich der verursachten CO2-Emission ist es aber natürlich nicht getan, deshalb findest du auf dieser Seite auch Tipps, wie du die CO2-Emissionen deiner Website zusätzlich reduzieren kannst.

Welche Vorteile hat nachhaltiges Webdesign?

Wenn du deine Website optimierst, um weniger Datentransfer und CO2-Emissionen zu verursachen, hat das noch mehr Vorteile für dich:

  • User Experience: es gibt einen großen Zusammenhang zwischen nachhaltigem Webdesign und besserer UX. Wenn ein Besucher schneller zu seinem Ziel findet, ist er nicht nur glücklicher und bricht weniger wahrscheinlich sein Vorhaben (bspw. den Kauf eines Produkts in deinem Online-Shop) ab, sondern es werden dadurch auch weniger Ressourcen verbraucht.
  • SEO: Für Suchmaschinen wird die Ladezeit einer Website immer relevanter in der Bewertung. Effiziente Websites mit geringeren Datenmengen laden schneller und erscheinen somit weiter oben in den Suchergebnissen großer Suchmaschinen.
  • Barrierefreiheit: Besucher haben verschiedene Bedürfnisse. Schlechte Internetverbindungen, alte Endgeräte, teure Datenvolumen-Tarife: wenn deine Website optimiert ist und für all diese Gruppen gut und schnell funktioniert, erreichst du mehr Menschen.
  • Hosting-Kosten: besser an die Anforderungen deiner Website angepasstes Hosting reduziert die Kosten für dich.
  • Zukünftige CO2-Regulierungen: mit hoher Wahrscheinlichkeit wird es in kommender Zeit eine Form von Abgaben oder Steuern auf CO2-Ausstöße geben. Bereite dich jetzt vor und reagiere nicht erst, wenn es zu spät ist.
  • Ein USP: Wenn deine Website oder dein Online-Angebot weniger CO2-Ausstöße verursacht und/oder diese kompensiert, kannst du das auch kommunizieren. Eine wachsende Anzahl von Besuchern bewertet das positiv.

Anleitung zur Reduzierung von Website-Emissionen

Allgemeine Tipps

Weniger CO2-Emissionen = Bessere User Experience

Wie oben erwähnt, geht die Optimierung deiner Website auf möglichst wenig CO2-Emissionen zu optimieren, oft mit der Verbesserung der User Experience einher. Das ist gut für dich, denn so schlägst du gleich zwei Fliegen mit einer Klappe. Als erstes gilt:

Ein konkreter Plan schafft Klarheit.

Auf Basis der aktuellen Daten aus inSites und dem Vergleich mit anderen Seiten kannst du überlegen, wie viele CO2-Emissionen man bei deiner Website einsparen könnte.

Schaue dir einzelne Abschnitte und Bestandteile deiner Website an und überlege: Bringt dieser Teil der Website einen Vorteil für deine Besucher? "If in doubt, leave it out!" (Vorbild-Beispiel: die sehr reduzierte google.com Frontpage) – Minimalismus hat viele Vorteile, besonders auch für deine Besucher. Ihnen wird klarer, was Sinn und Zweck deiner Website ist. Zudem kannst du anhand deiner Statistiken auch erkennen, welche Seiten häufig angeklickt werden und welche sehr selten. Sortiere hier ruhig aus, oder fasse zusammen.

Eine gute Navigation ist ein Schlüssel

Schaue die "User Journey" auf deiner Website an. Wie viele Klicks (neue Page Loads bzw. Views) brauchen die Besucher, um zum gewünschten Ziel zu kommen? Lässt sich die Zahl verkleinern? Beispiel: Eine Möbel-Website, die sämtliche Möbel-Kategorien und deren Unterkategorien in ihrer Navigation schon enthält, führt den User sehr schnell zur gewünschten Unterkategorie → nur ein Klick, nicht zwei oder sogar mehr. Das spart nicht nur den Datentransfer, sondern führt auch zu zufriedeneren Besucher*innen.

Gute Navigationen sind ein Schlüssel: sie vermeiden auch "Yoyo Browsing", d.h. ein User klickt, merkt dann, dass er nicht da ist wo er hinwollte, und müsste bei einer Website mit schlechter Navigation erst wieder zurück zur Startseite um den richtigen Weg zu finden. Ist die Navigation besser strukturiert, kommt er mit weniger Klicks zum Ziel.

Menschen verstehen, für Menschen gestalten

Textlängen reduzieren: bringen zwar wenig Einsparung der Datenmenge, aber die Summe macht's. Vermeide Duplicate Content und optimiere deine Texte auf auf menschliche Lesbarkeit. Keiner liest gerne ewig lange Texte und auch Suchmaschinen finden das inzwischen unattraktiv, da sie versuchen, das Verhalten von Menschen zu imitieren, um die bestmöglichen Ergebnisse anzuzeigen.

Übrigens: Es muss nicht immer schlecht sein, wenn deine Bounce Rate hoch ist. Vielleicht hat der Besucher schon mit dem Aufruf einer einzigen Seite gefunden, was er wollte? Überprüfe am besten genauer, warum die Besucher auf einer Seite bouncen, sie also ohne weitere Klicks wieder verlassen.

Technik-Tipps

Bilder und Videos optimieren

Der richtige Umgang mit Bildern kann große Datenmengen einsparen.

  • Benutze am besten das WEBP-Format für Fotografie, denn im Schnitt ermöglicht es 30% geringere Dateigrößen als JPEG. Mehr Informationen und Tools findest du hier: https://webponize.org, https://www.gimp.org
  • Behalte das AVIF-Format für Bilder im Auge, es ist noch effizienter (ca. die Hälfte der Größe von WEBP), aber wird noch nicht universell unterstützt.
  • PNG und GIF sind für simple Grafiken und Illustrationen mit nur wenigen Farben und Verläufen effizienter.
  • Für Video-Dateien ist das MP4-Format effizienter als GIF und bringt auch bessere Bedienbarkeitshilfen wie die leichte Integration von Untertiteln oder eine Beschreibung des Videoinhalts.
  • Überdenke, in welchen Pixel-Dimensionen deine Bilddateien notwendig sind. Werden sie als kleine Vorschau-Grafiken (Thumbnails) genutzt, oder als große Hintergrundbilder? Denke an Responsiveness: verschiedene Gerätegrößen erfordern verschiedene Dimensionen der Dateien. Mit HTML-Attributen wie srcset und sizes kannst du dem Browser sagen, welche Bild-Version in welchem Gerät geladen und verwendet werden soll. So werden nur die notwendigen Dimensions-Versionen der Dateien geladen.
  • Benutze für Bilddateien abschließend Kompressions-Tools wie Shortpixel, TinyPNG und ImageOptim, welche die Dateigrößen mittels schlauer Algorithmen ohne sichtbare Qualitätsverluste verringern.
  • Fotos haben meist einen wichtigen zentralen Fokuspunkt. Der Rest drum herum kann verschwommen (blurry) sein, ohne dass Menschen es für einen visuellen Nachteil halten bzw. es ihnen überhaupt auffällt. Verschwommene Bereiche eines Fotos sparen eine unerwartet große Menge an Dateigröße.
  • Vektor-basierte Dateiformate wie SVG eignen sich sehr gut für Icons oder Logos und haben eine extrem geringe Dateigröße. Sie können auch direkt in den HTML-Code deiner Website integriert werden, was zusätzliche Server-Requests spart.
  • Dunklere Designs schonen nicht nur die Augen, sondern benötigen auch weniger Energie der LEDs und OLEDs in Bildschirmen. Das spart auch Batterielaufzeit auf den Endgeräten! Beispiel: Google Maps verbraucht im Nachtmodus im Schnitt 63% weniger Energie.
  • Auch Farben spielen eine Rolle: um blaue Farbe anzuzeigen, benötigen die LEDs und OLEDs in den Geräten bis zu 25% mehr Energie als für rote und grüne Farbtöne. Schwarz benötigt die geringste Menge.
  • Videos und Animationen können eine Website interessanter machen, verbrauchen aber viel Speicherplatz, Energie und damit auch Akkuladung. Bewerte Video-Inhalte also nach dem Maßstab, ob sie den Nutzen für den Besucher wirklich deutlich steigern. Tools wie “Lottie”, ein Service der Firma Airbnb, können hier große Dateigrößenersparnisse erzielen.
  • Vermeide AutoPlay bei Videos: nur wenn ein Besucher ein Video auch wirklich sehen möchte, sollte es geladen werden.
  • Jede Sekunde eines Videos braucht mehr Speicherplatz und somit Energie als ein einziges JPEG-Bild. Mache deine Videos also kürzer und, wenn möglich, ersetze sie durch Bilder. Denke dabei an den User und den zu übermittelnden Inhalt.
  • So cool GIFs auch sind, sie sind mit die ineffizientesten Videodateien überhaupt. Versuche, wenn möglich, sie in das WEBP-Format zu konvertieren, welches breite Unterstützung aktueller Browser genießt.
  • Effekte und Animationen, die mit CSS und JavaScript erzeugt werden, können eine Website interessanter und lebendiger machen. Generell ist die Dateigröße solcher Animationen niedriger als bei Videos, dafür wird die Hardware (CPU und GPU) des Endgerätes vom Besucher stärker für die Berechnung gefordert. Nicht alle Nutzer haben energieeffizienteste Geräte zur Verfügung, daher ist es rücksichtsvoller, die Hardware-Auslastung gering zu halten.
  • Fonts: Besondere Schriftarten sind eine sehr beliebte Methode, um Websites attraktiver zu machen, aber sie erzeugen zusätzliche Requests und damit auch ein höheres Page Weight (gesamte Dateigröße der Website). Das erhöht die Ladezeiten und den Energieverbrauch. Die effizienteste Wahl sind daher die vorinstallierten Schriftarten, wie Arial, Times New Roman, Helvetica und Roboto (Android). Wenn externe Fonts unvermeidlich sind, prüfe, ob du auf bestimmte Schnitte verzichten kannst: evtl. reichen dir “normal” und “fett”, und du kannst auf “dünn” und “halbfett” etc. verzichten. Benutze nach Möglichkeit Variable Fonts, die aus nur einem Schnitt alle Gewichtungen automatisch darstellen können.

Programmierung optimieren

  • Die Wahl der Programmiersprache. Ein sehr großer Teil des Internets ist in PHP und JavaScript geschrieben. Laut einem Vergleich der Effizienz verschiedener Sprachen liegen diese leider im hinteren Bereich. Gewinner sind Sprachen wie C, Java, Swift oder Go, die sich für Websites aber nicht so gut eignen. Allerdings gibt es auch noch ineffizientere Sprachen als PHP und JavaScript: Ruby, Python und Perl liegen auf den letzten Plätzen und sollten daher vermieden werden. (Studie: https://greenlab.di.uminho.pt/wp-content/uploads/2017/10/sleFinal.pdf)
  • Versuche, möglichst viele Seiten deiner Website vorzuberechnen und statisch auszuliefern. Statischer Inhalt ist immer effizienter als durch PHP oder mit Hilfe von JavaScript-Lösungen wie Angular, React oder Vue dynamisch erzeugter Inhalt.
  • Eine Methode dafür ist Caching. Dafür kannst du z. B. Plugins wie “WP Rocket” für WordPress nutzen.
  • Eine moderne Methode, den Aufbau einer Website zu strukturieren, ist das sogenannte JAMstack. Das steht für “JavaScript, APIs, and Markup”. Hierbei werden automatisch alle möglichen Inhalte deiner Website statisch ausgeliefert, ohne dass das daran angeschlossene CMS die Inhalte erst dynamisch erzeugen muss. Das CMS wird dabei auch nur dann aktiviert, wenn es genutzt wird um die Inhalte zu ändern. Das nennt man “serverless” Webdesign und das reduziert die Ressourcen nach Schätzungen um einen dreistelligen Faktor im Vergleich zu einer Standard-WordPress-Instanz.
  • Tracking-Skripte vermeiden. Mit inSites bist du schon auf dem richtigen Weg, denn die meisten anderen verbrauchen viel mehr Ressourcen. Das inSites-Tracking-Skript benötigt gerade einmal 0,2 Kilobytes, wohingegen Googles Tag Manager 28 kB, Google Analytics 17 kB oder Matomo/Piwik 22 kB benötigen.
  • Fonts, wenn sie für das Design gewünscht werden, können optimiert werden: konvertiere sie bspw. vom TTF-Format ins effizientere WOFF2-Format. Mit dem Webfont-Generator von Font Squirrel kannst du noch genauere Verbesserungen an deinen Fonts vornehmen: brauchst du eine Unterstützung sämtlicher Sprachen und deren Sonderzeichen im Font? Wenn du nur einen Teil (= Subset) des Fonts speicherst, welches du wirklich in der Website nutzt, kannst du die Dateigröße in wenigen Minuten deutlich reduzieren.
  • Komprimierung des Codes. Tools wie CodeKit konvertieren deinen Code in ein effizienteres Format. Das klappt mit JavaScript, CSS, PHP und sogar auch Bilddateien.
  • Unbenutzten CSS- und JavaScript-Code kann man mit dem Code Coverage Tool in Google Chrome identifizieren und dann ggf. entfernen.
  • Bots blockieren: Schätzungen zufolge wird etwa die Hälfte des weltweiten Internet-Traffics von Bots verursacht. Einige sind notwendig, um bspw. Suchindizes aktuell zu halten, aber viele Bots verursachen unnötige Serverlast ohne dass sie Vorteile bringen. Bots können von Firewalls blockiert werden, die einige Hosting-Services anbieten. Kontaktiere dafür deinen Hosting-Provider.

Hosting

  • Nur sehr wenige Websites könnten auf einem RaspberryPI zuhause gehostet werden – auch wenn das die wahrscheinlich effizienteste Methode wäre. Es muss aber auch nicht immer gleich der eigene große Server im Rechenzentrum sein. Versuche, die Hosting-Lösung zu finden, die optimal an den Ressourcenverbrauch deiner Website angepasst ist. Am einfachsten ist das über “shared hosting”, also das Nutzen eines Servers durch mehrere Websites, die ihn sich teilen. So bleiben weniger vorhandene Ressourcen ungenutzt.
  • CDNs (Content Delivery Networks) verteilen zumeist statische Dateien einer Website auf verschiedenen Servern und sind daher geographisch dichter an Besuchern, was die Megabyte-Miles (die physische Distanz, die die Daten z. B. zwischen dem Web-Server und dem Besucher zurücklegen) verringert und Ladezeiten verkürzt. CDNs sind allerdings bisher leider selten auf Nachhaltigkeit optimiert, daher muss man hier aufpassen, für welchen Anbieter man sich entscheidet.
  • Eine steigende Anzahl von Hosting-Anbietern werden mit 100% Ökostrom betrieben. Achte bei deiner Wahl darauf. Prüfe auch, auf welche Weise dein Hosting-Anbieter “100% Ökostrom” anbieten kann: besitzt er eigene Energiekraftwerke wie Solaranlagen oder Windkraftanlagen? Investiert er in solche? Benutzt er “schmutzige” Energie aber bezahlt den Ausgleich der CO2-Emissionen? Ein Hosting-Anbieter, der seinen eigenen Strom auf nachhaltige Art und Weise herstellt, ist vorzuziehen.

Fazit: Wie du siehst, gibt es für so gut wie jede Website der Welt viele verschiedene Methoden, sie auf Effizienz und damit Benutzerfreundlichkeit und Nachhaltigkeit zu optimieren. Oft reichen auch einige wenige “Quick Fixes”, um schnell einen großen Vorteil zu erreichen, ohne besonders viel Geld und Arbeitszeit investieren zu müssen. Nun liegt es an dir!

Für weitere Informationen und Studien zu vielen der angesprochenen Themen empfehlen wir die Lektüre des Buches “Sustainable Web Design” von Tom Greenwood, auf dem ein großer Teil dieser Tipps basiert.

Erklärungen:

Durchschnittliche transfer size

https://httparchive.org/reports/state-of-the-web#bytesTotal

https://httparchive.org/reports/page-weight

Status Januar 2021: Desktop: 2.063 kB, Mobile: 1.900 kB

Wenn du uns helfen willst, das Internet ein bisschen nachhaltiger zu machen, dann erzähle doch deinen Freund*innen von uns.