Was genau bedeutet „Sustainable Web Design”? Woher weißt du, wie ökologisch deine Seite ist? Wie kannst du deine Website 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

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 Website produziert Schätzungen zufolge 1,76 Gramm CO₂. Bei 10.000 Besuchern pro Monat kommt man auf 211 kg CO₂ pro Jahr – für eine einzige Seite! 

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

Unsere Websites müssen grüner werden

1. WordPress Hosting und Sustainable Web Design

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

Ob deine Website “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 WordPress Hosting Anbieter zu wechseln. Einen Vergleich kannst du hier einsehen. 

2. Design und Sustainable Web Design

Das richtige Design kann verhindern, unnötige Energie zu verbrauchen, zum Beispiel wenn deine Website 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 Website 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 Website 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 und Sustainable Web Design

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!

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.

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 wurde speziell zum Testen der Nachhaltigkeit von Websites ins Leben gerufen. Ecograder empfinde ich persönlich am bedien freundlichsten. 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 Websites als Maßeinheit für professionelle Projekte und Argumentationen unzulänglich.

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 ermöglichen verschiedene Komponente deiner Website auszuschließen, genauer gesagt per Code Snippet hinzuzufügen, und zugleich ein Google Lighthouse Report mitzuliefern bis hin zum Vergleichs-Testing zweier Websites, ist hier erstmal „alles“ möglich. Auch die Ergebnisse werden technisch bis ins kleinste Detail aufgeschlüsselt. Diese Website 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.

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 Websites 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 Website schon steht und der Wechsel eines Themes erst mal ausgeschlossen ist, kannst du deine WordPress Performance mit Hilfe dieser 10 Stellschrauben verbessern.

Wie du andere ü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 WordPress Hosting Anbieters, der nachhaltigen, zertifizierten Ökostrom verwendet, darf dieses Badge eingebunden werden:

• https://www.thegreenwebfoundation.org/ (per Code)
• https://wordpress.org/plugins/the-green-web-widget/ (per Plugin)

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

Fazit zu Sustainable Web Design

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 öko freundlichen 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 Website sustainablewebdesign.org als Ausgangspunkt. In übersichtlichen Paragrafen werden hier die wichtigsten Punkte erläutert und mögliche technische Lösungen zur Umsetzung dieser geboten.