In diesem Artikel sprechen wir über konkrete Methoden und Techniken, mit denen du die Nachhaltigkeit deiner Projekte durch umweltfreundliches und nachhaltiges Webdesign verbessern kannst.
Ende der 1990er Jahre ermöglichte das Aufkommen der Computertechnik und die fortschreitende Digitalisierung von Verwaltungsaufgaben und Kommunikationsmedien einen ökologischen Fortschritt durch Einsparungen der sehr zahlreichen Papierausdrucken, die in Unternehmen allgegenwärtig waren.
Dieses Phänomen, das in einigen Ländern zutrifft, hat sich jedoch global nicht vollständig durchgesetzt. Das zeigt eine Studie der Upstate Medical University in New York 2016, denn der durchschnittliche amerikanische Büroangestellte verbraucht immer noch mehr als 10 000 Blatt Papier pro Jahr, von denen 45 % noch am selben Tag im Müll landen.
Einleitung
Auf Seiten der Computer ist die Produktion in den letzten 20 Jahren förmlich explodiert: Eine Studie von Statista ergab, dass der Anteil der Haushalte weltweit, die zu Hause einen Computer haben, von 27% im Jahr 2005 auf 47,1% im Jahr 2019 und in Europa auf über 80% gestiegen ist.
Diese Explosion der Computer steht auch mit dem Aufkommen von Smartphones und Tablets in direkter Verbindung, deren Nutzerzahl bis 2020 auf über 3,5 Milliarden angestiegen ist, was zudem zu einem exponentiellen Anstieg der Daten geführt hat, die von den Nutzern der Geräte und Rechenzentren erzeugt, geteilt und gespeichert werden.
Die intensive Produktion von IT-Geräten in Verbindung mit der steigenden Anzahl von Stunden, die im Internet verbracht werden, und dem Aufkommen von Online-Videos und -Streaming führt zu einer erheblichen digitalen Verschmutzung, die 4% des gesamten CO2-Ausstoßes der Welt ausmacht.
Laut verschiedenen Quellen wie The Shift Project oder CleanFox ist die weltweite digitale Verschmutzung in CO2-Äquivalenten heute vergleichbar mit der Verschmutzung, die ein ganzes Land wie Spanien oder die gesamte Luftfahrtindustrie der Welt im Jahr 2020 ausgestoßen hat.
Diese absolut astronomischen Zahlen dürften in den kommenden Jahren noch weiter steigen, angeheizt durch den zunehmenden Zugang zu Smartphones und Internet in den Entwicklungsländern sowie die Explosion des Videostreamings von Plattformen wie YouTube, Netflix, Instagram, SnapChat und TikTok. Wenn das Internet ein Land wäre, wäre es der drittgrößte Energieverbraucher der Welt.
Während uns Kampagnen zur Sensibilisierung für die Umweltverschmutzung im Haushalt (Wasser, Strom…) vertraut sind, wissen nur wenige Verbraucher, Designer, Entwickler und Unternehmen wirklich etwas über den massiven CO2-Fußabdruck der digitalen Welt.
Angesichts dieser Tatsache ist es zwingend notwendig, dass sich die im digitalen Bereich tätigen Unternehmen (d. h. fast alle…) der ökologischen Auswirkungen der Digitalisierung bewusst werden und nachaltiges Webdesign in ihre CSR-Richtlinien, in ihre Kommunikation, ihr Marketing und bei der Entwicklung digitaler Lösungen integrieren.
Damit auf das Design und die Funktionalität der digitalen Produkte oder Dienstleistungen, die erstellt werden, Einfluss genommen werden kann und möglichst effektiv umgesetzt werden, muss das nachaltige Design bereits im Vorfeld bei der Erstellung eines Projekts berücksichtigt werden.
In diesem Leitfaden schlagen wir eine Reihe konkreter Maßnahmen und Möglichkeiten vor, um Entscheidungsträger, Marketing-Profis, Grafiker, Designer und Entwickler beim Design und der Entwicklung nachhaltiger Websites zu unterstützen, die zentral für nachhaltiges Webdesign sind.
Leitfaden für umweltfreundliche Websites
In den letzten 20 Jahren hat sich die durchschnittliche Größe einer Webseite laut einer von Frederic Bordage berichteten Studie von Sanders (2014) um das 115-fache erhöht und erreichte 2015 mehr als 1600 KB. Dieser Anstieg kommt durch den massiven Einsatz von Bildern, Videos, Animationen und Skripten.
Dennoch bleiben die Bedürfnisse der Nutzer relativ stabil und eine Studie der Standish Group aus dem Jahr 2014 ergab, dass 80% der für die Nutzer erstellten Funktionen nur selten oder sehr selten genutzt werden.
Angesichts dieser Tatsache ist es wichtig zu verstehen, dass nachhaltiges Webdesign bereits im Vorfeld eines Projekts beginnen muss, in der Konzeptions- und Designphase oder bei der Formulierung der Anforderungen, wo die größten Reduzierungen des ökologischen Fußabdrucks erreicht werden können.
Genauer gesagt, hast du in der Phase des Designs und der funktionalen Gestaltung des Webprojekts den größten Einfluss auf den zukünftigen CO2-Fußabdruck deines Projekts.
In dieser Phase entscheidest du, wie viele Elemente angezeigt werden, wie viele Funktionen zur Verfügung stehen und wie die Besucher mit deinem Produkt oder deiner Webdienstleistung interagieren.
Um ein einfaches und effektives Design zu entwerfen, ist es wichtig, einen qualitativen Ansatz zu verfolgen, der darauf abzielt, unwesentliche Funktionen und Elemente zu entfernen, um eine kohärente und homogene Benutzeroberfläche zu schaffen, die alle wesentlichen Funktionen des Projekts zusammenfasst.
Wenn es dir gelingt, eine Haltung der „digitalen Nüchternheit“ einzunehmen, erhöht sich auch die Wahrscheinlichkeit, dass sich die Nutzer auf das konzentrieren, was in deinem digitalen Projekt am wichtigsten ist, was wiederum die Akzeptanz und Conversionrate deines digitalen Produkts oder digitalen Dienstleistung steigert.
Reduzierung der Verwendung (und des Gewichts) von Bildern und Videos im Design
Neben Skripten sind Bilder, Animationen und Videos in der Regel die schwersten Elemente einer Seite und daher Elemente, die beim nachhaltigen Webdesign zu berücksichtigen sind.
Sie haben den Nachteil, dass sie die Ladezeit der Seiten verlängern, wenn sie nicht optimiert sind, was die Qualität des Nutzererlebnisses mindert.
Natürlich geht es nicht darum, Bilder und Videos zu 100 % aus der Website zu streichen, da sie für das Markenimage sowie für das Nutzererlebnis notwendig sind.
Die Logik bleibt jedoch dieselbe: Es geht darum, einen Ansatz für ein schlichtes Design zu verfolgen und den „Allzweck“-Einsatz von Bildern und Videos zu reduzieren, um den ökologischen Fußabdruck zu verringern.
Der zweite wichtige Schritt in diesem Punkt ist die Optimierung der Größe von Bildern und Videos, indem das Format der Videos je nach Gerät angepasst wird (dies sollte in der Postproduktion geschehen) und die Bilder auf der Website komprimiert werden.
Der Mobile-First-Ansatz beim Design
Wenn sich das Projekt dafür eignet, solltest du bereits in der Entwurfsphase einen „mobile-first„-Designansatz verfolgen, d. h. ein Design, das in erster Linie für mobile Endgeräte konzipiert ist.
In diesem Zusammenhang empfiehlt Frédéric Bordage, ein Spezialist für nachhaltige IT und ökologisches Webdesign, eine Architektur mit Responsive Design + Server Side Component, die nicht nur die responsiven Prinzipien umsetzt, sondern es den Servern auch ermöglicht, die Elemente auszuwählen, die auf die mobilen Endgeräte geladen werden sollen.
Zugänglichkeit des Inhalts
Plane bereits in der Design- und Entwurfsphase eine einfache und sinnvolle Architektur, die eine bessere Zugänglichkeit von Inhalten und Funktionen ermöglicht. Dieser Ansatz der Barrierefreiheit gilt auch für die Organisation von Informationen, Menüs und Seiten in deinem digitalen Projekt. Dies ermöglicht, die Anzahl der Seiten, die geöffnet werden müssen, um auf eine bestimmte Information zuzugreifen, zu reduzieren, was die Effizienz deiner Website erhöht und gleichzeitig den Energiefußabdruck verringert. Klingt interessant? Schreib uns doch einfach eine Nachricht um mehr über deine Möglichkeiten einer nachhaltigen Website zu erfahren!
Im nächsten Teil unseres Leitfadens zum umweltfreundlichen Webdesign befassen wir uns mit den Praktiken des umweltfreundlichen Designs im Zusammenhang mit der Webentwicklung.
Um den ökologischen Fußabdruck deines Projekts verringern, musst du einen ökologischen Designansatz mit den entsprechenden Entwicklungspraktiken kombinieren.
Umweltfreundlichere Praktiken der Webentwicklung
Im ersten Teil dieses Artikels über nachhaltiges Webdesign haben wir gesehen, dass die ersten Schritte des Lastenhefts und des Designs eine Schlüsselrolle in der Nachhaltigkeit spielen, da sie eine frühzeitige Planung der Funktionen, der Architektur und der durchzuführenden ökologischen Optimierungen ermöglichen.
Um vollständig zu sein, muss dieser Ansatz durch den Einsatz ökologischer Entwicklungspraktiken ergänzt werden, und zwar sowohl im Front- und Backend als auch auf der Serverseite.
Eine der größten Herausforderungen bei der digitalen Umweltverschmutzung sind die hektischen Produktions- und Verkaufszyklen der Hardwareindustrie, die durch die immer höheren technischen Anforderungen an Websites, Spiele und Software vorangetrieben werden.
Bevor wir uns mit den verschiedenen Entwicklungspraktiken beschäftigen, mit denen du den ökologischen Fußabdruck deiner digitalen Lösungen verringern kannst, solltest du dir auch vor Augen führen, dass eine umweltfreundlichere Website in der Regel von einer besseren Ladeleistung und einer klareren Architektur profitiert, was das Crawlen der Seiten durch Google erleichtert und somit das natürliche Ranking in den Suchmaschinen verbessert.
Die folgenden Informationen, stammen zum Teil aus dem Buch „Öko-Webdesign: Die 115 besten Praktiken“ von Frédéric Bordage, sowie aus den Ratschlägen der Webentwicklungsspezialisten Renaud Héluin und Vincent Nguyen.
Umweltfreundliche Webentwicklung im Front-End
In diesem Teil werden wir uns mit den Entwicklungspraktiken befassen, die auf der Front-End-Seite eingesetzt werden sollen, hauptsächlich in der Integrationsphase, d. h. beim Übergang vom Designprototypen zur grafischen Benutzeroberfläche.
Bewährte CSS-Praktiken: Spritesheets , Komprimierung und Begrenzungen
Bei CSS-Sprites werden mehrere Bilder zu einem größeren zusammengefasst, das „Spritesheet“ genannt wird. Auf diese Weise kann die Ladezeit der Seiten (und ihr Gewicht) verringert werden, indem die Anzahl der HTTP-Anfragen reduziert wird.
Um CSS-Sprites zu erzeugen, gibt es verschiedene kostenlose Tools wie CSSsprites.com.
Bei der Komprimierung von CSS geht es in erster Linie darum, die Anzahl der CSS-Stylesheets zu reduzieren, um die Anzahl der HTTP-Anfragen zu verringern. Du kannst mehrere Stylesheets zu einer einzigen Datei verknüpfen, wenn sie auf allen Seiten verwendet wird, und auch die CSS-Komprimierung von deinem CMS aus aktivieren.
Wenn du kein CMS verwendest, haben einige Frameworks automatische Lösungen für die CSS-Komprimierung integriert, alternativ kannst du auch die Deflate-Mod über den Apache-Webserver verwenden.
Optimierung der Ladegeschwindigkeit
Begrenzt man die Anzahl an Elementen (Bilder, Videos, etc.) auf einer Website und komprimiert Dateien, verbessert man nicht nur die Ladegeschwindigkeit sondern parallel auch noch die verbrauchte Energie.
Die Energieeinsparung zeigt sich, wenn ein Nutzer die Seite aufruft. Hat man auf seiner Website am Tag 1.000 Besucher, kann diese Einsparung einen signifikanten Unterschied machen.
Kein Flash benutzen
Wir sprechen hier nicht vom superschnellen DC Helden sondern das Flash, dass in der Vergangenheit zur Animation von Seitenelementen verwendet wurde. Es verbraucht viele Ressourcen, daher empfehlen wir die Verwendung von HTML und JavaScript. JavaScript-Bibliotheken wie jQuery werden oft schon für Teile der Seite geladen, so dass kein zusätzlicher Code heruntergeladen werden muss.
Reduziere die Verwendung von JS
Ich weiß, ich weiß; Wir haben doch gerade noch behauptet, JavaScript für Animationen ist der „Way to go!“
Das stimmt; aber die Idee ist, die Verwendung von JavaScript bei Animationen zu reduzieren und nicht, die Verwendung dieser Sprache zu verbieten, die auch viele Vorteile hat.
Wie schon bekannt sein sollte, gilt es die Navigationswege auf der Website so kurz wie möglich zu halten.
Konkret bedeutet dies, Informationen auf eine zugängliche und logische Weise anzuordnen und die Länge der „Pfade“ zu verkürzen, die notwendig sind, um auf eine Schlüsselinformation zuzugreifen.
Auf diese Weise reduzieren wir nicht nur die Anzahl der unnötig geladenen Seiten und Ressourcen, was wiederum die ökologische Leistung der Benutzeroberfläche verbessert sondern bieten dem Nutzer auch gleich ein angenehmeres Erlebnis auf der Seite.
Lazy Loading von Bildern
Beim Lazy Loading oder faulen Laden werden die Bilder einer Webseite nur dann geladen, wenn der Nutzer tatsächlich diese auch auf der Seite aktuell sieht, wodurch die Anzahl der unnötig geladenen Ressourcen stark reduziert wird.
In einigen Fällen erfordert die Implementierung von Lazy Loading die Programmierung des Prozesses in JavaScript.
Vor kurzem haben die Browser Chrome und Firefox die automatische Implementierung (native lazy loading) des Mechanismus innerhalb der Browser angekündigt.
Nach letzten Informationen sollte WordPress (5.5) ebenfalls ein natives Plugin für Lazy Loading enthalten.
SVG und WebP-Formate verwenden
Für Illustrationen sollte das SVG-Format (Scalable Vector Graphics) verwendet werden, dessen Hauptvorteil darin besteht, dass es auflösungsunabhängig ist (d. h. es kann ohne Qualitätsverlust an verschiedene Bildschirmgrößen angepasst werden). Dieses Format ermöglicht es auch, Illustrationen mit CSS zu stilisieren und ist mit fast allen Browsern kompatibel.
Bei Bildern kann man mit neuen Bildformaten wie WebP (2010 von Google entwickelt) bei ähnlicher oder sogar besserer Qualität echte Einsparungen bei der Bildgröße erzielen.
Dark Mode
Der Dark Mode oder „dunkles Theme“ ist eine Funktion, mit der der Hintergrund (normalerweise weiß oder farbig) auf schwarz umgestellt werden kann, um den Lesekomfort zu verbessern und den Energieverbrauch von OLED- und AMOLED-Bildschirmen zu senken, da diese die Pixel „ausschalten“, um schwarz anzuzeigen.
Derzeit ist diese Funktion in vielen Softwareprogrammen und Systemen wie Slack, Facebook, Android, MacOs, YouTube, Google Chrome, etc. vorhanden.
Umweltfreundlichen Webentwicklung im Backend
Wir werden uns nun mit den verschiedenen Backend-Lösungen beschäftigen, die implementiert werden können, um den energieverbrauch zu minimieren. Minimieren ist hier auch direkt das richtige Stichwort…
Minifizieren von CSS- und JS-Dateien
Die Minifizierung von CSS- und JS-Dateien ist ein halbautomatischer Prozess, bei dem alle für die Interpretation des Codes unnötigen Zeichen (Leerzeichen, Tabulatoren, Kommentare …) entfernt werden, um die Dateigröße und damit die Ladezeit zu verringern.
Auch wenn die Gewichtseinsparungen einzeln betrachtet gering sind, können sie auf einer ganzen Website sehr groß sein. Eine Studie von Yahoo! ergab, dass die Verringerung des Codes zu einer Einsparung von 21 % des Seitengewichts bei den Top 10 der meistbesuchten Websites in den USA führte.
CSS- und JS-Dateien zusammenführen
Durch diesen Verschmelzungsprozess werden CSS- und JS-Dateien zusammengeführt, wodurch die Anzahl der HTTP-Anfragen reduziert wird.
Mehr dazu steht in der Dokumentation des Apache-Moduls mod_pagespeed von Google, mit dem sich dieser Prozess automatisieren lässt.
Caching
Wir empfehlen dringend, das Caching zu aktivieren. Dieser Prozess ist einfach wenn man ein CMS wie WordPress verwendet.
Durch Caching wird die Reaktionsfähigkeit erhöht, da Inhalte gefunden und geladen werden, ohne das gesamte Netzwerk zu belasten, was eine schnellere Reaktion ermöglicht und Ressourcen spart.
Anzahl der Plug-ins begrenzen
Plug-ins wie der Flash Player verbrauchen viele Ressourcen und wir empfehlen daher, den Einsatz solcher Lösungen zu reduzieren.
Bei der Nutzung eines CMS wie WordPress, raten wir nicht genutzte Plug-ins zu deaktivieren oder zu deinstallieren.
Vor Bots (und unnötigem Datenverkehr) schützen
Laut einer von The Next Web vorgestellten Studie lag der Anteil des Internetverkehrs, der von Bots oder „Robotern“ erzeugt wurde, 2018 bei fast 40% des gesamten Datenverkehrs. Innerhalb dieser 40% fiel etwa die Hälfte auf „nützliche“ Bots und die andere Hälfte auf schädliche Bots.
Angesichts dieses Befundes, der uns zeigt, dass 20% des weltweiten Datenverkehrs aus schädlichen oder böswilligen Robotern besteht, ist es wichtig, Schutzmaßnahmen einzusetzen, insbesondere Anti-DDOS, um Daten und Nutzer zu schützen, aber auch um die Energie zu reduzieren, die verwendet wird, um die Website diesen zahlreichen Robotern anzuzeigen.
Verwende die neueste Version von PHP
Wenn du wie 8 von 10 Websites im Netz PHP verwendest, solltest du die neueste stabile Version verwenden, um die Leistung der gesamten Website zu steigern.
Laut der Website WP Rocket können Server mit PHP 7.0 doppelt so viele Anfragen wie mit PHP 5.6 mit halb so viel Latenz ausführen.
Die Praktiken der serverseitigen ökologischen Webentwicklung
Einen Hoster wählen, der sich für nachhaltige Entwicklung einsetzt
Das Hosting von Daten für Webprodukte oder -dienstleistungen erfordert Strom, um die (individuellen oder gemeinsam genutzten) Server des Webhosting-Unternehmens zu betreiben.
Diese Energie, die zum Hosten der Websitedaten benötigt wird, kann erneuerbar oder nicht erneuerbar sein, je nachdem, welche Energieversorger deinen Webhosting-Anbieter beliefern.
Für einen Webhoster gibt es daher mehrere Möglichkeiten, umweltfreundlichere Hosting-Dienste anzubieten:
- Eigenen erneuerbaren Strom (Wind, Sonne) erzeugen.
- Erneuerbare Energie über Zertifikate für grünen Strom (RECS) beziehen.
- Die vom Unternehmen erzeugten Kohlenstoffemissionen ausgleichen.
- Die Energieeffizienz von Servern und Geräten verbessern.
Die meisten Hosting-Giganten haben sich noch nicht vollständig auf die Umwelt ausgerichtet.
Dennoch gibt es Hosting-Unternehmen wie Luxhosting (Luxembourg), die ihre Server überwiegend oder vollständig mit erneuerbaren Energien betreiben, zusätzlich zu ihren Bemühungen um CO2-Ausgleich und ihrem allgemeinen Engagement für nachhaltige Entwicklung.
Varnish (Servercache)
Der Einsatz eines „Reverse Proxy“ wie Varnish ermöglicht es, Inhalte schnell zu liefern (Seiten, Bilder …) und gleichzeitig die Belastung des Anwendungsservers zu verringern, wodurch die Größe der erforderlichen Infrastruktur und damit ihr Verbrauch sinken.
Wenn der von der Website erzeugte Datenverkehr die Nutzung eines eigenen Servers nicht rechtfertigt, sollten die Nutzung eines VPS oder eines Shared Hostings ausreichen, um den ökologischen Fußabdruck zu verringern.
Und zum Schluss
Es ist an der Zeit, ein Fazit zu den Praktiken des umweltfreundlichen Webdesigns zu ziehen, die wir in Bezug auf Design, Entwicklung oder Hosting behandelt haben.
Zunächst einmal konnten wir sehen, dass der ökologische Fußabdruck der digitalen Welt stark, ja sogar sehr stark ist: Sie macht heute fast 4% der globalen Emissionen des Planeten aus, mehr als die gesamte Luftfahrtindustrie.
Das ökologische Engagement muss jedoch von den Unternehmen noch deutlich verstärkt werden, da sie heute die durch die Digitalisierung verursachte Umweltverschmutzung in ihre Umwelt- und CSR-Politik integrieren müssen. Um dies zu erreichen, gibt es heute eine Vielzahl von Lösungen, die wir einsetzen können, um den ökologischen Fußabdruck unserer digitalen Projekte stark zu reduzieren.
In der Anfangsphase können die größten Energieeinsparungen geplant werden, indem das Produkt oder die Dienstleistung auf seine/ihre Schlüsselfunktionen ausgerichtet und auf das Wesentliche fokussiert wird, um eine relevante und effektive Nutzungserfahrung zu schaffen.
Zweitens wird es in der Entwicklungsphase der digitalen Lösungen notwendig sein, einzugreifen: Minimizing-, Cache- und Content-Management-Systeme können große Ressourceneinsparungen erzielen, wenn sie bei der Entwicklung der Projekte richtig eingesetzt werden.
Schließlich sollte auch die ökologische Dimension des Hostings berücksichtigt werden, indem insbesondere auf die Wahl des Hosting-Providers und die Einrichtung eines Server-Cache-Systems geachtet wird. Es ist wichtig, sich vor Augen zu halten, dass eine umweltfreundliche Website keine „abgespeckte“ Website ist – ganz im Gegenteil! Leistungssteigerungen, insbesondere in Bezug auf Lesbarkeit, Zugänglichkeit und Geschwindigkeit der Darstellung von Elementen, sind positive Signale, die die Conversionrate und das natürliches Ranking in den Suchmaschinen erhöhen: Eine umweltfreundliche Website ist auch eine leistungsfähigere Website!
Bei PEWEO begleiten wir unsere Kunden bei der Erstellung von umweltfreundlichen Web- und Kommunikationskampagnen dank unseres Teams aus Profis, die in den Techniken des nachhaltigen Webdesign geschult sind. Klingt gut? Na dann meld dich 😉
