Sustainable Web Design: So gestaltest du nachhaltige Webseiten

Sonja Hoffmann Zuletzt aktualisiert am 21.10.2020
7 Min.
Sustainable Web Design
Zuletzt aktualisiert am 21.10.2020

Was genau bedeutet “Sustainable Web Design”? Woher weißt du, wie ökologisch deine Seite ist? Wie kannst du deine Webseite(n) nachhaltiger gestalten und welche Vorteile bringt das für deine Kunden? Die Antworten darauf sowie einige wichtige Tools dazu habe ich dir in diesem Beitrag zusammengetragen.

Fakten zum Stromfresser Internet

Was unser Digitalkonsum an Energie kostet

Laut Websitecarbon verbraucht das Internet 416,2 Terawattstunden (TWh) pro Jahr. Das ist in etwa so viel wie Deutschland alleine verbraucht. Wäre das Internet ein Land, dann hätte es heute schon den sechstgrößten Stromverbrauch der Welt.

Aber wie kann das eigentlich sein? Sind wir nicht extra digital gegangen, um unsere Umwelt zu schonen? Die Realität sieht hier etwas anders aus: Leider bedeutet digital nicht automatisch “grün”. Von Server Farmen über Rechenzentren bis zum eigentlichen Endgerät – alles verbraucht Energie, um zu funktionieren.

Eine durchschnittliche Webseite produziert Schätzungen zufolge 1,76 Gramm CO2. Bei 10.000 Besuchern pro Monat kommt man auf 211 kg CO2 pro Jahr – für eine einzige Seite! 

Hast du dir schon einmal Gedanken darüber gemacht, wie viele Ressourcen für deine Webseite benötigt werden? Garantiert mehr als du denkst! Jeder Request, den deine Webseite sendet, wird irgendwo empfangen, verarbeitet, zurückgesendet und gegebenenfalls gespeichert. So kommt einiges zusammen.

Unsere Webseiten müssen grüner werden – aber wie?

1. Hosting

Mittlerweile machen viele Hosting-Anbieter mit und setzen auf erneuerbare Energien. Denn klar ist: Webhosting verschlingt Energie und sorgt für einen erheblichen Ausstoß an CO2-Emissionen. Bei RAIDBOXES ist Nachhaltigkeit und Klimaschutz keine leere Phrase, sondern fester Bestandteil der Unternehmenskultur.

Green Hosting für WordPress bei RAIDBOXES

Wenn du eine Webseite oder einen Onlineshop betreibst, verbrauchst du jede Menge Ressourcen. RAIDBOXES steuert dagegen – mit klimapositiven Hosting für WordPress und WooCommerce.

Ob deine Webseite “grün” ist, kannst du ganz einfach mit Hilfe dieses Tools von The Green Web Foundation ermitteln. Fällt das Ergebnis negativ aus, bietet es sich an, den Hosting-Anbieter zu wechseln. Einen Vergleich kannst du hier einsehen. 

The Green Web Foundation
RAIDBOXES setzt auf nachhaltigen, zertifizierten Ökostrom aus Wasserkraft.

2. Design

Das richtige Design kann verhindern, unnötige Energie zu verbrauchen, zum Beispiel wenn deine Webseite unnötige und ungewollte Inhalte gar nicht erst lädt. Wie kannst du Design und Nachhaltigkeit vereinbaren und Ressourcen schonen?

Mobile First

Bei Mobile First optimierst du deine Inhalte von Beginn an auf die Nutzung von Smartphones. Optimierte Seiten, müssen auf mobilen Geräten keine übergroßen Medien laden. Diese werden so programmiert, dass Desktop Styles nicht überschrieben werden müssen, sondern direkt für das kleinste Gerät konzipiert werden.

User Experience

Über den Nutzen einer gut geplanten Usability habe ich dir schon zuvor berichtet. Eine gut funktionierende User Experience hilft dir und deinen Kunden, deine Webseite nachhaltiger zu gestalten. Du minimierst ungewollte Umwege deiner Nutzer. Denn idealerweise werden nur die Seiten geladen, die der Nutzer tatsächlich besuchen will. Wer ungewollte Klicks reduziert, sendet weniger Data Requests und beansprucht daher weniger Energie.

Seitenumfang

Auch hier kannst du schon beim Planen der Webseite an deiner Sustainability arbeiten. Generell gilt: Je weniger Seiten geladen werden müssen, desto weniger Data Requests werden gesendet. Abgesehen davon, dass deine Seite dadurch einfacher zu navigieren ist, ergibt es auch aus ökologischer Sicht Sinn, den Inhalt zusammenzufassen und die Anzahl der Seiten zu reduzieren.

Medien wie Bilder, jegliche Animationen und Videos sollten wir bewusster und gezielter einsetzen. Bringen wirklich alle Bilder, Videos, Icons und Animationen, die du für deine Seite geplant hast, einen Mehrwert? Oder kannst du auf einige von ihnen verzichten?

3. Development

Pagespeed

Pagespeed gehört schon länger zum kleinen 1×1 des Webdesigns. Warum es auch für den Umweltschutz gut ist, auf eine gute Performance zu achten? Eine Seite, die schneller lädt, ist die Konsequenz aus wenig Daten, die es zu laden gilt!

Schnellere Webseiten – besser für das Klima

Umso wichtiger ist es, dass du deine Webseite und deinen Shop gut optimierst. Das ist dein persönlicher Beitrag zum Klimaschutz. Mehr hierzu erfährst du in unserem E-Book Page Speed & Performance.

Warum dein Pagespeed langsam ist, kann verschiedene Gründe haben. Viele Tools liefern dir neben der Analyse auch gleich Lösungsansätze für mehr Performance mit.

Für diesen Artikel habe ich meine eigene Seite auf Herz und Nieren überprüft. Wie du an meinem Selbsttest erkennen wirst, kann eine Analyse sogar komplett gegenteilig ausfallen – je nachdem mit welcher Applikation getestet wird. Du solltest dir also überlegen, welche Ziele du mit den Tests verfolgst.

google lighthouse
Dieses Ergebnis liefert mir das beliebte Tool PageSpeed Insights.
gllighthouse
Google Lighthouse testet meine Seite unter anderem auch auf Barrierefreiheit.

Hier als Vergleich das Chrome Developer Tool Google Lighthouse und Google PageSpeed Insights. Beide Tools sind sind sinnvolle Orientierungspunkte für die Onpage-Optimierung.

ecograder
Ecograder liefert gute Ansätze zur Onpage-Optimierung.

Ecograder wurde speziell zum Testen der Nachhaltigkeit von Webseiten ins Leben gerufen. Ecograder empfinde ich persönlich am bedienfreundlichsten. Die Informationen sind knapp und verständlich dargestellt, die Tipps zur Verbesserung des Pagespeeds hilfreich.

Auch beim Website Carbon Calculator wird überwiegend auf Nachhaltigkeit getestet. Positiv empfinde ich die bildhafte Darstellung des Ergebnisses. Die Vergleiche zu weniger abstrakten Maßeinheiten erleichtern es, sich des Ausmaßes seines Werkes etwas besser bewusst zu werden.

Den Service von Website Carbon empfinde ich zwar generell als informativ, aber mir fehlen die individuell zugeschnittenen Details, wie ich sie von den Google Tools sowie Ecograder kenne. Zudem empfinde ich hier den Vergleich mit anderen getesteten Webseiten als Maßeinheit für professionelle Projekte und Argumentationen unzulänglich.

webpagetest
Das beliebte Tool Webpagetest geht sehr in die Tiefe.

Insbesondere für Entwickler ist Webpagetest ein ausgezeichnetes Tool, da es sehr ins Detail geht. Du kannst hier von verschiedenen Voreinstellungen aus testen. Von “Simple Testing” über “Advanced Settings”, die dir die Möglichkeit geben verschiedene Komponente deiner Webseite auszuschließen, beziehungsweise per Code Snippet hinzuzufügen, und zugleich ein Google Lighthouse Report mitzuliefern bis hin zum Vergleichs-Testing zweier Webseiten, ist hier erstmal “alles” möglich. Auch die Ergebnisse werden technisch bis ins kleinste Detail aufgeschlüsselt. Diese Webseite dient daher dem erweiterten Testing, während Google und Co. ihre Analyse etwas allgemeiner aufziehen.

Bilder und andere Medien

Die angebotenen Inhalte zu überdenken, habe ich schon zuvor angesprochen. Nun geht es darum die Bilder optimal einzubinden. 

Tinypng funktioniert wunderbar zur Komprimierung von Bildern – und das meist ohne erkennbaren Qualitätsverlust. Das gleiche Ergebnis erzielst du mit Photoshop und der Einstellung “Für Web exportieren”. Wer seine Bilder schon in ein CMS, wie zum Beispiel WordPress, eingebunden hat, kann nachträglich mit einem Plugin, wie beispielsweise Smush, die Auflösung noch optimieren.

Wer viele Bilder oder Icons hat, kann sich mit CSS Sprites auseinandersetzen. Sie funktionieren ähnlich wie Sprites bei der Computerspiele-Entwicklung. Hier werden Bilder per Sprite-Sheet einmal eingebunden. Anschließend wird per CSS festgelegt, unter welchen Koordinaten sich welches Bild befindet. Mehr zu dem Thema findest du hier.

Sprite-Sheets sind mehrere Bilder/Icons, die in einer einzigen Datei zusammengefügt werden. Oftmals gruppieren die Designer ihre Bilder dabei thematisch. Anhand der zugehörigen x- und y-Koordinaten werden die Sheets entsprechend unterteilt und eingebunden. So wird ein einziges Dokument geladen, das verschiedene visuelle Komponenten ausspielt.

Lazy Load ist eine andere Variante zum optimalen Laden von Bildern. Hier werden Bilder dann geladen, wenn der Besucher sie benötigt. Für WordPress gibt es auch dafür mittlerweile unzählige (kostenfreie und entgeltliche) Plugins.

WordPress

Natürlich stellen auch wir uns die Frage, wann ökologische Ansätze von Unternehmen authentisch sind: Gibt es überhaupt ein nachhaltiges Internet? Wie „grün“ kann WordPress tatsächlich sein? Im Beitrag WordPress und Nachhaltigkeit findest du einen aktuellen Stand zur Diskussion in der deutschsprachigen WP-Community.

Nachhaltiges WordPress: Sei mit dabei

RAIDBOXES setzt sich von Beginn an für ein nachhaltiges WordPress ein. Siehe unter anderem unsere Tipps zu WordPress & Nachhaltigkeit sowie zu Grünen Onlineshops. Du willst selbst mehr Verantwortung übernehmen? Dann lies dir unseren Beitrag Green Hosting für WordPress durch.

Welchen Beitrag können wir zu nachhaltigem, effizientem Webdesign leisten? Was sind die wichtigsten Hebel im Design-Alltag, um Ressourcen zu sparen? Wenige Plugins und ein Lightweight Theme sind hier die Top Tipps.

Durchschnittliche WordPress-Seiten kommen auf etwa 600 KB. Mit der Wahl des richtigen Themes und unter Berücksichtigung der zuvor erklärten Herangehensweise kannst du 50 Prozent und mehr einsparen. Eine kleine Auswahl an getesteten Themes findest du hier.

Wenn deine Webseite schon steht und der Wechsel eines Themes erstmal ausgeschlossen ist, kannst du deine WordPress Performance mit Hilfe dieser 10 Stellschrauben verbessern.

Wie du deine Kunden überzeugst, mitzumachen

 Eigentlich sollten die folgenden Keywords bereits ausreichen, um deine Kunden von nachhaltigem Webdesign zu überzeugen: 

  • Verbesserte Usability und User Experience,
  • klare und leicht verständliche Designs, 
  • bessere SEO-Rankings, 
  • kürzere Ladezeit und 
  • Mobile-optimierte Seiten. 

Benötigst du dennoch weitere Argumente, bieten verschiedene Foundations auch sogenannte Badges an, die du auf den Seiten deiner Kunden integrieren kannst.

Bei der Wahl eines Hosting-Anbieters, der nachhaltigen, zertifizierten Ökostrom verwendet, darf dieses Badge eingebunden werden:

So bietet beispielsweise auch WebsiteCarbon eine Badge an, die du auf deinen Seiten integrieren kannst, um zu zeigen, dass deine Inhalte nachhaltig und ökologisch aufgebaut sind.

Fazit, extremere Ansätze und Lesematerial

Während meiner Recherche zu diesem Thema bin ich über unzählige Statistiken gestolpert. Eine E-Mail zu versenden hat demnach dieselbe Auswirkung auf unsere Umwelt wie die Nutzung einer Plastiktüte. Bücher sind demnach oft umweltfreundlicher als E-Books. Musikalben zu kaufen schonender für unsere Ressourcen, als dieselbigen zu streamen. Die Liste ist unendlich. Vor allem rütteln diese Statistiken etwas an unserem bisherigen allgemeinen Verständnis, dass digital auch zugleich “grün” bedeutet.

Abgesehen davon, dass wir als Webdesigner und -entwickler natürlich eine große Rolle dabei spielen, wie sich das Web in Zukunft entwickelt, können wir auch schon bei uns selbst anfangen und das Internet etwas bewusster nutzen.

Finde heraus, welche deiner Apps grün sind und welche dringend sauber werden müssen: Mit dem Tool ClickClean von Greenpeace erhältst du eine interessante Übersicht deiner (Lieblings-)Applikationen und erfährst, wie ökologisch wertvoll diese sind.

Beiträge, die mehr Awareness für eine grünere Zukunft schaffen: 

  • So hat Jack Lenox ein WordPress-Theme gebaut, das lediglich 7 KB leicht ist. 
  • Brad Frost ermuntert uns auf seinem Blog DeathToBullshit mit einem humorvollen Twist, auf genau diesen zu verzichten. 
  • Heydon Pickering gibt Coding Tipps wie du deine Seite schlanker gestaltest.

Nicht vergessen sollten wir zudem die positiven Auswirkungen, die das Internet auf unsere Umwelt hat. So erspart das Nutzen von Videokonferenzen uns Anreisewege. Gerade während der letzten Monate dürfte jedem bewusst geworden sein, wie wir mit Hilfe des Internets darauf verzichten können, Verkehrsmittel zu nutzen und dadurch den CO2-Ausstoß zu verringern. 

Hinzu kommen Büroräume, die Dank Homeoffice verkleinert werden können. Darüber hinaus bietet uns das Netz die Möglichkeit, uns mit anderen zusammenzutun: Beispielsweise können wir Carsharing-Plattformen nutzen und “Homestays” wie AirBnB buchen, die umweltschonender als Hotels sind.

Auch die Verbreitung von Informationen zum Thema Nachhaltigkeit und Umweltschutz gestaltet sich durch das Internet erheblich einfacher. Auch das Anbieten und Erwerben von ökofreundlichen Produkten (zu denen wir sonst vielleicht weniger Zugriff hätten) gehören natürlich zu den positiven Auswirkungen der Digitalbranche – um nur einige zu nennen.

Wenn du dich noch tiefer mit dem Thema auseinandersetzen möchtest, empfehle ich dir die Webseite sustainablewebdesign.org als Ausgangspunkt. In übersichtlichen Paragraphen werden hier die wichtigsten Punkte erläutert und mögliche technische Lösungen zur Umsetzung dieser geboten.

Sustainable Web Design: Welche Fragen an Sonja hast du?

Nutze gerne die Kommentarfunktion. Du willst über neue Beiträge zu Webdesign und Entwicklung informiert werden? Dann folge uns auf TwitterFacebook oder über unseren Newsletter.

Nach einem Studium in Game Design und Creative Writing im grünen Auckland, hat sich Sonja Hoffmann auf Web- und App Design und dessen Development spezialisiert. Dabei liegt ihr Fokus auf Gamification sowie dem Ergründen von User-Motivation und dessen Experience, gepaart mit einer Leidenschaft und Neugierde für technologische Trends.

Ähnliche Artikel

Kommentare zu diesem Artikel

M
Moritz

Hallo Sonja,

danke für diesen interessanten Text. Ich lese immer mehr über nachhaltiges Web Design. Vielleicht ist das mein Interesse, aber ich habe das Gefühl, dass tatsächlich das Bewusstsein wächst. Beobachtest du das auch bei Kunden?

Kannst du mehr und mehr Kunden von Web Design überzeugen, die energiesparend sind?

Besten Gruß
Moritz

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.