24 Tipps für nachhaltige Webanwendungen

Juliane Langer

Wäre das Internet ein Land, würde es Platz 6 der Liste der Länder mit dem größten CO₂-Ausstoß belegen.

Unser ökologischer Fuß­abdruck wird längst nicht mehr nur von unseren Ernährungsgewohnheiten, der täglichen Verkehrsmittelwahl oder dem individuellen Wassersparverhalten bestimmt.
Nein - auch unsere Bespaßung durch Katzenvideos, der tägliche Austausch per Whatsapp oder Netflix Binge-Watching spielt hier zunehmend eine Rolle. Denn die Rechenleistung, Kühlung und Stromversorgung von Tausenden Servern, die uns Online-Inhalte weltweit jederzeit verfügbar machen, kosten täglich Unmengen an Energie.
 
Den einzelnen Nutzer einfach aufzurufen weniger zu surfen, zu streamen oder zu chatten scheint hier wenig erfolgverspechend. Wir beschäftigten uns also mit Möglichkeiten der Ursachenbekämpfung und der Frage wie auch Agenturen, Designer und Entwickler im digitalen Raum nachhaltig handeln können.

Können wir mit einem anderen Ansatz in der Webentwicklung das Internet umweltfreundlicher gestalten?


Das haben wir uns gefragt und wir haben recherchiert, gelesen, designt, programmiert, getestet und wieder alles von vorn... Und wir Antworten gefunden und wollen diese mit euch teilen: Ihr findet sie in den folgenden 24 Tipps für ein energieeffizientes Web.

#1 Bilder mit Mehrwert

Eins ist klar: Je mehr Bilder eine Website verwendet und je größer diese Bilddateien sind, desto mehr Daten müssen übertragen werden und desto mehr Energie wird verbraucht. Bevor hier technische Optimierungen angewendet werden, um dies zu kompensieren, könnte man vielleicht auch mal genauer über die Verwendung von Bildern nachdenken und sich folgendes fragen:

* Bringt das Bild wirklich einen Mehrwert für den Benutzer?
* Vermittelt es nützliche Informationen?
* Könnte die gleiche Wirkung erzielt werden, wenn das Bild kleiner wäre?
* Können wir Bilder reduzieren, die für den Benutzer nicht sichtbar sind, z.B. in Slidern?
* Könnten wir den gleichen Effekt mit einer Vektorgrafik (oder sogar per CSS) anstelle eines Fotos erzielen?

Wenn ihr euch also diese Fragen stellt, wird es euch gelingen das Bildmaterial zu reduzieren, ohne die Benutzerfreundlichkeit zu beeinträchtigen.
Und dies wird direkt dazu beitragen, den Online-Energieverbrauch zu senken.

#2 Energie sparen mit gutem SEO

Ja, gutes SEO hat durchaus eine energieeffiziente Wirkung und dass auch noch so ganz zufällig nebenbei:
Bei der Optimierung einer Website für Suchmaschinenrankings helfen wir Menschen, die gewünschten Informationen schnell und einfach zu finden. Erfolgreiches SEO führt also dazu, dass Menschen weniger Zeit damit verbringen, im Internet nach Informationen zu suchen und auch weniger Seiten besuchen, die ihren Bedürfnissen nicht entsprechen.

Es wird also in Summe weniger Energie verbraucht und die dennoch verbrauchte Energie lieferte dem Benutzer einen echten Mehrwert.

#3 Energieverschwender Javascript

Hört ihr den Laptop Lüfter surren? Das ist Energie, die verschwendet wird.
Die Verwendung von Javascript erhöht einerseits die Dateigröße der Webseite und andererseits erfordert dessen Verarbeitung mehr Ressourcen auf dem Endgerät des Benutzers. Dies erhöht die CPU-Auslastung, was wiederum den Energieverbrauch des Geräts erhöht.

Ihr könntet euch also fragen, ob die gewünschte Interaktion, Funktionalität oder Animation vielleicht auch mit effizienteren Technologien, wie CSS, realisierbar wäre? Zudem sollte Javascript zumindest effizient und sinnvoll genutzt werden. Schaut man sich beispielsweise Tracking- und Werbe-Skripte an, die dem Nutzer selten einen Wert bieten, dafür aber die Websitegröße erhöhen, eine signifikante CPU-Auslastung verursachen, Websites verlangsamen und in Privatsphären eindringen, scheinen diese jenes Kriterium nicht zu erfüllen.

Untersuchen kann man Performanceeinbußen durch Ad-Skripte sehr gut mit Webtest.app

Also think twice, save energie & hardware.

#4 Optimale User Experience (UX)

Die User Experience geht einher mit der Erwartung, dass Erlebnisse einwandfrei funktionieren, dass der Nutzer in der Lage ist, die Dinge zu finden, die er finden will und zudem noch Freude bei der Anwendung hat.
 
Ein gutes UX-Design macht die Nutzung des Webs also einfacher und angenehmer für alle und reduziert vor allem die Menge an Energie, die beim Navigieren zu Seiten, die nicht dem richtigen Zweck dienen oder dem Drücken von Buttons, die die falsche Aktion auslösen, verschwendet wird.
 
Somit freuen sich der Nutzer, eure Conversation und die Umwelt zugleich. :)

#5 Guter Text - gute Energie

Das Verfassen guter Texte hat durchaus Einfluss auf die Energie-Effizienz einer Website, da es die Dauer beeinflusst, die der Nutzer auf der Website verbringt.

Ok, manchmal wollen wir auch, dass unsere Zielgruppe möglichst viel Zeit auf unserer Website verbringt und sich in die Inhalte vertieft - was wir jedoch nicht wollen, ist, dass Nutzer ihre Zeit damit verschwenden, sich durch Inhalte zu kämpfen, die sie überhaupt nicht interssieren.

Somit kann klares und effizientes Copywriting dazu beitragen, Zeitverluste und damit einhergehende Energieverschwendung zu reduzieren.

#6 Tools für effizientes Arbeiten im Backend

Die kontinuierliche Wartung, Betreuung und Pflege von Webseiten erfordert mal mehr und mal weniger komplexe und zeitintensive Online-Aktivitäten im Backend der Onlinepräsenz. Webseiten so effizient und zeitsparend wie möglich zu Pflegen spart also Online-Zeit und damit Energie. Wenn ihr also ein klein wenig Energie aufwendet, um Tools zu finden, die euch das Arbeiten im Backend erleichtern und effizienter machen, könnt ihr langfristig gesehen eine Menge Energie sparen.
Für Contao-Nutzer können bespielsweise folgende zwei Contao-Erweiterungen in diesem Zuammenhang durchaus als "ökologisch sinnvoll" betrachtet werden:
 
-> Contao Backend Helper - Erweiterung für effiziente Bulk-Verarbeitung
 
-> Sticky Backend Footer - Schnelleres Speichern mit sticky Buttons
 

#7 Technisch optimale Bilder

Wenn die Verwendung von Bildern auf einer Website auf Effizienz und Nützlichkeit geprüft wurde (siehe Tipp #1), können nun einige technische Entscheidungen dabei helfen, die Dateigröße der letztendlich verwendeten Bilder erheblich zu optimieren:
 
* Ladet Bilder in der richtigen Größe und skaliert sie nicht nur mit CSS ins richtige Format.
* Nutzt responsive Image Elemente wie picture, source und srcset, um für jedes Endgerät die passende Bildgröße auszuliefern.
* Verwendet Tools wie TinyPNG oder ShortPixel, um Bilddateien ohne sichtbaren Qualitätsverlust zu komprimieren.
* Verwendet für jedes Bild das effizienteste Dateiformat, z.B. WebP anstelle von JPEG.
 
Somit können Bilddateigrößen deutlich optimiert werden, was den Energieverbrauch reduziert und Ladezeiten verbessert, ohne die Benutzerfreundlichkeit der Webseite zu beeinträchtigen.

#8 Accelerated Mobile Pages (AMP)

AMP wurde entwickelt, um das Laden von Inhalten auf mobilen Geräte zu beschleunigen, indem unnötiger Code und Dateigewicht entfernt werden und eine minimalistische Version der ursprünglichen Webseite bereitgestellt wird. Eine AMP Seite hilft natürlich nicht wirklich viel, wenn die Website von Anfang an effizient ist, aber falls die ursprüngliche Webseite eher etwas schwerfälliger daherkommt, kann AMP ein nützliches Werkzeug sein, um mobilen Benutzern eine leichtere und energieeffizientere Version zu liefern.
Es sei auch darauf hingewiesen, dass Google AMP-Inhalte in den mobilen Suchergebnissen priorisiert, insbesondere nachrichtenbezogene Themen.

Somit können AMP Seiten nicht nur die Energieefizienz und User Experience sondern auch die Sichtbarkeit eurer Inhalte erhöhen.

#9 Nicht in die Ferne schweifen

Ein Großteil der vom Internet verbrauchten Energie entfällt auf die Datenübertragung über die Telekommunikationsnetze - und je weiter die Daten reisen müssen, desto mehr Energie verbrauchen sie auf ihrem Weg. Die Auswahl eines Rechenzentrums in der Nähe eurer Zielgruppe trägt daher direkt dazu bei, den Energieverbrauch zu senken.
Wenn ihr nun bespielsweise einen sehr günstigen US-Webhoster präferiert, sich eure Zielgruppe jedoch in Deutschland befindet, dann wird jedes Mal Energie dafür verschwendet, die Daten quer über den Atlantik zu schleifen. Darüber hinaus kann diese zusätzliche Entfernung auch zu einer Verlängerung der Seitenladezeiten führen.

Das Hosting einer Website in einem Rechenzentrum in der Nähe des Zielpublikums ist also optimal für die Benutzerfreundlichkeit und den Planeten.

#10 Bots blocken

Das Blockieren von Bots kann den Energieverbrauch einer Website unter Umständen deutlich senken - je nachdem wie stark die Website üblicherweise von Bots frequentiert wird. Es wird vermutet, dass Bots oft bis zu 50% der Ressourcen, wie Rechenleistung und Bandbreite, verbrauchen können.

Hier steckt also evetuell ein deutliches Energieeinsparpotential.

#11 Statische Seiten bauen ?!?

CMS-basierte Webseiten stellen Datenbank-Abfragen und generieren daraus dynamisch Seiten. Wenn also jemand versucht eine Seite zu laden, muss der Webserver jedes Mal erst nachschauen, welche Informationen er an den Benutzer zurücksenden soll bevor er sie senden kann. Und dafür verbraucht er mehr Energie. Eine Lösung sind Caching-Technologien (dazu später), aber in einigen Fällen ist es sogar möglich, einfach statische Webseiten ohne Datenbank auszuliefern. (Was beispielsweise bei einer sehr hohen zu erwartenden Seitenfrequentierung sinnvoll sein kann)

Also entweder ganz schlicht und einfach statische Dateien in HTML, CSS und JS schreiben oder einen Generator für statische Seiten verwenden, um CMS-basierte Websiten in statische Dateien zu konvertieren.

Die Arbeit kann sich also lohnen - be efficient, be static ;)

#12 Server Caching nutzen

Bei CMS-basierten Webseiten, werden die durch den Nutzer aufgerufenen Seiten dynamisch generiert und dann ausgeliefert. Dies ist jedoch relativ ineffizient, da es für jeden einzelnen Seitenaufruf eine Serververarbeitung erfordert, was den Energieverbrauch des Webservers erhöht.

Das regelmäßige Aktualisieren deines CMS kann jedoch die Energieeffizienz durch immer bessere Cachingtechnologien optimieren, beispelsweise setzt Contao ab der Version 4.8  auf den Symfony HttpCache. Schneller ist nur der Varnish Cache.

Caching-Technologien wie Varnish erzeugen vorab statische Versionen jeder Seite, so dass der Energieverbrauch des Servers deutlich reduziert und die Ladezeiten der Seiten erheblich verkürzt werden. Die Einrichtung kann durchaus kompliziert sein, aber viele Hoster bieten diese Option mittlerweile als Zusatzservice an.

Die Energieeffizienz und Performance eurer Website kann durch Server-Caching also mit wenig Aufwand eurerseits enorm verbessert werden.

#13 Die neuste PHP Version nutzen

Im Bezug auf Energieeffizienz sollte man auch über die Server-Technologien nachdenken, die letztendlich unsere Webseiten bereit stellen, denn hier lohnt es sich oft die effizientesten verfügbaren Versionen zu verwenden.

Beispielsweise PHP: Neuere Versionen von PHP sind meist nicht nur schneller, sondern verbrauchen auch weniger Serverressourcen und damit weniger Energie. Dies gilt sicher auch für PHP-Alternativen.

Zudem gehen beim Update einer Software auf die neuste Version mit der erlangten Performance-Steigerung meist auch sicherheitstechnische Vorteile einher.

#14 DARK Mode hilft

Dunkle Webseiten waren eine der ersten Techniken, die vor vielen Jahren zum Energiesparen auf Websites populär wurden.
Sie verschwanden jedoch mit dem Aufkommen von LCD-Bildschirmen, die durch eine permanente Hintergrundbeleuchtung gekennzeichnet sind und immer die gleiche Energie verbrauchen - unabhängig von der auf dem Bildschirm angezeigten Farbe.
Mit dem Aufkommen von OLED-Bildschirmen, die jedes Pixel einzeln beleuchten, ist die Verwendung dunklerer Farben jedoch wieder eine praktikable Technik, um den Energieverbrauch auf Endgeräten zu reduzieren.

Also nutzt den Dark Mode rege - z.B. den in unserem neusten Contao Theme NATURE mit Dark Mode.

#15 PWA (Progressive Web App)

Durch die progressive Web-App-Technologie können Webseiten Funktionen zu nutzen, die normalerweise nur in native Apps verfügbar sind. Beispielsweise das Zwischenspeichern von Dateien auf dem Endgerät des Nutzers, mit dem klaren Vorteil, dass Inhalte und Assets bei wiederholten Besuchen nicht jedes Mal neu geladen werden müssen. Dies kann die zu übertragende Datenmenge deutlich reduzieren, insbesondere auf mobilen Geräten, bei denen die Datenübertragung energieintensiver ist als bei drahtgebundenen Verbindungen.

Neben der Energieeinsparung werden zudem automatisch Ladezeiten und Benutzerfreundlichkeit optimiert und das ohne irgendwelche Nachteile.

#16 Auf die PUE des Hosters achten

Die Energieeffizienz von Rechenzentren lässt sich mit einer Kennzahl namens Power Usage Efficiency, kurz PUE einstufen. Die PUE zeigt das Verhältnis von der Gesamtenergie, die in das Rechenzentrum gelangt, zu der Energie, die tatsächlich benötigt wird, um dessen Computer zu betreiben. Dies verdeutlicht dann die Menge an Energie, die für nicht-rechenbezogene Aktivitäten, wie Kühlung, verschwendet wird.

Die typische PUE für ein Rechenzentrum liegt bei etwa 1,67. Dies bedeutet, dass von 1,67 Watt, die in das Rechenzentrum fließen, nur 1 Watt für die Stromversorgung der Computersysteme verwendet wird. Je mehr sich der PUE-Wert also der Zahl 1 nähert, umso effizienter arbeitet das Rechenzentrum. Hochleistungsrechenzentren, wie die von Google betriebenen, können einen PUE-Wert von bis zu 1,11 aufweisen.

Kennt ihr die PUE des von eurem Hoster verwendeten Rechenzentrums?

#17 Mit Reizen geizen

Webfonts sind toll, weil sie Webseiten schöner & individueller machen können - sie wirken sich jedoch leider oft negativ auf die Dateigröße der Website aus. Eine einzelne Schriftdatei kann bis zu 250kb groß sein - und das pro Schriftstil. Wer also gern light, fett, kursiv und Kapitälchen verwendet landet schnell bei 1MB Zusatzgewicht. Wer Daten, Ladezeiten und Energie sparen will, sollte also die folgenden Optionen in Betracht ziehen:
 
Verwendet weniger. Versucht sparsam mit der Anzahl der Schriften und auch deren Schriftstilen umzugehen, weniger ist hier mehr.
 
Verwendet keine Webfonts. Verwendet Systemschriften. Und wir meinen hier nicht Arial und Times New Roman. Die Rede ist von Schriften, die Hausherren ihrer Betriebssysteme sind und für moderne, hochauflösende Bildschirme konzipiert sind. Apple, Google & Microsoft haben bei ihren Systemschriften San Francisco, Roboto & Segoe beeindruckende Arbeit geleistet und ihr befindet euch in guter Gesellschaft: GitHub, Booking.com, Medium - alle verwenden Systemschriften, alle performant und alle schön & wirkungsvoll auf ihre eigene Weise.
 
Dieser humorvolle Erfahrungsbericht von Booking zeigt, dass dies auch eigentlich ganz einfach zu implementieren ist - wenn man weiß wie... ;)

#18 Skip video

Videos sind mit Abstand die daten- und verarbeitungsintensivste Form von Inhalten - werden jedoch als Inhaltsformat im Web immer beliebter. Eine Website mit Videowiedergabe kann um ein Vielfaches größer sein als ohne Video und erzeugt zusätzlich eine viel höhere Belastung der CPU des Nutzers, was zu einem deutlich höheren Energieverbrauch führt.

Hinsichtlich der Energieeffizienz seiner Website sollte man also zu aller erst prüfen, ob Videos wirklich notwendig sind. Falls ja, überlegt euch wie die Menge der Streamingdaten reduziert werden kann: z.B. indem Videoinhalte so kurz wie möglich gehalten werden und die automatische Wiedergabe deaktiviert wird.

skip video - save energy.

#19 CDNs verwenden

In Tipp #9 erklärten wir, dass es besonders energieeffizient ist, einen Hoster mit einem Rechenzentrum in der Nähe der Hauptzielgruppe zu wählen. Was aber, wenn die Zielgruppe über die ganze Welt verteilt ist?

Content-Delivery-Netzwerke (CDN's) bieten hierfür eine hervorragende Lösung, indem sie Assets, wie Bilddateien, aus einem Netzwerk von Rechenzentren auf der ganzen Welt ausliefern. Somit können die angefragten Daten meistens zu großen Teilen von einem CDN-Speicherort in der Nähe des Benutzers geladen werden, was die Entfernung, die die Daten bei jedem Laden einer Seite zurück legen müssen, deutlich verringert.

Dies verbessert erneut die Energieeffizienz und die Seitenladezeiten, also ein Puls an Performance & User Experience.

#20 Green Hosting

Mit Green Hosting ist gemeint, dass der Hoster einer Website mit Ökostrom arbeitet, auf effiziente Klimatisierung setzt und ein eigenes Rechenzentrum betreibt. In Deutschland ist dies zum Beispiel bei Biohost oder Mittwald möglich und auch all-inkl setzt auf Strom aus regenerativen Energien. Dies allein reicht sicher nicht aus, um das online entstandene CO₂ zu kompen­sieren, aber es sorgt zumindest für Schadensbegrenzung.

Also schaut doch mal nach, wie der Hoster eures Vertrauens diesbezüglich aufgestellt ist.

#21 Safari Web Inspector CPU Timeline

Der Web Inspector in Safari enthält seit einiger Zeit ein nützliches Werkzeug zur Untersuchung der Engergieeffizienz von Webseiten: die CPU-Timeline. Mit dieser können Entwickler die CPU-Auslastung einer Seite messen, die Energieauswirkungen von Skripten etc. abschätzen und somit leichter die Ursachen ausmachen, die eventuell zu einer schlechten Energienutzung beitragen.
 
Dieser Artikel der WebKit-Entwickler von Apple bietet einen Einblick in das Tool: https://webkit.org/blog/8993/cpu-timeline-in-web-inspector/

#22 Leichter Code

Schlanker und effizienter Code ist nicht nur energiesparsam sondern eine grundsätzlich gute Sache, denn von sauberem und einfachem Code ohne Doppelungen und mit effizienten Abfragen profitieren Performance, Wartbarkeit und Umwelt gleichermaßen.

Bedenkt jedoch, dass dies nicht nur für den Code gilt, den ihr selbst verfasst, sondern auch für den Code, den ihr euch "ausleiht". Beim Verwenden von fremden Frameworks und Bibliotheken, sollte also stets darauf geachtet werden, dass diese so gut wie möglich auf die benötigten Funktionalitäten zugeschnitten sind, und keine tonnenschwere Eierlegendewollmilchsau eingebunden wird.

Ganz und gar nicht schwer und recht smart ist beispielsweise das CSS-Framework Spectre - dieses wiegt bei komprimierter Auslieferung lediglich 10kb. Läd man nur Module, die man auch wirklich braucht, lässt sich dies sogar noch weiter verringern.

So lässt sich mit Leichtigkeit Energie sparen ;)

#23 Solar Powered Website

Für alle, denen ein Green Hoster nicht reicht und die die Energiebilanz ihrer Website selbst in die Hand nehmen wollen, haben wir hier einen ganz besonderen Tipp:
 
Betreibt eure Website selbst - und zwar mit 100% mit Sonnenenergie.
Dazu braucht ihr u.a. nur einen Einplatinencomputer, ein Solarpanel und/oder Akku und eine 100Mbit Internetleitung.
 
Kleiner Wermutstropfen: Die Webseite ist - je nach Wetterlage - nicht immer unterbrechungsfrei online, aber wenn eure Zielgruppe und deren Onlinegewohnheiten nicht dagegen sprechen - why not?
 
Wie kann also eine solche Low-Tech-Website aussehen? So hier: https://solar.lowtechmagazine.com/
Und wie funktionierts? Hier werden die technischen Hintergründe erklärt: https://homebrewserver.club/low-tech-website-howto.html
 
"This is a solar-powered website, which means it sometimes goes offline" ;)

#24 Unser Werkzeug für nachhaltige Webprojekte

Es ist wichtig das Energieproblem der Webbranche ernst zu nehmen und anzugehen. Der Energieverbrauch von Webseiten kann für uns zwar nur schwer oder sogar manchmal unmöglich genau zu messen sein, aber es gibt viele Dinge, die wir tun können, um Verschwendung zu vermeiden und Effizienz zu erhöhen. Die meisten dieser Aktionen sind nicht grundlegend schwierig oder komplex, sie erfordern einfach ein bisschen Aufmerksamkeit und sorgfältige Überlegungen hinsichtlich Design, Inhaltserstellung, Entwicklung und Hosting.
 
Aber das Beste daran ist: Fast alle Dinge, die wir tun können, um Webseiten energieeffizienter zu machen, machen diese automatisch auch in anderen Hinsichten besser: Sei es besseres SEO, schnellere Performance oder höhere Nutzerfreundlichkeit:

Eine energieeffizientere Webseite ist also im Grunde genommen immer auch eine bessere Webseite.

 
Dies haben wir uns zum Anlaß genommen und viele der von uns vorgestellten Tipps kurzerhand in die Praxis umgesetzt, um allen, die Interesse daran haben, engergieeffiziente Webseiten zu bauen, ein Werkzeug in die Hand zu geben:

Ein neues Contao-Theme - ein energiesparendes Theme, welches als leichtgewichtiger Ausgangspunkt eurer zuküftigen energieeffizienten Webprojekte dienen soll. Alle Details hierzu und natürlich das (kostenlose) Theme selbst findet ihr hier: https://contao-themes.net
 
Wir sind gespannt, ob wir damit tatsächlich ein bisschen Nachhaltigkeit in die digitale Welt bringen können und freuen uns auf zahlreiches Feedback und natürlich auch weitere Tipps zur Reduzierung des Energieverbrauchs von Webseiten, die wir gern mit aufnehmen... Lasst es uns wissen!
 

Zurück

Webseiten erstellen mit Contao Themes

?

Tipp:

Wenn du mit der Maus über die Version fährst, kannst du das Veröffentlichungsdatum anzeigen lassen.