Skip to main content

Nachhaltiges Webdesign

netz.NRW Vortrag 16. Nobember 2023

„Wäre das Internet ein Land,
wäre es - basierend auf Daten aus 2020 - schon auf Platz vier
der größten Verursachern von Treibhausgasen.“

(Gesamtemissionen der ITC aus einer Studie von Freitag et al. aus dem Jahr 2021 im Vergleich zu den fossilen CO2-Emissionen nach Ländern, unter Verwendung von Daten aus der Emissionsdatenbank der Europäischen Union für globale Atmosphärenforschung (EDGAR) aus dem Jahr 2020)

Sustainable Web Manifesto

Wo entstehen die Emissionen und
wo wird der Strom verbraucht?

Wie können wir Einfluss nehmen?

Rechenzentren

Wählen Sie einen Webhoster, der für den Betrieb seiner Rechenzentren erneuerbare Energien einsetzt.

Eine detaillierte Liste finden Sie auf der Website der Green Web Foundation.

Datentransfer

Es hängt vom jeweiligen Strommix des Landes / der Region ab, ob fossile oder erneuerbare Energie für den Datentransfer genutzt wird.

Es macht Sinn, einen Webhoster wählen, dessen Rechenzentrum in der Nähe unserer Zielgruppe, also den BesucherInnen unserer Website liegt. Das ist für Websites mit regional relevantem Inhalt einfacher als bei internationalen Angeboten.

Endgeräte

REDUCE, REUSE, RECYCLE

  • Reparieren statt Austauschen
  • Refurbished statt Neu
  • Austauschbare Komponenten - Fairphones
  • Nutzungsdauer verlängern und seltener ein neues Gerät anschaffen

Shaving off a single kilobyte in a file that is being loaded
on 2 million websites reduces CO2 emissions by an estimated 2950 kg per month.

Danny van Kooten, CO2 Emissions on the Web

Nachhaltiges, klimafreundliches Webdesign

Eine Website, die komplett auf Layout, Bilder und Funktionen verzichtet, hat nur wenige Kb, sieht aber auch nicht wirklich ansprechend aus, wie in diesem Beispiel zu sehen ist »

Wir können jedoch einiges tun, damit auch anspruchsvoll gestaltete Seiten weniger Energie verbrauchen:

  • Fotos und Grafiken

    Die Optimierung von Bildern und Grafiken hat das größte Einsparpotential!

    Bildgröße: Maximal 100dpi / 1920px Breite

    Bildqualität: Die Bildqualität kann verlustfrei auf 60-70% reduziert werden.

    Dateiformate: Moderne Dateiformate wie WEBP oder AVIF sind effizienter als JPG und PNG.

    Lazy Load: Bilder erst laden, wenn sie im sichtbaren Bereich der Website auftauchen.

    Bildbearbeitungs- und Optimierungstools:

  • Videos und Animationen

    Videos haben schnell mal mehrere MB.
    Brauchen wir sie wirklich und wenn ja, in welcher Form?

    HD-Qualität macht auf Standard-Rechnern oder Smartphones wenig Sinn.

    Ein SD-Video hat eine geringes Datenvolumen und kann schneller geladen werden.

    Ohne inhaltlichen Mehrwert sind Videos oder Animationen verzichtbar.

    Automatisches Abspielen sollte deaktiviert werden. Wir überlassen den NutzerInnen die Entscheidung, ob sie das Video sehen möchten oder nicht.

    Erklärvideos können sehr gut durch animierte Slider ersetzt werden.

    Die Geschwindigkeit und Abfolge von Slidern sollten NutzerInnen selbst bestimmen - ein weiterer Vorteil gegenüber Videos.

  • Typografie

    Webfonts und Schriftschnitte - Weniger ist mehr!

    Die effizienteste Schrift für eine Website ist eine, die mein Gerät schon kennt.

    Websichere HTML-Fonts wie z.B. Helvetica, Georgia, Palatino, Verdana oder Arial sind standardmäßig und herstellerübergreifend auf allen Geräten installiert.

    Eine Liste dieser Schriften gibt es im Typolexikon »

    Alle anderen Schriftarten müssen wir den Website-Daten als Webfonts, z.B. als Google- oder Adobe-Fonts, hinzufügen. Je mehr Schriften und Schriftschnitte (normal, fett oder kursiv) wir verwenden, desto größer ist die zusätzliche Datenlast.

    Wenn wir Webfonts verwenden, reichen auch für aufwändige Layouts 1-2 Schriftarten und Schriftschnitte aus.

    Selbstverständlich sollten die Schriften lokal referenziert werden, also auf dem Server der Website liegen. Das vermeidet nicht nur externe Server-Requests, sondern ist auch datenschutzrechtlich zu empfehlen.

  • Cache - Effizienter Zwischenspeicher

    Beschleunigung der Ladezeiten

    Eine Website besteht aus einer großen Menge von Bild-, Skript- und Style-Dateien sowie Datenbank-Inhalten. Für eine funktionierende und lesbare Seite müssen all diese Elemente zusammengefügt werden.

    Damit dieser Prozess nicht bei jedem Seitenaufruf vom Server erneut ausgeführt werden muss, behält der Server, der Browser und das CMS die Elemente im internen Gedächtnis, dem Zwischenspeicher.

    Das erhöht die Performance und beschleunigt die Darstellung der Seite auf dem Endgerät. Es finden weniger Server-Requests statt, weswegen auch weniger Energie für die Darstellung der Website benötigt wird.

    Es gibt verschiedene Arten von Caches, die, wenn sie richtig eingesetzt werden, alle sehr wirksam die Effizienz einer Website erhöhen können.

    Etwas lästig kann das werden, wenn inhaltliche Aktualisierungen erst durch das Löschen des Caches sichtbar sind.

  • Klare Strukturierung und Benutzerführung

    Jeder Klick verbraucht Ressourcen

    Bei jedem Klick werden Daten übertragen und jedes Mal wird dabei Strom verbraucht.

    Die Struktur einer Website sollte sich an den Bedürfnissen der Nutzer orientieren, damit sie schnell zu den gewünschten Inhalten kommen.

    Bei der Konzeption einer Website macht es also Sinn, Personas und User Journeys zu entwickeln, denn übersichtliche Gestaltung und klare Menüstruktur tragen erheblich zur Effizienz einer Website bei.

    Eine Volltextsuche erleichtert zusätzlich das schnelle navigieren zur gewünschten Information.

    Lässt sich der Aufwand messen?

    Es gibt einige Test-Tools, mit denen man die Effizienz und Nachhaltigkeit einer Website testen kann.

    • Digital Beacon

      Digital Beacon

      Test-Ergebnisse vergleichbar gemacht.
      Zum Tool

    • Website Footprint

      Browsererweiterung für Chrome
    • ecograder

      ecograder

      Ausführliche Testergebnisse mit Optimierungstipps
      Zum Tool
    • Websitecarbon Testergebnis

      Websitecarbon.com

      Der plakative Schnelltest
      Zum Tool

    Die durchschnittliche Menge an empfangenen und versendeten E-Mails pro Tag und Person verursacht gleichviel Treibhausgase, wie eine 11 Kilometer lange Autofahrt.

    arte.tv

    E-Mails

    • Weniger versenden

      • Setzen Sie nicht viele Personen in cc, die die E-Mail nicht lesen müssen
      • Versenden Sie keine E-Mails an viele Personen, die die E-Mail nicht lesen müssen.
      • Lesen Sie Ihre E-Mails korrektur, damit Sie nicht noch einmal versendet werden muss.

    • Weniger empfangen

      • Melden Sie sich von Newslettern ab, die Sie nicht lesen
      • Schalten Sie E-Mail-Benachrichtigungen in Anwendungen wie Facebook aus.
      • Löschen Sie alte E-Mail-Konten, die Sie nicht mehr benutzen

    • Volumen reduzieren

      • Fügen Sie Ihre E-Mail-Signatur nur in neue E-Mails ein, nicht in Antworten
      • Verzichten Sei auf Logo-Dateien in der Signatur
      • Leiten Sie keine langen E-Mail-Ketten weiter, sondern löschen Sie, was nicht relevant ist.
      • Hängen Sie nur wichtige Dateien an, und versuchen Sie, kleinere Dateien anzuhängen, z.B. im ZIP-Format

      E-Mail Provider

      @gmx, @googlemail etc.

      Diese Adressen werden von Google zur Verfügung gestellt und von Google-Servern bedient.

      Google hat laut Nachhaltigkeitsbericht alle seine Rechenzentren auf erneuerbare Energie umgestellt.

      @hotmail, @outlook etc.

      Diese Adressen werden von Microsoft zur Verfügung gestellt. Ähnlich wie Google betreibt auch Microsoft lt. Nachhaltigkeitsbericht seine Server mit Ökostrom.

      @web.de

      Diese Adresse wird von 1&1 IONOS bereit gestellt. Die Rechenzentren für das Webhosting von IONOS werden mit erneuerbaren Energien betrieben. Man kann nur vermuten, dass das auch für die Server gilt, auf denen die E-Mail-Konten für @web.de liegen.

      @t-online.de, @magenta.de etc.

      Über die Rechenzentren der Telekom gibt es kaum Informationen. Ein Test der Website telekom.de auf websitecarbon.com legt jedoch nahe, dass das Thema digitale Nachhaltigkeit und Energie-Effizienz dort noch nicht wirklich angekommen ist.

      @posteo.de

      Die E-Mail-Konten von posteo.de sind mit 1,00 Euro / Monat nicht kostenlos, aber werbefrei. Posteo bemüht sich um transparente Nachhaltigkeit.

      Zur Website
      @mailbox.org

      mailbox.org ist für private und geschäftliche Anwender, die sich einen nachhaltiger agierenden E-Mail-Anbieter mit erweiterten Sicherheitsfunktionen wünschen, ein hochinteressantes Angebot, das man dank 30-Tage-Testzugang gut selbst testen kann. Danach kostet das E-Mail-Konto 1,00 Euro / Monat.

      (Quelle: utopia.de)

      Infos zu weiteren alternativen E-Mail-Anbietern hat Utopia.de zusammengestellt »

      Rechenzentren, Übertragungsnetze und Milliarden vernetzter Geräte verursachen Kohlendioxidemissionen, die mindestens so hoch sind wie die Treibhausgas-Emissionen des weltweiten Luftverkehrs - Tendenz: STEIGEND

      (Quelle: websitecarbon.com)

      Weitere Tipps für den Alltag im Internet

      Online-Meetings

      • Schalten Sie Ihre Kamera nur ein, wenn sie wirklich einen Mehrwert bietet.
      • Laden Sie weniger Personen zu Anrufen ein
      • Wählen Sie einen Videokonferenzanbieter, der erneuerbare Energie verwendet (z. B. Google Meet)

      Telefonieren

      • Nutzen Sie statt Video-Chats das Festnetz- oder Mobiltelefon für Anrufe
      • WLAN ist nicht nur kostengünstiger, sondern auch energiesparender als mobile Datenübertragung.

      Speichern von Daten

      • Nutzen Sie für die Speicherung von Bildern, Backups und anderen Daten nicht die Cloud, sondern externe Festplatten, die nur dann am Strom sind, wenn sie gebraucht werden.
      • Löschen Sie regelmäßig nicht mehr gebrauchte Daten aus der Cloud.

      Video-Einstellungen in Social Media

      Verhindern Sie das automatische Abspielen von Videos auf Facebook, Insta, LinkedIn und Xing etc.

      Smartphones

      • Löschen Sie regelmäßig nicht mehr verwendete Apps von Ihrem Smartphone.
      • Räumen Sie den Datenspeicher auf und übertragen Sie noch benötigte Dateien auf eine externe Festplatte.
      • Aktivieren Sie den Energiesparmodus und den Dark Mode.

      Weitere Tipps

      • Verringern Sie die Helligkeit ihres Monitors.
      • Verwenden Sie statt Google Ecosia als Standard-Suchmaschine.
      • Verwenden Sie einen Ad-Blocker in Ihrem Browser.
      • Ziehen Sie den Stecker statt Geräte im StandBy zu lassen.
      • Verzichten Sie beim Musik-Streaming auf die Wiedergabe von Videos.
      • Nutzen Sie Ihre elektronischen Geräte länger.

      Die beste Methode: Einfach mal Abschalten!